使用Golang的Gin框架和vue編寫web應用

背景: 以前使用Golang的Gin框架進行一些運維內部後端的API接口開發，對外提供提供json類型的數據響應，可是該種方式在瀏覽器訪問數據時數據格式不友好(因爲是API接口，通常須要使用postman之類的工具來驗證接口返回數據)，後來嘗試了使用Golang的template模板來結合html進行數據渲染，但也發現比較缺少美感。以後決定使用前端框架來渲染後端數據，因爲vue框架的各類優點，好比簡單、數據的雙向綁定等等好處，決定使用vue框架來開啓個人前端之旅。接下來簡單來說解下使用Golang後端和vue前端進行融合的示例。

基於Gin框架的後端API

編寫基於Gin框架的API：

# 查看源碼文件
$ cat main.go
/**
 * @File Name: main.go
 * @Author: xxbandy @http://xxbandy.github.io
 * @Email:
 * @Create Date: 2018-12-02 22:12:59
 * @Last Modified: 2018-12-02 22:12:52
 * @Description:
 */
package main

import (
    _ "fmt"
    "github.com/gin-gonic/gin"
    "math/rand"
    "net/http"
)

func HelloPage(c *gin.Context) {
    c.JSON(http.StatusOK, gin.H{
        "message": "welcome to bgops,please visit https://xxbandy.github.io!",
    })
}

func main() {
    r := gin.Default()
    v1 := r.Group("/v1")
    {
        v1.GET("/hello", HelloPage)
        v1.GET("/hello/:name", func(c *gin.Context) {
            name := c.Param("name")
            c.String(http.StatusOK, "Hello %s", name)
        })

        v1.GET("/line", func(c *gin.Context) {
            // 注意:在先後端分離過程當中，須要注意跨域問題，所以須要設置請求頭
            c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
            legendData := []string{"週一", "週二", "週三", "週四", "週五", "週六", "週日"}
            xAxisData := []int{120, 240, rand.Intn(500), rand.Intn(500), 150, 230, 180}
            c.JSON(200, gin.H{
                "legend_data": legendData,
                "xAxis_data":  xAxisData,
            })
        })
    }
    //定義默認路由
    r.NoRoute(func(c *gin.Context) {
        c.JSON(http.StatusNotFound, gin.H{
            "status": 404,
            "error":  "404, page not exists!",
        })
    })
    r.Run(":8000")
}

# 運行程序
$ go run main.go
[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.

[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
 - using env:    export GIN_MODE=release
 - using code:    gin.SetMode(gin.ReleaseMode)

[GIN-debug] GET    /v1/hello                 --> main.HelloPage (3 handlers)
[GIN-debug] GET    /v1/hello/:name           --> main.main.func1 (3 handlers)
[GIN-debug] GET    /v1/line                  --> main.main.func2 (3 handlers)

# 測試相關的接口
$  curl -s  localhost:8000/v1/hello | python -m json.tool
{
    "message": "welcome to bgops,please visit https://xxbandy.github.io!"
}

$ curl -s  localhost:8000/v1/hello/bgops
Hello bgops

$ curl -s  localhost:8000/v1/line
{"legend_data":["週一","週二","週三","週四","週五","週六","週日"],"xAxis_data":[120,240,81,387,150,230,180]}

# 能夠看到該接口會返回一個json結構的數據
$ curl -s  localhost:8000/v1/line | python -m json.tool
{
    "legend_data": [
        "\u5468\u4e00",
        "\u5468\u4e8c",
        "\u5468\u4e09",
        "\u5468\u56db",
        "\u5468\u4e94",
        "\u5468\u516d",
        "\u5468\u65e5"
    ],
    "xAxis_data": [
        120,
        240,
        347,
        59,
        150,
        230,
        180
    ]
}複製代碼

基於vue框架的前端項目

使用vue-cli腳手架快速構建一個vue項目。注意:前提是須要node環境，而且有可用的npm源

# 查看版本
$ npm -v
2.3.0

#升級 npm
cnpm install npm -g

# 升級或安裝 cnpm
npm install cnpm -g

# 最新穩定版
$ cnpm install vue

# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
➜  vue-doc vue init webpack vue-test

? Target directory exists. Continue? Yes
? Project name vue-test
? Project description A Vue.js project
? Author xxbandy
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
//提供了兩種方式[npm和yarn，若是默認選擇npm時會去外網下載資源，可能沒法訪問谷歌外網]
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "vue-test".

# Project initialization finished!
# ========================

To get started:

  cd vue-test
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

$  cd vue-test
$  cnpm install
✔ Installed 58 packages
✔ Linked 0 latest versions
✔ Run 0 scripts
✔ All packages installed (used 237ms(network 227ms), speed 0B/s, json 0(0B), tarball 0B)

# run的時候會根據配置進行webpack靜態資源編譯
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080
複製代碼

當使用了cnpm run dev後，即成功運行起來一個前端服務，所以你會看到相似下面的頁面。

vue渲染後端API數據

1. 首先快速看一下vue項目的代碼結構.

$ tree -L 1 .
.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
├── static
└── test
# 對於快速開發而言，只須要知道src目錄下爲vue相關的代碼，即咱們看到vue的歡迎頁面就是src下的

$ tree -L 2 src
src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
└── router
    └── index.js
複製代碼

注意: 能夠看到一個vue項目的源碼部分由這麼幾個部分組成

• js主文件main.js
• vue主文件App.vue
• 靜態文件目錄assets
• 自定義組件components
• 路由目錄router

咱們首先來看一下App.vue代碼

# 咱們能夠看到在div 這裏有個img標籤，這裏其實就是咱們剛纔看到歡迎頁面的vue的logo
# 其實能夠看到使用了<router-view>標籤，這裏實際上是定義了默認的組件，也就是下面導入的HelloWorld
$ cat App.vue
<!--展現模板-->
<template>
  <!--這裏用的是id選擇器來綁定css樣式的-->
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'helloworld',
  components: {
    HelloWorld
  }
}
</script>
<!--樣式代碼-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
複製代碼

咱們再來查看一下components/HelloWorld.vue文件：

# 其實就是咱們剛纔看到的歡迎頁下面的一些超連接
$ cat components/HelloWorld.vue
<template>
  <div class="HelloWorld">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>

.........複製代碼

其實到這裏，咱們基本就知道了整個vue項目是如何把資源渲染出來的。不過咱們再來看一下router下的定義。

# 其實就是定義咱們如何能訪問到這個資源
$ cat router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})複製代碼

