本篇, 我们来学习如何新建页面并展示在侧边栏中
我们以新建一个请求测试页(request_test)为例子
一. 新建页面
我们新建src\pages\api_test文件夹
在里面建立四个文件:
| 文件夹 | 用途 |
|---|---|
API_test.vue |
页面 |
i18n.js |
国际化配置 |
index.js |
页面暴露脚本 |
index.less |
页面less样式配置 |
我们先忽略国际化和样式 写一个简单的页面
1. index.js
这个文件是为了暴露页面给路由
import API_test from './API_test.vue'
export default API_test
2. API_test.vue
先写一个模板出来
<template>
<h2>API_test</h2>
</template>
<script>
export default {};
</script>
<style>
</style>
二. 配置目录(非动态路由)
我们打开src\router\config.js
在options对象里找到 path: '/',的对象, 其children属性的数组就对应着菜单的配置
我们添加一个菜单项
{
path: 'api_test',
name: 'API测试页',
meta: {
icon: 'ie'
},
component: () => import('@/pages/api_test')
},
我们打开页面发现已经配置好了路由
三. 编写具体页面
稍微写一下具体页面: 要能输入API接口, 能请求API, 能展示结果
根据之前的分析, 请求应该是通过服务发送的, 但是我们先把请求写在页面里, 稍后修改
<template>
<div>
<h2>接口测试</h2>
<span>请输入API地址(只测试GET请求)</span>
<a-input-search
placeholder="input a API"
size="large"
@search="onSearch"
v-model="api_str"
:loading="loading"
>
<a-button slot="enterButton" type="primary"> 请求此API </a-button>
</a-input-search>
<a-divider></a-divider>
<h3>{{ rev_data }}</h3>
</div>
</template>
<script>
import { request, METHOD } from "@/utils/request";
export default {
data() {
return {
api_str: "http://localhost:3000/string",
loading: false,
rev_data: "收到的响应",
};
},
methods: {
onSearch() {
this.loading = true;
request(this.api_str, METHOD.GET)
.then((result) => {
this.loading = false;
this.rev_data = result;
})
.catch((err) => {
this.rev_data = err;
});
},
},
};
</script>
<style>
</style>
我们请求: http://localhost:3000/string 发现结果:
至此, 一个请求返回的功能做好了, 下面, 我们把请求函数写进service里去
四. 把请求改为在services之中实现
我们建立文件src\services\api_test.js
这样写请求
import { request, METHOD} from '@/utils/request'
export async function api_get_test(url) {
return request(url, METHOD.GET)
}
export default {
api_get_test
}
在index.js中统一暴露
import userService from './user'
import api_testService from './api_test'
export {
userService,
api_testService
}
如果, 我们的URL是固定的, 还可以写进
src\services\api.js中
下面开始调用刚刚写好的函数
在src\pages\api_test\API_test.vue中引用并调用
<template>
<div>
<h2>接口测试</h2>
<span>请输入API地址(只测试GET请求)</span>
<a-input-search
placeholder="input a API"
size="large"
@search="onSearch"
v-model="api_str"
:loading="loading"
>
<a-button slot="enterButton" type="primary"> 请求此API </a-button>
</a-input-search>
<a-divider></a-divider>
<h3>{{ rev_data }}</h3>
</div>
</template>
<script>
import {api_get_test} from "@/services/api_test";
export default {
data() {
return {
api_str: "http://localhost:3000/string",
loading: false,
rev_data: "收到的响应",
};
},
methods: {
onSearch() {
this.loading = true;
api_get_test(this.api_str)
.then((result) => {
this.loading = false;
this.rev_data = result;
})
.catch((err) => {
this.rev_data = err;
});
},
},
};
</script>
<style>
</style>
五. 国际化
我们在之前创建的src\pages\api_test\i18n.js中进行国际化
就我们这个页面来说, 以下文字内容是需要国际化的
我们在国际化文件中写如下内容:
module.exports = {
messages: {
CN: {
title: '接口测试',
description: '请输入API地址(只测试GET请求)',
button_test: '请求此API'
},
HK: {
title: '接口測試',
description: '請輸入API地址(只測試GET請求)',
button_test: '請求此API'
},
US: {
title: 'API Test',
description: 'Please enter a API address (only test GET requests)',
button_test: 'Request this API'
}
}
}
在src\pages\api_test\API_test.vue中 我们添加国际化引用
需要国际化的地方用:{{$t('国际化变量名')}}来引用,
现在src\pages\api_test\API_test.vue内容如下:
<template>
<div>
<h2>{{$t('title')}}</h2>
<span>{{$t('description')}}</span>
<a-input-search
placeholder="input a API"
size="large"
@search="onSearch"
v-model="api_str"
:loading="loading"
>
<a-button slot="enterButton" type="primary"> {{$t('button_text')}} </a-button>
</a-input-search>
<a-divider></a-divider>
<h3>{{ rev_data }}</h3>
</div>
</template>
<script>
import { api_get_test } from "@/services/api_test";
export default {
name: "Api_test",
i18n: require("./i18n"),
data() {
return {
api_str: "http://localhost:3000/string",
loading: false,
rev_data: "收到的响应",
};
},
methods: {
onSearch() {
this.loading = true;
api_get_test(this.api_str)
.then((result) => {
this.loading = false;
this.rev_data = result;
})
.catch((err) => {
this.rev_data = err;
});
},
},
};
</script>
<style>
</style>
现在已经可以国际化了
网友评论