学习视频：Go语言 Gin + Vue 前后端分离实战 – OceanLearn

本课程的核心思想：快速开发，逐步优化

项目代码：https://gitee.com/szluyu99/gin-demo

后端

Go 语言学习资料：

• 首页 – Go语言中文网 – Golang中文社区 (studygolang.com)
• Go 语言教程 | 菜鸟教程 (runoob.com)
• Go语言圣经 (studygolang.com)
• Learn Go with tests – learn-go-with-tests (gitbook.io)
• Go by Example（英）

接口测试：ApiPost – API 文档、调试、Mock、测试一体化协作平台

Goland 操作

Goland 设置保存时自动格式化代码：Preferences > Tools > File Watchers > + > go fmt

Goland 设置自动引入模块：Preferences > Go > Go Modules > Enable Go moudules integration

Goland 调试小技巧：调试模式下，右键 > Run to Cursoer，可以运行到指定行

定义好接口后，让某个结构体实现它：光标在结构体上，按 ctrl + i

或者 ，Mac 下 cmd + enter > Implement interface（Windows 下是 alt + enter）

创建项目

基础知识：Go 中没有项目的说法，只有包，其中有两个重要路径

• GOROOT：就是 Go 的安装路径（类似于 Java 的 JDK）
• GOPATH：我们的工作空间，保存 Go 项目代码和第三方库

go env 可以查看 Go 的环境相关信息。

Gin 官网：Gin Web Framework (gin-gonic.com)

初始化项目：会在项目目录下生成 go.mod 文件

go mod init oceanlearn.tech/ginessential

根据 Gin 文档进行安装：会更新 go.mod 中的依赖

go get -u github.com/gin-gonic/gin

运行项目

如果有多个文件需要编译运行：

go run main.go routes.go

也可以先编译，再运行：

go build # 编译,生成可执行文件
./ginessential # 该文件根据项目名生成

上面的命令可简写：

go build && ./ginessential 

数据库操作

GORM 官网：GORM – The fantastic ORM library for Golang, aims to be developer friendly.

根据 GORM 文档进行安装：

go get -u gorm.io/gorm
go get -u gorm.io/driver/mysql

使用方法参考官方文档，有中文，很详细。

jwt、Response

jwt-go 库 Git 地址：jwt-go

在 go 中安装开源库使用 jwt：

go get github.com/dgrijalva/jwt-go

jwt 由 header、payload、verify signature 三部分构成，中间以 . 分隔：

• header：存储算法和 token 类型
• payload：存储数据
• signature：对前两者的数据再加密

例如：对于以下 jwt，可以用 echo xxx | base64 -D 进行 Base64 解码查看前两部分

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOjQsImV4cCI6MTY0NDI0MjI5NSwiaWF0IjoxNjQzNjM3NDk1LCJpc3MiOiJ5dXNhZWwiLCJzdWIiOiJ1c2VyIHRva2VuIn0.YSM4oRD2iyjNtUcv5MIB5uqHSG85dDAQO5fni5BmwI8

例如对第 1 部分：echo eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 | base64 -D

{
   "alg":"HS256","typ":"JWT"}

第 2 部分同理，得到以下数据：

{
   "UserId":4,"exp":1644242295,"iat":1643637495,"iss":"yusael","sub":"user token}

但是第 3 部分无法直接用 Base 64 解码查看（进行了其他加密操作）。

Header 的 Authorization 加 Bearer 的原因： OAuth 2.0 规定，Authorization 的字符串开头必须要有 Bearer。

[Response 封装](response/response.go · szluyu99/gin-demo – 码云 – 开源中国 (gitee.com)) 中，httpStatus 和 code 是分开的：

• httpStatus 是 http 标准状态码，表示 http 请求是否成功

• code 是业务状态码，表示该接口返回的状态（由接口逻辑决定）

可能 httpStatus 为 200，code 为 40002，表示 http 请求发送成功，但是接口调用失败。

配置管理

网上找到的使用教程：Go语言配置管理神器 — Viper 中文教程

viper 是一个配置解决方案，本项目中用该库将一些配置放到外部配置文件，实现解耦。

• 在 config / application.yml 中写相关配置（服务端口号、数据库相关配置…）
• 在程序开始的 main 函数中，通过 Viper 加载 application.yml 中的配置
• 在初始化数据函数 InitDB 中，读取 Viper 中加载的配置并进行初始化操作

安装：根据文档进行

go get github.com/spf13/viper

获取请求参数

如果前端是表单提交：multipart/form-data

name := ctx.PostForm("name")
telephone := ctx.PostForm("telephone")
password := ctx.PostForm("password")

如果前端传来是 json 数据：application/json

• 原生解析 json 方式：

var requestUser = model.User{
   }
json.NewDecoder(ctx.Request.Body).Decode(&requestUser)

• Gin 中提供的函数：func (c *Context) Bind(obj interface{}) error

json.NewDecoder(ctx.Request.Body).Decode(&requestUser)
ctx.Bind(&requestUser)

数据验证

参考：Multipart/Urlencoded 绑定 | Gin Web Framework

• Must Bind 类型的绑定，验证失败则请求中止，响应状态码被设置为 400 并且 Content-Type 被设置为 text/plain; charset=utf-8

• Should Bind 类型的绑定，Gin 会返回错误并由开发者处理错误和请求

使用 UUID

go get github.com/satori/go.uuid

参考：GORM 中 Hook(对象生命周期)应用：使用UUID作为数据库主键

但是不建议这么用，大数据量下会影响性能

前端

前端只是简单记录一下知识点，没有源码。

环境搭建

Node.js 安装：参考Node.js 中文网

方式 1：去 Node.js 官网安装某个长期维护版本

方式 2（推荐）：使用 nvm (Node Version Manager) 安装和管理多个 node 版本

Mac 下使用 HomeBrew 安装 nvm：

brew install nvm
source $(brew --prefix nvm)/nvm.sh
. ~/.bash_profile

# 查看帮助
nvm --help

# 查看
nvm ls				# 查看本地安装的node版本
nvm ls-remote # 列出可以远程安装的所有node版本

# 安装与卸载
nvm install node		 		# 安装最新版本
nvm install --lts node 	# 安装最新的长期维护版本
nvm install v14.18.3 		# 安装指定node版本
nvm uninstall v14.18.3  # 卸载指定node版本

# 切换
nvm use v14.18.3	# 切换成指定的版本
nvm alias default 16 # 指定想用的版本号, 这样就不用每次打开终端都 nvm use 切换

node -v # 查看当前node版本

yarn 安装：参考Yarn 中文文档

yarn -v

@vue/cli 安装：参考介绍 | Vue CLI

vue --version

创建项目

参考 Vue CLI 文档：创建一个项目 | Vue CLI

vue create ginessential-vue

ESLint

ESLint – 插件化的 JavaScript 代码检测工具 – ESLint中文文档 (bootcss.com)

ESLint 作用：1、检查语法错误 2、检查代码规范

环境变量

创建环境变量文件：.env.development.local、.env.development

# API基础地址
VUE_APP_BASE_URL = http://localhost:8080/api/

在项目中使用：通过 process.env.VUE_APP_BASE_URL 即可获取到定义的值。

process 是 node 维护的全局变量

process.env 中保存着当前 node 项目中所有的环境变量

Vuex

Vuex 是什么？ | Vuex (vuejs.org)

Vue 新的状态管理库 Pinia 也可以了解一下

登出有两种：

• 前端登出：将 Vuex 中存储的 token、userInfo 清除（该 token 仍有效）
• 后端登出：让 token 失效，前端即使使用 token 也无法获取信息