vue-antd-admin使用体验(三) 新建页面并导入目录

本篇, 我们来学习如何新建页面并展示在侧边栏中

我们以新建一个请求测试页(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

先写一个模板出来

二. 配置目录(非动态路由)

我们打开src\router\config.js
在options对象里找到 path: '/',的对象, 其children属性的数组就对应着菜单的配置

我们添加一个菜单项

        {
          path: 'api_test',
          name: 'API测试页',
          meta: {
            icon: 'ie'
          },
          component: () => import('@/pages/api_test')
        },

我们打开页面发现已经配置好了路由

三. 编写具体页面

稍微写一下具体页面: 要能输入API接口, 能请求API, 能展示结果

根据之前的分析, 请求应该是通过服务发送的, 但是我们先把请求写在页面里, 稍后修改

我们请求: 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中引用并调用

五. 国际化

我们在之前创建的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内容如下:

现在已经可以国际化了