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

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

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

后端

Go 语言学习资料:

接口测试: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 也无法获取信息
Logo

前往低代码交流专区

更多推荐