本篇, 我們來學(xué)習(xí)如何新建頁(yè)面并展示在側(cè)邊欄中

我們以新建一個(gè)請(qǐng)求測(cè)試頁(yè)(request_test)為例子

一. 新建頁(yè)面

我們新建src\pages\api_test文件夾
在里面建立四個(gè)文件:

我們先忽略國(guó)際化和樣式 寫一個(gè)簡(jiǎn)單的頁(yè)面

1. index.js

這個(gè)文件是為了暴露頁(yè)面給路由

import API_test from './API_test.vue'
export default API_test

2. API_test.vue

先寫一個(gè)模板出來

<template>
  <h2>API_test</h2>
</template>

<script>
export default {};
</script>

<style>
</style>

二. 配置目錄(非動(dòng)態(tài)路由)

我們打開src\router\config.js
在options對(duì)象里找到 path: '/',的對(duì)象, 其children屬性的數(shù)組就對(duì)應(yīng)著菜單的配置

我們添加一個(gè)菜單項(xiàng)

        {
          path: 'api_test',
          name: 'API測(cè)試頁(yè)',
          meta: {
            icon: 'ie'
          },
          component: () => import('@/pages/api_test')
        },

我們打開頁(yè)面發(fā)現(xiàn)已經(jīng)配置好了路由

三. 編寫具體頁(yè)面

稍微寫一下具體頁(yè)面: 要能輸入API接口, 能請(qǐng)求API, 能展示結(jié)果

根據(jù)之前的分析, 請(qǐng)求應(yīng)該是通過服務(wù)發(fā)送的, 但是我們先把請(qǐng)求寫在頁(yè)面里, 稍后修改

<template>
  <div>
    <h2>接口測(cè)試</h2>
    <span>請(qǐng)輸入API地址(只測(cè)試GET請(qǐng)求)</span>
    <a-input-search
      placeholder="input a API"
      size="large"
      @search="onSearch"
      v-model="api_str"
      :loading="loading"
    >
      <a-button slot="enterButton" type="primary"> 請(qǐng)求此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: "收到的響應(yīng)",
    };
  },
  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>

我們請(qǐng)求: http://localhost:3000/string 發(fā)現(xiàn)結(jié)果:

至此, 一個(gè)請(qǐng)求返回的功能做好了, 下面, 我們把請(qǐng)求函數(shù)寫進(jìn)service里去

四. 把請(qǐng)求改為在services之中實(shí)現(xiàn)

我們建立文件src\services\api_test.js

這樣寫請(qǐng)求

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中統(tǒng)一暴露

import userService from './user'
import api_testService from './api_test'

export {
  userService,
  api_testService
}

如果, 我們的URL是固定的, 還可以寫進(jìn)src\services\api.js中

下面開始調(diào)用剛剛寫好的函數(shù)

在src\pages\api_test\API_test.vue中引用并調(diào)用

<template>
  <div>
    <h2>接口測(cè)試</h2>
    <span>請(qǐng)輸入API地址(只測(cè)試GET請(qǐng)求)</span>
    <a-input-search
      placeholder="input a API"
      size="large"
      @search="onSearch"
      v-model="api_str"
      :loading="loading"
    >
      <a-button slot="enterButton" type="primary"> 請(qǐng)求此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: "收到的響應(yīng)",
    };
  },
  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>

五. 國(guó)際化

我們?cè)谥皠?chuàng)建的src\pages\api_test\i18n.js中進(jìn)行國(guó)際化

就我們這個(gè)頁(yè)面來說, 以下文字內(nèi)容是需要國(guó)際化的

我們?cè)趪?guó)際化文件中寫如下內(nèi)容:

module.exports = {
  messages: {
    CN: {
      title: '接口測(cè)試',
      description: '請(qǐng)輸入API地址(只測(cè)試GET請(qǐng)求)',
      button_test: '請(qǐng)求此API'
    },
    HK: {
      title: '接口測(cè)試',
      description: '請(qǐng)輸入API地址(只測(cè)試GET請(qǐng)求)',
      button_test: '請(qǐng)求此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中 我們添加國(guó)際化引用

需要國(guó)際化的地方用:{{$t('國(guó)際化變量名')}}來引用,
現(xiàn)在src\pages\api_test\API_test.vue內(nèi)容如下:

<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: "收到的響應(yīng)",
    };
  },
  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>

現(xiàn)在已經(jīng)可以國(guó)際化了