一、Vue前端框架的使用(goland)
1. 使用的是Goland的插件进行安装node.js和vue.js（网上也有直接安装的）
在Goland中 File -> Settings -> Plugins 搜索并安装Node.js和Vue.js,如图
成功之后，可以在终端使用node -v查看node.js版本号
安装cnpm代替npm（国内的源）
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装vue脚手架vue-cli,并使用vue -V查看版本号
cnpm install -g vue-cli
任意选择一个目录，初始化vue项目
vue init webpack my-project
会出现一些选项，一直回车选择默认的
生成目录结构
初始化完成，可以在项目下运行cnpm run dev
二、前后端分离
1.前端
1.1 axios异步通信
cnpm install axios安装axios
配置全局axios
使用axios进行GET请求
运行Vue，但是现在还没有启动后端，页面会报错net::ERR_CONNECTION_REFUSED
cnpm run dev
2.后端
2.1. 启动后端
packagemainimport("github.com/gin-gonic/gin""net/http")funcmain(){//创建一个默认的路由引擎r:=gin.Default()//GET：请求方式；/hello：请求的路径//当客户端以GET方法请求/hello路径时，会执行后面的匿名函数r.GET("/hello",func(c*gin.Context){//c.JSON：返回JSON格式的数据c.JSON(200,gin.H{"message":"Helloworld!",})})r.Run(":8001")}运行
gorunmain.go
2.2. 跨域请求问题
按上述操作使用axios会发生跨域请求的问题，具体原因自行百度
2.3. 解决办法一（gin使用允许跨域请求中间件）
packagemainimport("github.com/gin-gonic/gin""net/http")funcmain(){//创建一个默认的路由引擎r:=gin.Default()//使用允许跨域请求中间件r.Use(Cors())//GET：请求方式；/hello：请求的路径//当客户端以GET方法请求/hello路径时，会执行后面的匿名函数r.GET("/hello",func(c*gin.Context){//c.JSON：返回JSON格式的数据c.JSON(200,gin.H{"message":"Helloworld!",})})//启动HTTP服务，默认在0.0.0.0:8080启动服务r.Run(":8001")}funcCors()gin.HandlerFunc{returnfunc(c*gin.Context){method:=c.Request.Methodc.Header("Access-Control-Allow-Origin","*")//可将将*替换为指定的域名c.Header("Access-Control-Allow-Headers","Content-Type,AccessToken,X-CSRF-Token,Authorization")//你想放行的header也可以在后面自行添加c.Header("Access-Control-Allow-Methods","POST,GET,OPTIONS,PUT,DELETE,UPDATE")//我自己只使用getpost所以只放行它c.Header("Access-Control-Expose-Headers","Content-Length,Access-Control-Allow-Origin,Access-Control-Allow-Headers,Content-Type")c.Header("Access-Control-Allow-Credentials","true")//放行所有OPTIONS方法ifmethod=="OPTIONS"{c.AbortWithStatus(http.StatusNoContent)}//处理请求c.Next()}}再次运行，就会正常获取如图：
3. Nginx反向代理解决跨域问题
3.1. windows安装(其它系统自行搜索)
windows安装nginx
3.2. 修改配置文件conf/nginx.conf
#location/{#roothtml;#indexindex.htmlindex.htm;#}#********修改方向代理到后端的路由上********location/{proxy_passhttp://172.20.3.234:8001/;}再次运行，在不使用跨域中间件下，也能正常通信
3.3 nginx其它功能作用
可参看Nginx作用
作者：小小小丶叶子