使用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 = true
      getList("default").then(response => {
        // responese.data表示返回的json数据
        // 第二个data是json中key为“data”的数据
        this.list = response.data.data
        this.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，沿用其中的假数据，只是请求的目的端换了而已。