使用Vue2从零开始搭建K8S后台管理系统的前端页面(1)
上一篇通过使用自定义的 request 实现了对业务 api 的访问实现，但是脚手架中一部分内置 api，包括了登入、登出、用户信息，还是通过内置的 request，并通过 mock 模拟数据返回请求结果；
观察调用路径发现：
/src/views/index.vue
=>/src/api/user.js
=>/src/utils/request.js
=>.env.development
request 中使用了环境变量配置文件 .env.development 中的 BASE_URL ，而该文件中默认值并不是个远程 URL ，而是 /dev-api，也就是说现在业务 API 会请求到我们的 GO API 中，而用户 API还是会走本地的数据模拟；
上一章中只是为了快速测试，独立出了一个自定义的 request 文件，在上实际生产环境中，肯定是需要构建我们的用户系统，并且这部分功能由我们的 GO API 去集成的。
所以这里我们统一将请求都转到 request.js 上面去；
首先修改 /src/api/deploy.js
import request from '@/utils/myrequest'==========>
import request from '@/utils/request'并且修改我们的 .env.development，替换成远程 URL
# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = "http://localhost:8080"
返回到 request.js 中有这样一段代码
const res = response.data// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000
})所以我们在业务 API 中需要修改样式，来适配脚手架预期响应格式
// handler
func (this *DeploymentCtl) GetList(c *gin.Context) goft.Json {ns := c.DefaultQuery("ns", "default")// 适配vue-admin-template预期响应格式return gin.H{"code": 20000,"data": this.DeploymentService.ListAll(ns),}
}同时 deploylist.vue 中的绑定数据的 method 也需要做一定数据处理
methods: {fetchData() {this.listLoading = truegetList("default").then(response => {// responese.data表示返回的json数据// 第二个data是json中key为“data”的数据this.list = response.data.datathis.listLoading = false})}}除此之外，在 request.js 中 token 是从请求头里面的 “X-TOKEN” 中获取，因此我们必须在全局的跨域中间件中放行该头;
注意需要放行 OPTIONS 方法，在跨域请求中，会先进行一次 OPTIONS 预检，来确保服务端支持跨域。
上述工作完成后，我们还需要在 GO API 中实现登录 API，/src/api/user.js 中有如下：
import request from '@/utils/request'export function login(data) {return request({url: '/vue-admin-template/user/login',method: 'post',data})
}export function getInfo(token) {return request({url: '/vue-admin-template/user/info',method: 'get',params: { token }})
}export function logout() {return request({url: '/vue-admin-template/user/logout',method: 'post'})
}我们在 GO API 中根据对应路径将其实现即可，请求返回结果参照 /mock/user.js，沿用其中的假数据，只是请求的目的端换了而已。
