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

顺道说一下，怎么使用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;
复制

到这就算成功搭建了，我们用工具连接上看看：

这就算搭建成功了，很简单吧！

- MySQL
- PostgreSQL
- SQLite
- SQL Server
- Oracle
复制

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()
 }
}
复制

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


复制