然后我们在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
2. 安装稍后会使用到的组件：
npm install echarts --save-dev // echarts npm install axios --save-dev // 一个异步http请求库
3. 新建ChartLine.vue文件用来展示折线图。内容如下：
<template>
<div>
<div>
<button v-on:click="refreshCharts()">刷新</button>
<div class="line" id="line"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
export default {
name: 'ChartLine',
computed: {
opt () { // option可以参照echarts官方案例
return {
title: {
text: '堆叠区域图'
},
tooltip: {
// 省略， 参数详看echarts官方案例
},
legend: {
data: ['邮件营销']
},
grid: {
// 省略
},
xAxis: [
{
// 省略
data: []
}
],
yAxis: [
// 省略
],
series: [
{
name: '邮件营销',
type: 'line',
data: []
}
]
}
}
},
methods: {
async refreshCharts () {
const res = await axios.get('http://127.0.0.1:8000/api/v1/line')
this.myChart.setOption({ // 更新数据
xAxis: {
data: res.data.legend_data
},
series: {
data: res.data.xAxis_data
}
})
}
},
mounted () {
this.myChart = echarts.init(document.getElementById('line'))
this.myChart.setOption(this.opt) // 初始化echarts
window.addEventListener('resize', this.myChart.resize) // 自适应
}
}
</script>
<style>
.line {
width: 400px;
height: 200px;
margin: 20px auto;
}
</style>