2. 思考咱們接下來要作什麼

如今咱們知道vue是如何渲染的相關數據，而且知道了大概的編碼規則，可是咱們的數據並不在本地，而是一個對外API，此時咱們須要想辦法讓vue獲取到後端的數據。

沒錯，這個時候，咱們須要一些異步請求的方式讓vue拿到數據，好比ajax之類的，不過在大前端時代，有更好的工具，即axios ,接下來在咱們的vue環境中安裝axios環境：

# 安裝異步請求包
$ cnpm install --save axios複製代碼

3. vue渲染後端數據

模擬編寫一個components/HelloWorld組件

# 編寫一個ApiData.vue的組件
$ cat components/ApiData.vue
<template>
  <!--使用class來綁定css的樣式文件-->
  <div class="hello">
    <!--{{}} 輸出對象屬性和函數返回值-->
    <h1>{{ msg }}</h1>
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h3>{{details()}}</h3>
    <h1 v-for="data in ydata" :key="data">{{data}}</h1>
    <h3 v-for="item in xdata" :key="item">{{item}}</h3>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'apidata',
  // data用來定義返回數據的屬性
  data () {
    return {
      msg: 'hello,xxbandy！',
      site: "bgops",
      url: "https://xxbandy.github.io",
      xdata: null,
      ydata: null,
    }
  },
  // 用於定義js的方法
  methods: {
    details: function() {
      return this.site
    },
  },
  mounted () {
      // response返回一個json{"data": "數據","status": "狀態碼","statusText":"狀態文本","headers":{ "content-type": "application/json; charset=utf-8" },"config":"配置文件","method":"方法","url":"請求url","request":"請求體"}
      axios.get('http://localhost:8000/v1/line').then(response => (this.xdata = response.data.legend_data,this.ydata = response.data.xAxis_data))

  }
}
</script>

<!--使用css的class選擇器[多重樣式的生效優先級]-->
<style>
.hello {
  font-weight: normal;
  text-align:center;
  font-size:8pt;
}
h3
{
  text-align:center;
  font-size:20pt;
  color:red;
}
</style>複製代碼

在路由中增長咱們的components

# 增長路由
cat router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 增長咱們自定義的ApiData組件
import Hello from '@/components/ApiData'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 在這裏引用咱們的組件
    {
      path: '/xxb',
      name: 'Hello',
      component: Hello
    }
  ]
})複製代碼

在App.vue文件中定義咱們的vue腳本

# 增長以下內容
<script>
import Hello from './components/ApiData'
export default {
  name: 'xxb',
  components: {
    Hello
  }
}
</script>複製代碼

運行服務

此時，咱們能夠運行服務，來檢測咱們的程序。

# 在vue的項目家目錄下運行(因爲咱們的golang的api接口運行的是8000端口，所以vue的端口須要修改一下)
$ cnpm run dev
Your application is running here: http://localhost:8082複製代碼



此時，咱們就能夠看到vue成功將後端Golang的API數據進行渲染出來了。雖然只是簡單渲染，但，基本上已經實現了後端API和前端vue項目的融合。接下來就須要根據需求繼續改造了。歡迎關注個人公衆號