GolangGin+Vue+Nginx&前后端分离&

一、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. 启动后端

package main

import (
   "github.com/gin-gonic/gin"
   "net/http"
)

func main() {
   // 创建一个默认的路由引擎
   r := gin.Default()
   // GET：请求方式；/hello：请求的路径
   // 当客户端以GET方法请求/hello路径时，会执行后面的匿名函数
   r.GET("/hello", func(c *gin.Context) {
      // c.JSON：返回JSON格式的数据
      c.JSON(200, gin.H{
         "message": "Hello world!",
      })
   })
   r.Run(":8001")
}
复制代码

运行

go run main.go
复制代码

2.2. 跨域请求问题

按上述操作使用axios会发生跨域请求的问题，具体原因自行百度

2.3. 解决办法一（gin使用允许跨域请求中间件）

package main

import (
   "github.com/gin-gonic/gin"
   "net/http"
)

func main() {
   // 创建一个默认的路由引擎
   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": "Hello world!",
      })
   })

   // 启动HTTP服务，默认在0.0.0.0:8080启动服务
   r.Run(":8001")
}

func Cors() gin.HandlerFunc {
   return func(c *gin.Context) {
      method := c.Request.Method
      c.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")              //我自己只使用 get post 所以只放行它
      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方法
      if method == "OPTIONS" {
         c.AbortWithStatus(http.StatusNoContent)
      }
      // 处理请求
      c.Next()
   }
}
复制代码

再次运行，就会正常获取如图：

3. Nginx反向代理解决跨域问题

3.1. windows安装(其它系统自行搜索)

windows安装nginx

3.2. 修改配置文件conf/nginx.conf

#location / {
#    root   html;
#    index  index.html index.htm;
#}

# ********修改方向代理到后端的路由上********
location / {
    proxy_pass http://172.20.3.234:8001/;
}
复制代码

再次运行，在不使用跨域中间件下，也能正常通信

3.3 nginx其它功能作用

可参看Nginx作用