用Go+Vue.js快速搭建一个Web应用(初级demo)

2020-01-28 12:40:30丽君


func ValidateToken() gin.HandlerFunc {
     return func(c *gin.Context) {
         token := c.Request.FormValue("token")
         if token == "" {
             c.JSON(401, gin.H{     
                  "message": "Token required",
             })
             c.Abort()      
             return
         }   
         if token != "accesstoken" {
             c.JSON(http.StatusOK, gin.H{ 
                  "message": "Invalid Token",
             })
             c.Abort()      
             return
    }
    c.Next()
  }
}

然后我们在group v2组注册这个中间件:


v2.Use(ValidateToken())

接下来我们还是像往常一样访问:


curl -XGET 'http://127.0.0.1:8000/v2/index' -i
HTTP/1.1 401 Unauthorized
Content-Type: application/json; charset=utf-8
Date: Mon, 18 Sep 2017 10:01:10 GMT
Content-Length: 32
{"message":"Token required"}

提示我们Token required, 当我们加上token时:


curl -XGET 'http://127.0.0.1:8000/v2/index?token=accesstoken' -i
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Sep 2017 10:02:28 GMT
Content-Length: 29
<html>
  hello Gin.
</html>

可以看到已经通过验证,Gin正确响应了请求。c.Abort()表示请求被终止。

看到这里,相信大家对Gin已经有了大致了解,可以动手撸自己的代码了。在实际开发中,会遇到各种各样的需求,这时候就需要多方查阅资料,寻找答案了。

vue.js使用

vue.js是当下很火的前端框架,我们可以使用vue.js和Gin来搭建前后端分离应用。

vue官方文档:https://cn.vuejs.org/v2/guide/

vue开发环境搭建:

1. 安装node.js和npm。

2. npm安装vue脚手架vue-cli:

npm install vue-cli -g // 全局安装

vue-cli 是一个官方发布的 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。 GitHub地址:https://github.com/vuejs/vue-cli

3. 接下来使用vue-cli创建一个项目,采用官方的webpack模板:

vue init webpack demo

这里采用默认设置即可,一路按下Enter,会提示安装完成,进入项目

cd demo

安装依赖(需要耐心等待一段时间):

npm install

4. 启动开发服务器:

npm run dev

访问:http://localhost:8080,可以看到vue官方为我们搭建好的初始化页面了。

到这里,我们很方便的搭建好了vue初始项目模板,那么我们怎么实现前后端分离的数据交互工作呢?接下来,用一个最近使用过小案例来演示数据交互。

使用echarts画一张简单的图表

1. 在src目录下新建views目录,用来存放视图(目录结构):


src
├── App.vue
├── assets
│  └── logo.png
├── components
│  └── HelloWorld.vue
├── main.js
├── router
│  └── index.js
└── views
  ├── ChartLine.vue
  └── index.js