初学go，实现vue3前后端分离，放弃了.....
原创
初学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等目录。
安装需要的模块：
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/viperviper用来解析各种格式的配置文件，GORM 是一个流行的 Go 语言 ORM（对象关系映射）库，直白说就是讲数据库中的表结构和代码中的类（结构体）映射起来，便于用户操作使用。
数据源
使用gorm构建一个MySQL数据源：
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表的方法：
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，启动服务。
func main() {
router := gin.Default()
// 绑定路由规则
route.SetupRoutes(router)
// 启动应用
router.Run(":8082")
}这样，通过8082端口，就可以请求到数据。
vue前端
前端我使用的是vue-cli构建的项目，会自动生成vue的前端项目结构，我们进入go项目，执行创建命令创建web目录：
vue create web根据提示初始化前端目录。
结果如下：
src下的目录是用于开发的目录，assets用来存放静态文件，components是自定的一些组件，例如在BuildAdmin我写过的Icon组件，router就是来定义vue-router的，views用来存放html页面的。
除此之外，还有api目录，用于封装请求像后台请求数据，utils目录封装一些公共类，stores目录用来定义pinia或vuex的静态变量。这一部分实现可以参考腾讯动漫评分展示系统的前端开发部分。
前后端演示
连接数据库成功了，也请求到数据了，但是在GORM映射成Struct的时候出现了问题，还在排查，抽空补上。
在前台请求的时候，请求的十条数据都返回了空数据。
结语
作为一个使用go开发后台的初学者，go的确是有点小难度，复杂性有点高，在orm方面有点绕。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
