基于Gin + GORM + Vue的前后端分离项目实践

希里安 2023-05-06

828

关注“希里安”，get更多有用干货

昨天我们介绍了前后端结合将数据持久化的基础流程，将后端的数据库的表信息渲染到前端页面上，将前端提交的表信息发送到后端处理，对数据库的表信息进行增删改查，因为昨天还没有搭建数据库，就没具体演示，今天使用docker搭建一个mysql数据库，然后使用后端gorm框架操作mysql数据库。

顺道说一下，怎么使用docker搭建mysql数据库，很简单，以下是具体步骤：

1. 安装Docker

首先需要在你的系统上安装Docker。可以参考Docker的官方文档进行安装。安装完成后,确保Docker工作正常，我这里用的docker桌面版。

2. 拉取MySQL 8镜像

使用Docker Hub上MySQL的镜像,输入以下命令拉取MySQL 8镜像:

docker pull mysql:8

3. 创建MySQL容器

使用MySQL镜像创建一个名为mysql-db的容器,并设置MYSQL_ROOT_PASSWORD变量指定MySQL的root账户密码:

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:

docker exec -it mysql-db mysql -uroot -p123456

然后在MySQL客户端内创建一个名为mydb的数据库:

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能支持许多主流数据库,如:

- MySQL
- PostgreSQL
- SQLite
- SQL Server
- Oracle

ORM又是什么？

ORM框架的全称是Object-Relational Mapping,意为对象-关系映射。它的作用是在关系型数据库和面向对象语言之间进行转化,实现对象与数据库的映射。具备建表、CURD操作，关联关系映射，可以简化操作数据库的难度，提升开发效率。

ORM框架就可以干什么:

1. 根据我们定义的模型(对象)创建数据库表

2. 实现对象与表之间的双向操作

- 对象的修改会同步到表中

- 表的数据变化也会同步到对象上

3. 简化数据库操作,我们可以通过对象的CRUD来实现表的CRUD

所以说ORM框架的主要作用就是建立对象与关系数据库的对应关系,让我们可以以面向对象的方式操作数据库,而不必编写复杂的SQL语句。

来一个简单示例：

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})

实际应用：

前端用昨天的代码：

<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>

后端用以下代码：

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操作数据库，实现前端操作数据库的增删改查。

比如增加信息：

addRecord() {
axios.post('http://localhost:8089/add', {
Name: 'Mary',
Age: 30,
Sex: 'Female',
ID: 11,
Email: 'mary@example.com'
})

好了今天的分享就到这里，感兴趣的朋友别忘了点赞关注呀！

文章转载自希里安，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

基于Gin + GORM + Vue的前后端分离项目实践

评论