使用Golang的Gin框架和vue编写web应用

最新推荐文章于 2024-08-08 07:15:28 发布

BGBiao

最新推荐文章于 2024-08-08 07:15:28 发布

阅读量7k

点赞数 4

文章标签：运维运维开发 DevOps

本文链接：https://blog.csdn.net/weichuangxxb/article/details/100763437

版权

本文介绍了如何使用Golang的Gin框架构建后端API，并结合Vue.js进行前端开发，实现数据的前端渲染。通过创建Vue组件、配置路由以及使用axios获取后端数据，展示了从项目结构到运行服务的完整流程，最终达到前后端数据融合的效果。

摘要由CSDN通过智能技术生成

背景: 之前使用Golang的Gin框架进行一些运维内部后端的API接口开发，对外提供提供json类型的数据响应，但是该种方式在浏览器访问数据时数据格式不友好(由于是API接口，一般需要使用postman之类的工具来验证接口返回数据)，后来尝试了使用Golang的template模板来结合html进行数据渲染，但也发现比较缺乏美感。之后决定使用前端框架来渲染后端数据，由于vue框架的各种优势，比如简单、数据的双向绑定等等好处，决定使用vue框架来开启我的前端之旅。接下来简单来讲解下使用Golang后端和vue前端进行融合的示例。

基于Gin框架的后端API

编写基于Gin框架的API：

# 查看源码文件
$ cat main.go
/**
 * @File Name: main.go
 * @Author: xxbandy @http://xxbandy.github.io
 * @Email:
 * @Create Date: 2018-12-02 22:12:59
 * @Last Modified: 2018-12-02 22:12:52
 * @Description:
 */
package main

import (
    _ "fmt"
    "github.com/gin-gonic/gin"
    "math/rand"
    "net/http"
)

func HelloPage(c *gin.Context) {
    c.JSON(http.StatusOK, gin.H{
        "message": "welcome to bgops,please visit https://xxbandy.github.io!",
    })
}

func main() {
    r := gin.Default()
    v1 := r.Group("/v1")
    {
        v1.GET("/hello", HelloPage)
        v1.GET("/hello/:name", func(c *gin.Context) {
            name := c.Param("name")
            c.String(http.StatusOK, "Hello %s", name)
        })

        v1.GET("/line", func(c *gin.Context) {
            // 注意:在前后端分离过程中，需要注意跨域问题，因此需要设置请求头
            c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
            legendData := []string{"周一", "周二", "周三", "周四", "周五", "周六", "周日"}
            xAxisData := []int{120, 240, rand.Intn(500), rand.Intn(500), 150, 230, 180}
            c.JSON(200, gin.H{
                "legend_data": legendData,
                "xAxis_data":  xAxisData,
            })
        })
    }
    //定义默认路由
    r.NoRoute(func(c *gin.Context) {
        c.JSON(http.StatusNotFound, gin.H{
            "status": 404,
            "error":  "404, page not exists!",
        })
    })
    r.Run(":8000")
}

# 运行程序
$ go run main.go
[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.

[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
 - using env:    export GIN_MODE=release
 - using code:    gin.SetMode(gin.ReleaseMode)

[GIN-