原文地址:https://www.cnblogs.com/FireworksEasyCool/p/11385271.html
![test.gif](https://static.studygolang.com/190820/0f2f857ca5069dbe357115277e942244.gif)
该项目是gin+vue的前后端分离项目,使用gorm访问MySQL,其中vue前端是使用vue-element-admin框架简单实现的;
go后台使用jwt,对API接口进行权限控制。此外,Web页面在token过期后的半个小时内,用户再次操作会自动刷新token;
项目很小,适合gin新手学习!(后续有时间会补上相关教程)
GitHub地址:https://github.com/Bingjian-Zhu/gin-vue
**一、运行go后台项目**
(1)把项目clone到GOPATH/src目录下
![image.png](https://static.studygolang.com/190821/66c18b1ef3fdd40d223b02da9cd78a66.png)
(2)在MySQL中新建blog数据库,运行文件夹/docs/sql中的mysql.sql脚本
(3)在文件夹/conf中修改配置文件api.ini中的数据库连接配置
![image.png](https://static.studygolang.com/190821/52d3c2673962f8f3c51f5b7d99431541.png)
(4)在gin-vue目录下运行:```go run main.go```
![image.png](https://static.studygolang.com/190821/6520d066b814938f1e95b1bb54e5497b.png)
目前为止,gin后台项目成功跑起来了
(5)可能遇到的问题
如果在GitHub是用下载压缩包的形式,解压后请把文件夹gin-vue-master重名为gin-vue,然后再复制到/GOPATH/src目录下
**二、使用Postman测试API接口**
(1)登录,token过期时间设为5分钟
![image.png](https://static.studygolang.com/190821/c4d7d83c855b43052fb8375f28572161.png)
(2)使用token调用API接口
[1.gif](https://static.studygolang.com/190821/b9038f2868177d514c56b367c2098ceb.gif)
(3)API权限验证
当使用admin登录获取的token调用/api/v1/table/list接口时,能获取到数据
改用test用户登录获取的token调用/api/v1/table/list接口时,返回403,没有权限
!![2.gif](https://static.studygolang.com/190821/0a80a5a87f08465825c641bfae9df215.gif)
(4)刷新token
当token过期后,可以调用/auth/refresh_token接口重新获取token,再用获取到的token去调用接口
当然刷新token也是有有限期的,这里设置了1个小时
![3.gif](https://static.studygolang.com/190821/34c2901f0df015a196fb9208c31fff3b.gif)
(5)简单看下接口运行的时间
![image.png](https://static.studygolang.com/190821/f267ae4d5b5b74cea43bbf8e9d3599cf.png)
**三、运行vue-admin项目**
(1)在/gin-vue/vue-admin目录下运行:```npm install```
(2)运行:```npm run dev```
浏览器自动打开 http://localhost:9528/#/login?redirect=%2Fdashboard,然后就可以像文章开头的动图一样玩了
![image.png](https://static.studygolang.com/190821/bc3af31c61598c578b7631f30447c2b1.png)
**四、总结**
初步体验了gin框架,总体上还是可以的
再次附上源码地址:https://github.com/Bingjian-Zhu/gin-vue
喜欢的请star
<a href="/user/focussoft" title="@focussoft">@focussoft</a> <a href="/user/fengke1213" title="@fengke1213">@fengke1213</a> 谢谢捧场
#3