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









