VUE3获取GO后端数据使用reactive方式输出到DOM

前端代码：

<script setup>
import { RouterView, RouterLink } from 'vue-router';
import axios from 'axios';
import { reactive } from 'vue';


let jsonData = reactive({})
axios.get('/api/hello2')
  .then(response => {
    jsonData.userinfo = JSON.parse(response.data); 
  })
  .catch(error => {
    console.error(error);
  });
</script>

<template>
  这里输出后端数据
  <div v-for="(d,index) in jsonData.userinfo" :key="index">
   姓名：{{ d.NAME }}  邮箱：{{ d.Email }} 
  </div>
</template>

后端go代码：

package main

import (
	"encoding/json"
	"fmt"

	"github.com/gin-gonic/gin"
	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

func ConnectDB() (*gorm.DB, error) {
	dsn := "root:root@tcp(127.0.0.1:3306)/ceshi?charset=utf8mb4&parseTime=True&loc=Local"
	// 根据实际的用户名、密码、主机地址、端口号、数据库名修改dsn
	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	return db, err
}

type User struct {
	gorm.Model
	NAME  string
	Email string
}

// Cors 跨域中间件
func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method
		origin := c.Request.Header.Get("Origin")

		if origin != "" {
			c.Header("Access-Control-Allow-Origin", "*")
			c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
			c.Header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, X-User-Agent, X-User-Id, X-Device-Id")
			c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")
			c.Header("Access-Control-Allow-Credentials", "true")
		}
		if method == "OPTIONS" {
			c.AbortWithStatus(200)
		}
		c.Next()
	}
}

func main() {

	//数据库操作
	db, err := ConnectDB()
	if err != nil {
		panic("无法连接数据库")
	}

	// 自动迁移，确保数据库表结构与结构体一致
	//db.AutoMigrate(&User{})

	// 创建一个用户实例并插入数据库
	/* user := User{NAME: "Jamin", Email: "jamin@163.com"}
	result := db.Create(&user)
	if result.Error != nil {
		fmt.Println("插入失败：", result.Error)
		return
	}
	fmt.Printf("插入成功，用户 ID: %d\n", user.ID) */

	// 创建一个默认的路由引擎
	router := gin.Default()

	// 调用解决跨域方法，添加跨域中间件
	//router.Use(Cors())

	//路由1：获取服务器测试数据
	router.GET("/hello", func(c *gin.Context) {
		// c.JSON：返回JSON格式的数据
		c.JSON(200, gin.H{
			"message": "nihao,feng",
		})
	})

	//路由2：获取服务器数据库数据
	router.GET("/hello2", func(c *gin.Context) {

		var users []User
		db.Find(&users)

		// 将查询结果转换为JSON
		jsonData, err := json.Marshal(users)
		if err != nil {
			fmt.Println("JSON转换失败：", err)
			return
		}
		c.JSON(200, string(jsonData))

	})

	// 启动HTTP服务
	router.Run(":8080")

}

说明：

1. 后端代码没有进行分包整合，只用于测试
2. 从后端返回的数据库数据为json格式的字符串型，需要使用js的json转换函数JSON.parse进行转换
3. 前端代码中创建的reactive数据类型为对象，然后给该对象添加一个“userinfo”属性进行数据绑定
4. 后端代码的数据库操作部分一般写到GIN路由之前
5. GO代码使用结构体和GORM默认设置