昨天我们介绍了前后端结合将数据持久化的基础流程，将后端的数据库的表信息渲染到前端页面上，将前端提交的表信息发送到后端处理，对数据库的表信息进行增删改查，因为昨天还没有搭建数据库，就没具体演示，今天使用docker搭建一个mysql数据库，然后使用后端gorm框架操作mysql数据库。
顺道说一下，怎么使用docker搭建mysql数据库，很简单，以下是具体步骤：
1. 安装Docker
首先需要在你的系统上安装Docker。可以参考Docker的官方文档进行安装。安装完成后,确保Docker工作正常，我这里用的docker桌面版。
2. 拉取MySQL 8镜像
使用Docker Hub上MySQL的镜像,输入以下命令拉取MySQL 8镜像:
代码语言：javascript复制docker pull mysql:8
3. 创建MySQL容器
使用MySQL镜像创建一个名为mysql-db的容器,并设置MYSQL_ROOT_PASSWORD变量指定MySQL的root账户密码:
代码语言：javascript复制docker run -p 3306:3306 --name mysql-db -e MYSQL_ROOT_PASSWORD=123456 mysql:8
- -p 3306:3306:将宿主机的3306端口映射到容器内部的3306端口
- -name mysql-db:指定容器名称为mysql-db
- -e MYSQL_ROOT_PASSWORD=123456:设置root密码为123456
- mysql:8:使用mysql:8镜像启动容器4. 登录MySQL并创建数据库
登录刚启动的mysql-db容器,用root用户和设置的密码登录MySQL:
代码语言：javascript复制docker exec -it mysql-db mysql -uroot -p123456然后在MySQL客户端内创建一个名为mydb的数据库:
代码语言：javascript复制CREATE DATABASE mydb;
到这就算成功搭建了，我们用工具连接上看看：
这就算搭建成功了，很简单吧！
再来介绍gorm是什么？
先了解下，go操作mysql有那些方式，一般有以下几种方式和工具：
1. MySQL驱动:database/sql包内置的MySQL驱动。使用简单,但功能较基础。
2. GORM:非常流行的ORM工具,能极大简化数据库操作。支持MySQL,PostgreSQL,SQLite,SQL Server等主流数据库。
3. XORM:简单易用的ORM工具,支持MySQL,PostgreSQL,SQLite,SQL Server,Oracle等数据库。
4. gmysql:第三方MySQL驱动,性能较好,功能较丰富。
但具体使用什么工具,需要根据项目的需求和复杂度来选择，目前主流还是使用GORM
可以比较简单的完成包括连接数据库、创建表、增删改查等一系列操作,大大简化了Go语言操作MySQL的难度。
GORM是Go语言中最流行的ORM(Object Relationship Mapping)框架。它可以让我们通过Go语言的结构体与数据库表之间建立映射关系,从而简化数据库操作。GORM能支持许多主流数据库,如:
代码语言：javascript复制- MySQL
- PostgreSQL
- SQLite
- SQL Server
- OracleORM又是什么？
ORM框架的全称是Object-Relational Mapping,意为对象-关系映射。它的作用是在关系型数据库和面向对象语言之间进行转化,实现对象与数据库的映射。具备建表、CURD操作，关联关系映射，可以简化操作数据库的难度，提升开发效率。
ORM框架就可以干什么:
1. 根据我们定义的模型(对象)创建数据库表
2. 实现对象与表之间的双向操作
- 对象的修改会同步到表中
- 表的数据变化也会同步到对象上
3. 简化数据库操作,我们可以通过对象的CRUD来实现表的CRUD
所以说ORM框架的主要作用就是建立对象与关系数据库的对应关系,让我们可以以面向对象的方式操作数据库,而不必编写复杂的SQL语句。
来一个简单示例：
代码语言：javascript复制type User struct {
gorm:"primary_key"
ID int
Name
string
}
db, err := gorm.Open("mysql",
"user:password@/dbname?charset=utf8&parseTime=True&loc=Local")
if err != nil {
panic("数据库连接失败")
}
// 自动迁移模式
db.AutoMigrate(&User{})
// 创建记录
db.Create(&User{Name:
"John"})
// 查询
var user User
db.First(&user, 1) // 根据主键查询
// 更新
db.Model(&user).Update("Name",
"Josh")
// 删除
db.Delete(&User{ID: 1})实际应用：
前端用昨天的代码：
代码语言：javascript复制<template>
<div>
<a-table :columns="columns"
:data-source="dataSource" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Table } from 'ant-design-vue'
import axios from 'axios'
interface Column {
title: string
dataIndex: string
}
interface DataSource {
Name: string
Age: number
Sex: string
ID:
number
Email: string
}
export default defineComponent({
components: {
ATable: Table
},
data() {
return {
columns: [
{
title: 'Name',
dataIndex: 'Name'
},
{
title: 'Age',
dataIndex: 'Age'
},
{
title: 'Sex',
dataIndex: 'Sex'
},
{
title: 'ID',
dataIndex: 'ID'
},
{
title: 'Email',
dataIndex: 'Email'
}
] as Column[],
dataSource: [] as DataSource[]
}
},
mounted() {
axios.get('http://localhost:8089/tableData')
.then(res => {
this.dataSource = res.data
})
}
})
</script>后端用以下代码：
代码语言：javascript复制package main
import (
"errors"
"github.com/gin-gonic/gin"
"gorm.io/driver/mysql"
"gorm.io/gorm"
)
type User struct {
ID int
Name string
Age int
Sex string
Email
string
}
func main() {
//连接数据库
db,
err :=
gorm.Open(mysql.Open("root:pw@tcp(localhost:3306)/test?charset=utf8mb4"),
&gorm.Config{})
if
err != nil {
errors.New("数据库连接失败!")
}
//创建 Gin 路由
r
:= gin.Default()
//跨域中间件
r.Use(CORSMiddleware())
//选择 user 表
db
= db.Table("user")
//添加 /user 接口,获取 user 记录
r.GET("/tableData",
func(c *gin.Context) {
var
users []User
db.Find(&users)
c.JSON(200,
users)
})
//启动服务器
r.Run(":8089")
}
// CORS 中间件
func CORSMiddleware() gin.HandlerFunc {
return
func(c *gin.Context) {
c.Writer.Header().Set("Access-Control-Allow-Origin",
"*")
c.Writer.Header().Set("Access-Control-Allow-Headers",
"Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization,
accept, origin, Cache-Control, X-Requested-With")
c.Writer.Header().Set("Access-Control-Allow-Methods",
"POST, OPTIONS, GET, PUT, PATCH, DELETE")
if
c.Request.Method == "OPTIONS" {
c.AbortWithStatus(204)
return
}
c.Next()
}
}启动前后端，看看效果：
前端：
后端：
看看数据库的user表：
而这里前端知识渲染了数据库的表信息，只能浏览不能改，所以要对应的开发前端页面，调用后端接口api利用gorm操作数据库，实现前端操作数据库的增删改查。
比如增加信息：
代码语言：javascript复制addRecord() {
axios.post('http://localhost:8089/add', {
Name: 'Mary',
Age: 30,
Sex: 'Female',
ID: 11,
Email: 'mary@example.com'
})
好了今天的分享就到这里，感兴趣的朋友别忘了点赞关注呀！
