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

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

现在已经可以国际化了

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