「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」

前言

上篇讲了一下框架的基本知识，今天就想接入后端框架接口，然后发现了一系列的问题，发现需要登录才能进入框架列表，还有跨域错误，先需要设置环境变量，去掉模拟数据才行

前端修改

设置环境变量

把.env.development文件名修改为.env，因为本地Gin框架的端口是8080，然后修改其内容为：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://localhost:8080'

然后再修改.env.production文件，为了之后CI上线更方便，今天用不到这个地方：

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://api.tuwei.space'

修改本地代理：

修改vue.config.j文件 devServer配置加入一下内容(自己本地的Gin框架的地址是：http://localhost:8080)：

    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

具体位置看截图：

修改完这里网络请求就不走模拟数据直接请求后端接口了

修改登录的api请求路径

修改src/api/user.js内容,把所有路由方法里面的usl地址稍微改一下例如login方法的url现在为：

url: '/vue-admin-template/user/login',

改为：

url: '/admin/user/login',

其他两处也一样,看看完整改完后的文件内容：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/admin/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/admin/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/admin/user/logout',
    method: 'post'
  })
}

修改默认的状态码

那么现在还要修改码，默认的状态码20000是成功的，我自己的Gin框架的成功的状态码是200
修改src/utils/request.js的49行左右

if (res.code !== 20000) {

修改为

if (res.code !== 200) {

后端修改

从最开始的路由开始到最后的service，目的是直接模拟登录，不做详细的账号密码验证，这个有点复杂放在后面专门做

添加路由

在 router/router.go文件添加内容：

	adminuser := router.Group("/admin/user")
	{
		adminuser.POST("/login", controller.Login)
		adminuser.GET("/info", controller.Info)
	}

添加控制器

路由进入控制器,这里要假装接受前端的参数
在 controller/controller.go文件添加内容：

func Login(c *gin.Context) {
	var json request.LoginRequest
	if err := c.ShouldBindJSON(&json); err != nil {
		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
		return
	}
	result := global.NewResult(c)
	data, err := service.Login(json)
	if err != nil {
		result.Error(5201, err.Error(), "修改失败")
		return
	}
	result.Success(data)
}
func Info(c *gin.Context) {
	result := global.NewResult(c)
	result.Success("info")
}

添加验证器

假装验证前端传来的参数
在 request/request.go文件添加内容：

type LoginRequest struct {
	Username string `form:"username" json:"username" binding:"required"`
	Password string `form:"password" json:"password" binding:"required"`
}

添加服务方法

在 service/service.go文件添加内容：

func Login(json request.LoginRequest) (id string, err error) {

	return "tokentokentokentokentokentokentoken", nil
}

解决跨域&总结

重新运行两个框架，一定要，因为前端框架一定要重新运行设置的本地代理才会生效现在已经正常进入到了后台，然后发现控制台报错了：

还有跨域报错？最开始不是设置了吗。然后发现是header头里面有一个x-token的东西后端没有加上。修改Gin里面的中间件或者修改vue-admin-template默认token名就可以了，我对Gin熟悉就修改Gin中间件了
修改middleware/middleware.go

context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")

改为：

context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token,x-token")

重启前后端，特别是注意前端，设置的本地代理一定要重启才能生效，现在发现控制台没有报错了，完美解决跨域问题，下篇讲讲如何接入后端接口。

从零开始摸索VUE，配合Golang搭建导航网站（二十一.vue-admin-template模拟账号登录）

前言