Vue3 + TS + Ant Design +Gin+Mysql实现表格数据持久化存储
Vue3 + TS + Ant Design +Gin+Mysql实现表格数据持久化存储
关注“希里安”，get更多有用干货
昨天介绍这个antd表格的试用，我们先看了官方的示例，然后直接使用vben admin提供的表格看一下：
这里我们是直接使用了vben的
\src\views\demo\table\Basic.vue的基础组件，可以看到以上的效果，可是也只是一个示例，如果想实现前后端交互，实现增删改查的功能，就得后端连接数据库，数据库类型可以根据自己的需求选择，可以是mysql也可以是pgsql或者其他的。
那我们这里来使用vite+vue+ts的方式实现前端显示数据库的表信息，并能从前端更改后端数据库的信息。
先说说实现的流程思想，就是前端开发一个页面，后端连接数据库，将查询的结果返回给前端，具体如下：
1、前端使用vue+ts+antd的table组件渲染表格
2、通过axios请求后端api获取表格数据
3、后端api使用orm工具查询数据库中的表数据
4、将查询结果返回给前端组件
5、前端设置返回的数据到 Table 的 dataSource,表格会自动渲染
通过这个过程涉及到前后端的交互，对于vue+ts+antd以及ORM工具操作数据库的知识有一个更加深入的了解，也是全栈开发学习的必经之路。
这里一步步梳理下实现过程：
1、创建vue+vite项目
npm create vite@latest my-vue-app --template vue2、安装antdesign组件以及axios
Npm install ant-design-vue axios
yarn add ant-design-vue axios3、创建 Table 组件,使用 Ant Design 的 Table 渲染表格:
<template>
<div>
<a-table :columns="columns"
:data-source="dataSource" />
<a-button
@click="addRecord">添加</a-button>
</div>
</template>
<script
lang="ts">
import {
defineComponent } from 'vue'
import { Table,
Button } from 'ant-design-vue'
import axios
from 'axios'
export default
defineComponent({
components: {
ATable: Table,
AButton: Button
},
data() {
return {
columns: [],
dataSource: []
}
},
methods: {
addRecord() {
axios.post('/addRecord')
},
getData() {
axios.get('/tableData').then(res => {
this.dataSource = res.data
})
}
}
})
</script>4、开发后端api，这里使用go的gin框架，使用gorm连接mysql数据库
package main
import (
"errors"
"github.com/gin-gonic/gin"
"gorm.io/driver/mysql"
"gorm.io/gorm"
)
type Record
struct{}
func main() {
// 连接数据库
db, err :=
gorm.Open(mysql.Open("root:password@tcp(localhost:3306)/database?charset=utf8mb4"),
&gorm.Config{})
if err != nil {
errors.New("数据库连接失败!")
}
// 数据库迁移
db.AutoMigrate(&Record{})
// 创建 Gin 路由
r := gin.Default()
// 跨域中间件
r.Use(CORSMiddleware())
// 添加记录
r.POST("/addRecord", func(c
*gin.Context) {
db.Create(&Record{})
})
// 获取记录,返回 JSON
r.GET("/tableData", func(c
*gin.Context) {
var records []Record
db.Find(&records)
c.JSON(200, records)
})
// 启动服务器
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()
}
}5、前端调用 axios.get('/tableData') 请求数据设置到this.dataSource,表格自动渲染
6、添加表格增删改查功能
- 添加:axios.post('/addRecord'),后端接收并 INSERT 添加记录
- 删除:在表格行上添加删除按钮, axios.post('/deleteRecord'),后端接收并 DELETE 删除记录
- 修改:在表格行添加编辑按钮,弹出编辑表格,axios.put('/updateRecord'),后端接收并 UPDATE 修改记录
7、 后端对应添加
/addRecord、/deleteRecord 和 /updateRecord接口,接收请求并执行 SQL 语句
8、前端根据结果调用刷新表格
axios.get('/tableData')配置项：
前端：
- TS 配置:tsconfig.json
- 界面组件:*.vue 文件
- axios 配置:axios.ts 文件
- 路由:router.ts 文件
- Pinia 状态管理(可选)后端:
- Gin 配置:gin.go 文件
- 数据库配置:database.go 文件
- 前端接口:*.go 文件
- 日志、异常处理等
完整的 Gin + MySQL项目主要包含:
1. 连接数据库:使用 GORM 连接 MySQL
2. 数据库迁移:db.AutoMigrate()
3. 定义表结构模型:如Record 结构体
4. Gin 路由和接口:处理请求逻辑
5. GORM 数据库操作:CURD 记录
6. 启动 Gin 服务器
7. 异常处理、日志记录等今天的分享就到这了，我这还没搭数据库，明天接着开发，争取早日实现前端页面的完整开发。
腾讯云开发者
