我是程序员无思。该文为gin + vue 零基础入门教程（part3），这个教程的前后端源码我将同步更新至我的gitee账号：https://gitee.com/coderwusi 、github账号：https://github.com/coderwusi。我会不定期在b站直播间http://live.bilibili.com/23616569直播该系列教程，有兴趣的小伙伴可以来看看。
go连接redis目前阶段虽然用不上，但以后涉及到消息队列或缓存肯定要用上的。
setting目录下新建redis.go：
package setting
import (
"context"
"fmt"
"github.com/go-redis/redis/v8"
"log"
)
func RedisClient() {
var ctx = context.Background()
rdb := redis.NewClient(&redis.Options{
Addr: "localhost:6379",
Password: "", // 没有密码就填空字符长即可
DB: 0, // use default DB
})
_, err := rdb.Ping(ctx).Result()
if err != nil {
log.Fatal(err)
}
fmt.Println("redis连接成功")
}
修改main.go代码：
package main
import (
"fmt"
"gin-base-cli/model"
"gin-base-cli/setting"
"github.com/gin-gonic/gin"
)
func main() {
setting.Init() //读取环境配置
model.MysqlInit(setting.Conf.MySQLConfig) //连接mysql
setting.RedisClient() //连接redis
r := gin.New()
r.GET("/ping", func(c *gin.Context) {
c.JSON(200, gin.H{
"message": "pong",
})
})
if err := r.Run();err!=nil{
fmt.Println("启动服务失败：",err)
} // 监听并在 0.0.0.0:8080 上启动服务
}
cmd下输入go run main.go ，显示如下则表示redis连接成功：
插曲：gin.Default() 与 gin.New()gin.Default() 默认加载了两个框架内置的中间件的，而 gin.New() 则没有，根据需要自己手动加载中间件。即gin.Default()=gin.New()+gin.Logger()+gin.Recovery()。源码如下：
安装vue模板# 克隆项目 git clone -b vue3.0-antdv https://github.com/chuzhixin/vue-admin-beautiful.git # 进入项目目录 cd vue-admin-beautiful-pro # 安装依赖 npm i # 本地开发 启动项目 npm run serve
执行 npm run serve 后弹出如下界面则表示vue模板安装成功
前端项目根目录 .eslintrc.js 文件 rules 修改如下（关闭eslink规范）：
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
// 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',//关闭eslink
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',//关闭eslink
"prettier/prettier": "off"//关闭eslink
},
}
修改 前端目录 src/views/index/versioninformation.vue 文件内容如下：
sf131eda
重新运行项目发现报如下图的跨域错误：
后端解决跨域根目录新增middleware文件夹，middleware文件夹下新建cors.go:
package middleware
import (
"github.com/gin-gonic/gin"
"net/http"
)
func Cors() gin.HandlerFunc {
return func(c *gin.Context) {
method := c.Request.Method
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
c.Header("Access-Control-Allow-Credentials", "true")
//放行所有OPTIONS方法
if method == "OPTIONS" {
c.AbortWithStatus(http.StatusNoContent)
}
// 处理请求
c.Next()
}
}
main.go新增跨域处理：
package main
import (
"fmt"
"gin-base-cli/middleware"
"gin-base-cli/model"
"gin-base-cli/setting"
"github.com/gin-gonic/gin"
)
func main() {
setting.Init() //读取环境配置
model.MysqlInit(setting.Conf.MySQLConfig) //连接mysql
//setting.RedisClient() //连接redis
r := gin.Default()//默认使用Logger(), Recovery()
r.Use(middleware.Cors()) //启用跨域
r.GET("/ping", func(c *gin.Context) {
c.JSON(200, gin.H{
"message": "pong",
})
})
if err := r.Run();err!=nil{
fmt.Println("启动服务失败：",err)
} // 监听并在 0.0.0.0:8080 上启动服务
}
刷新页面看到接口信息正常：
阶段总结至此，前端模板下载、运行，后端连接redis、配置跨域就告一段落了。目前目录结构如下：
我是程序员无思，喜欢这个系列的文章就点赞支持一下吧！
