初学go，实现vue3前后端分离，放弃了

前言

刚开始学习后端开发的时候，刚开始学的就是MVC（Model-View-Controller）。其中view就是前端页面，那时候作为静态资源集成在后端里，在controller渲染页面数据，然后返回给浏览器。

后来就开始接触前后端分离，前端页面完全独立于后端。后端负责处理前端请求，从数据库中获取对应的数据返回给前端，前端将数据渲染在页面上。

前两周，使用springboot和vue3写了一个腾讯动漫评分展示系统，今日且看使用go和vue3协作，如何实现前后端分离。

go后端

正如Java的Springboot、python的Django，这里我使用的是go的gin框架来构建后台，先来构建后台功能模块。

项目分层

新建一个goweb项目，创建app和web两个目录，app是后台应用代码目录，web是前台vue代码目录。这里先构建后台功能模块目录。

controller：后端控制器，负责处理请求和业务逻辑model：存放放后端模型，负责定义数据结构、数据库操作database：用于初始化数据库连接和定义数据库操作函数router：使用 Gin 框架提供的方法来定义路由，将不同的请求通过不同的路由分发给对应的处理函数。在对应的路由处理函数中，再调用业务逻辑处理函数或者操作数据库等config：用来定义数据库连接信息等配置

前端后端分离替代了MVC架构中的view，所以这里就没有view模块，除了上面五个目录，还可以定义utils、common等目录。

安装需要的模块：

代码语言：shell

复制

go get -u github.com/gin-gonic/gin 
go get -u gorm.io/gorm
go get -u gorm.io/driver/mysql
go get github.com/spf13/viper

viper用来解析各种格式的配置文件，GORM 是一个流行的 Go 语言 ORM（对象关系映射）库，直白说就是讲数据库中的表结构和代码中的类（结构体）映射起来，便于用户操作使用。

数据源

使用gorm构建一个MySQL数据源：

代码语言：go

复制

package database
import (
	"GoWeb/app/model"
	_ "database/sql"
	"fmt"
	"github.com/spf13/viper"
	"gorm.io/driver/mysql"
	"gorm.io/gorm"
	"path"
	"runtime"
	"time"
)
var DB *gorm.DB
func InitDB() {
	// 设置要读取的配置文件名和配置文件格式
	_, filename, _, _ := runtime.Caller(0)  // 获取当前文件（config.go）路径
	confPath := path.Dir(filename)  // 获取当前文件目录
	viper.AddConfigPath(confPath)
	viper.SetConfigFile("application")
	viper.SetConfigType("yaml")
	host := viper.GetString("database.mysql.host")
	username := viper.GetString("database.mysql.username")
	password := viper.GetString("database.mysql.password")
	port := viper.GetString("database.mysql.port")
	dbname := viper.GetString("database.mysql.dbname")
	dsn := fmt.Sprintf("%s:%s@tcp(%s:%s)/%s?charset=utf8&parseTime=True&loc=Local", username, password, host, port, dbname)
	db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		fmt.Println("Error pinging database:", err)
		return
	}
	sqlDB, err := db.DB()
	sqlDB.SetMaxOpenConns(100)
	sqlDB.SetMaxIdleConns(10)
	sqlDB.SetConnMaxLifetime(time.Minute * 10)
	DB = db
}
func CloseDB() {
	db, err := DB.DB()
	if err != nil {
		fmt.Println("Error close database:", err)
	}
	db.Close()
}

并创建查询cartoon表的方法：

代码语言：go

复制

func GetCartoon(offset, pageSize int) ([]model.Cartoon, error) {
	var cartoon []model.Cartoon
	result := DB.Table("cartoon").Select("cid", "name").Order("score").Offset(offset).Limit(pageSize).Find(&cartoon)
	if result.Error != nil {
		return nil, result.Error
	}
	fmt.Println(cartoon)
	return cartoon, nil
}

controller

当请求过来时候，首先要经过route来判断这个请求要分发到那个controller进行处理，所以要先配置路由策略，在route中定义：

这里将/cartoon/listCartoon请求交给了GetCartoon的controller进行处理：

controller通过gin获取前台，包括表单、url、json等格式的参数，调用database封装的参数获取了数据，然后通过gin封装成json返回。

启动服务

创建一个main.go，启动服务。

代码语言：go

复制

func main() {
 router := gin.Default()
	// 绑定路由规则
	route.SetupRoutes(router)
	// 启动应用
	router.Run(":8082")
}

这样，通过8082端口，就可以请求到数据。

vue前端

前端我使用的是vue-cli构建的项目，会自动生成vue的前端项目结构，我们进入go项目，执行创建命令创建web目录：

代码语言：bash

复制

vue create web

根据提示初始化前端目录。

结果如下：

src下的目录是用于开发的目录，assets用来存放静态文件，components是自定的一些组件，例如在BuildAdmin我写过的Icon组件，router就是来定义vue-router的，views用来存放html页面的。

除此之外，还有api目录，用于封装请求像后台请求数据，utils目录封装一些公共类，stores目录用来定义pinia或vuex的静态变量。这一部分实现可以参考的前端开发部分。

前后端演示

连接数据库成功了，也请求到数据了，但是在GORM映射成Struct的时候出现了问题，还在排查，抽空补上。

在前台请求的时候，请求的十条数据都返回了空数据。

结语

作为一个使用go开发后台的初学者，go的确是有点小难度，复杂性有点高，在orm方面有点绕。