Vue3 + TS + Ant Design +Gin+Mysql实现表格数据持久化存储

希里安 2023-05-05

906

关注“希里安”，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 vue

2、安装antdesign组件以及axios

Npm install ant-design-vue axios
yarn add ant-design-vue axios

3、创建 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. 异常处理、日志记录等

今天的分享就到这了，我这还没搭数据库，明天接着开发，争取早日实现前端页面的完整开发。

前端数据库 ts

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

Vue3 + TS + Ant Design +Gin+Mysql实现表格数据持久化存储

评论