- 后端
- Goland 操作
- 创建项目
- 运行项目
- 数据库操作
- jwt、Response
- 配置管理
- 获取请求参数
- 数据验证
- 使用 UUID
- 前端
- 环境搭建
- 创建项目
- ESLint
- 环境变量
- Vuex
学习视频: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、Responsejwt-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 会返回错误并由开发者处理错误和请求
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-vueESLint
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 即可获取到定义的值。
Vuexprocess 是 node 维护的全局变量
process.env 中保存着当前 node 项目中所有的环境变量
Vuex 是什么? | Vuex (vuejs.org)
Vue 新的状态管理库 Pinia 也可以了解一下
登出有两种:
- 前端登出:将 Vuex 中存储的 token、userInfo 清除(该 token 仍有效)
- 后端登出:让 token 失效,前端即使使用 token 也无法获取信息



