用Go+Vue.js快速搭建一個(gè)Web應(yīng)用(初級(jí)demo)

更新時(shí)間：2017年11月08日 16:17:43 投稿：mrr

這篇文章主要介紹了用Go+Vue.js快速搭建一個(gè)Web應(yīng)用(初級(jí)demo),本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧

Vue.js做為目前前端最熱門的庫之一，為快速構(gòu)建并開發(fā)前端項(xiàng)目多了一種思維模式。本文給大家介紹用Go+Vue.js快速搭建一個(gè)Web應(yīng)用(初級(jí)demo)。

環(huán)境準(zhǔn)備：

1. 安裝go語言，配置go開發(fā)環(huán)境；

2. 安裝node.js以及npm環(huán)境；

Gin的使用：

為了快速搭建后端應(yīng)用，采用了Gin作為Web框架。Gin是用Golang實(shí)現(xiàn)的一種Web框架，api非常友好，且擁有出色的路由性能和詳細(xì)的錯(cuò)誤提示，如果你想快速開發(fā)一個(gè)高性能的生產(chǎn)環(huán)境，Gin是一個(gè)不錯(cuò)的選擇。

下載和安裝Gin：

go get github.com/gin-gonic/gin

代碼中使用：

import "github.com/gin-gonic/gin"

下面是一個(gè)使用Gin的簡單例子：

package main 
import "github.com/gin-gonic/gin" 
 func main() { 
  r := gin.Default() 
  r.GET("/ping", func(c *gin.Context) { 
    c.JSON(200, gin.H{ 
      "message": "pong", 
    }) 
  }) 
  r.Run() // listen and serve on 0.0.0.0:8080 
}

注：Gin可以很方便的支持各種HTTP請(qǐng)求方法以及返回各種類型的數(shù)據(jù)，詳情可以前往https://github.com/gin-gonic/gin查看。

開始一個(gè)項(xiàng)目：

在Gogland(IDE)中新建一個(gè)項(xiàng)目：demo，并建立一個(gè)main.go文件作為項(xiàng)目入口：

package main 
import ( 
  "demo/router" 
) 
 func main() { 
  router.Init() // init router 
}

注： go中package main 必須包含一個(gè)main函數(shù)。

從上面的代碼可以看到，我們引入了demo下面的router包，并顯式的調(diào)用了router的Init()函數(shù)，那現(xiàn)在我們就在demo項(xiàng)目下新建router目錄，并在目錄下建立router.go用于編寫路由規(guī)則，代碼如下：

package router
import (
     "demo/handlers"
     "github.com/gin-gonic/gin"
)
func Init() {
     // Creates a default gin router
     r := gin.Default()  // Grouping routes
     // group： v1
     v1 := r.Group("/v1")
     {
         v1.GET("/hello", handlers.HelloPage)
     }
     r.Run(":8000") // listen and serve on 0.0.0.0:8000
}

在這里，我們創(chuàng)建了一個(gè)gin的默認(rèn)路由，并為其分配了一個(gè)組 v1，監(jiān)聽hello請(qǐng)求并將其路由到視圖函數(shù)HelloPage，最后綁定到 0.0.0.0:8000。

現(xiàn)在我們來創(chuàng)建視圖函數(shù)，新建handlers目錄，并在目錄下新建hello.go文件，代碼如下：

package handlers 
import ( 
     "github.com/gin-gonic/gin" 
     "net/http" 
) 
func HelloPage(c *gin.Context) { 
     c.JSON(http.StatusOK, gin.H{ 
         "message": "welcome", 
     }) 
}

C.JSON是Gin實(shí)現(xiàn)的返回json數(shù)據(jù)的內(nèi)置方法，包含了2個(gè)參數(shù)，狀態(tài)碼和返回的內(nèi)容。http.StatusOK代表返回狀態(tài)碼為200，正文為{"message": "welcome"}。

注：Gin還包含更多的返回方法如c.String, C.HTML, c.XML等，請(qǐng)自行了解。

到現(xiàn)在為止，我們已經(jīng)實(shí)現(xiàn)了最基本的Gin搭建web服務(wù)的代碼，運(yùn)行代碼：

~/gofile/src/demo$ go run main.go
[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         --> demo/handlers.HelloPage (3 handlers)
[GIN-debug] Listening and serving HTTP on :8000

可以看到，我們已經(jīng)成功啟動(dòng)web服務(wù)器，并監(jiān)聽本地8000端口，現(xiàn)在可以訪問/v1/hello這個(gè)地址了：

curl -XGET 'http://127.0.0.1:8000/v1/hello' -i
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8Date: Mon, 18 Sep 2017 07:38:01 GMT
Content-Length: 21
{"message":"welcome"}

這里服務(wù)器已經(jīng)正確相應(yīng)了請(qǐng)求，并返回{"message":"welcome"}，同時(shí)從http請(qǐng)求頭部中可以看到請(qǐng)求的狀態(tài)碼為200，返回的數(shù)據(jù)類型為 Content-Type: application/json。

再來看看服務(wù)端的控制臺(tái)的輸出信息：

[GIN] 2017/09/18 - 15:37:46 | 200 |   81.546µs |    127.0.0.1 | GET   /v1/hello

到這里，我們已經(jīng)成功的搭建了一套簡單的web服務(wù)器。但是在真實(shí)情況下，我們肯定會(huì)跟服務(wù)器產(chǎn)生數(shù)據(jù)的交流，接下來看看Gin是如何接收參數(shù)的。

Gin 參數(shù)使用

在restful廣泛流行的情況下，Gin可以很方便的接收url參數(shù)：

我們?cè)谥暗慕Mv1路由下新定義一個(gè)路由：

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

接下來訪問：

curl -XGET 'http://127.0.0.1:8000/v1/hello/lilei' -i
HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8
Date: Mon, 18 Sep 2017 08:03:02 GMT
Content-Length: 11
Hello lilei

可以看到，通過c.Param("key")方法，Gin成功捕獲了url請(qǐng)求路徑中的參數(shù)。Gin也可以接收常規(guī)參數(shù)，如下：

v1.GET("/welcome", func(c *gin.Context) {
  firstname := c.DefaultQuery("firstname", "Guest")
  lastname := c.Query("lastname")
  c.String(http.StatusOK, "Hello %s %s", firstname, lastname)
})

同樣，我們?cè)L問：

curl -XGET 'http://127.0.0.1:8000/v1/welcome?firstname=li&lastname=lei' -i
HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8Date: Mon, 18 Sep 2017 08:11:37 GMT
Content-Length: 12
Hello li lei

通過c.Query("key")可以成功接收到url參數(shù)，c.DefaultQuery在參數(shù)不存在的情況下，會(huì)由其默認(rèn)值 Guest代。

注：Gin還可以接收更多不同類型的參數(shù)，請(qǐng)查看Gin的文檔；

Gin返回靜態(tài)頁面

我們?cè)诰W(wǎng)站開發(fā)中肯定會(huì)涉及到靜態(tài)資源的處理，下面是Gin返回靜態(tài)頁面，以及實(shí)現(xiàn)數(shù)據(jù)交互的簡單例子。

新建templates目錄，并目錄下新建index.html，內(nèi)容如下：

<html>
  <h1>
    {{ .title }}
  </h1>
</html>

新建一個(gè)group v2，并創(chuàng)建/index路由，返回靜態(tài)html頁面：

r.LoadHTMLGlob("templates/*")
v2 := r.Group("/v2")
{
  v2.GET("/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", gin.H{      "title": "hello Gin.",
    })
  })
}

使用LoadHTMLGlob定義模板文件路徑，用c.HTML返回靜態(tài)頁面。訪問:

curl -XGET 'http://127.0.0.1:8000/v2/index' -i
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Sep 2017 08:29:13 GMT
Content-Length: 55
<html lang="en">
  hello Gin.
</html>

Gin返回了靜態(tài)文件index.html，并把title數(shù)據(jù)填充到了模板 {{ .title }}

注：關(guān)于模板語言的使用，讀者自行補(bǔ)充。當(dāng)然靜態(tài)資源我們也可以交由nginx等來處理，減少服務(wù)器壓力。

Gin默認(rèn)路由

我們還可以為Gin定義一些默認(rèn)路由：

// 404 NotFound
r.NoRoute(func(c *gin.Context) {
       c.JSON(http.StatusNotFound, gin.H{
            "status": 404,  
            "error": "404, page not exists!",
       })
})

這時(shí)候，我們?cè)L問一個(gè)不存在的頁面：

curl -XGET 'http://127.0.0.1:8000/v2/notfound' -i
HTTP/1.1 404 Not Found
Content-Type: application/json; charset=utf-8
Date: Mon, 18 Sep 2017 09:22:38 GMT
Content-Length: 46
{"error":"404, page not exists!","status":404}

Gin 中間件

在go的net/http中我們可以很方便的設(shè)計(jì)中間件，同樣Gin也為我們提供了很方便的中間件使用。我們可以定義全局中間件，群組中間件和單個(gè)路由的中間件，可以限定中間件的作用范圍。

先定義一個(gè)簡單的中間件，并將其設(shè)為全局中間件:

// PrintMiddleware is a function for test middleware
func PrintMiddleware(c *gin.Context) {
  fmt.Println("before request")
  c.Next()
}

接下來注冊(cè)為全局中間件：

r := gin.Default()
r.Use(PrintMiddleware())

然后我們發(fā)起客戶端請(qǐng)求并查看Gin控制臺(tái)輸出：

curl -XGET 'http://127.0.0.1:8000/v2/index' -i
[GIN-debug] Listening and serving HTTP on :8000
before request
[GIN] 2017/09/18 - 17:42:50 | 200 |   809.559µs |    127.0.0.1 | GET   
/v2/index

可以看到Gin在執(zhí)行請(qǐng)求前，成功執(zhí)行了自定義的中間件函數(shù)，c.Next()表示當(dāng)中間件執(zhí)行完成之后，將請(qǐng)求傳遞給下一個(gè)函數(shù)處理。

上面定義了一個(gè)全局中間件，現(xiàn)在我們想對(duì)v2組的請(qǐng)求進(jìn)行一次驗(yàn)證（模擬登錄），假設(shè)請(qǐng)求中包含一個(gè)token參數(shù)，存儲(chǔ)認(rèn)證信息，我們來實(shí)現(xiàn)這個(gè)中間件函數(shù)：

func ValidateToken() gin.HandlerFunc {
     return func(c *gin.Context) {
         token := c.Request.FormValue("token")
         if token == "" {
             c.JSON(401, gin.H{     
                  "message": "Token required",
             })
             c.Abort()      
             return
         }   
         if token != "accesstoken" {
             c.JSON(http.StatusOK, gin.H{ 
                  "message": "Invalid Token",
             })
             c.Abort()      
             return
    }
    c.Next()
  }
}

然后我們?cè)趃roup v2組注冊(cè)這個(gè)中間件：

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，當(dāng)我們加上token時(shí)：

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>

可以看到已經(jīng)通過驗(yàn)證，Gin正確響應(yīng)了請(qǐng)求。c.Abort()表示請(qǐng)求被終止。

看到這里，相信大家對(duì)Gin已經(jīng)有了大致了解，可以動(dòng)手?jǐn)]自己的代碼了。在實(shí)際開發(fā)中，會(huì)遇到各種各樣的需求，這時(shí)候就需要多方查閱資料，尋找答案了。

vue.js使用

vue.js是當(dāng)下很火的前端框架，我們可以使用vue.js和Gin來搭建前后端分離應(yīng)用。

vue官方文檔：https://cn.vuejs.org/v2/guide/

vue開發(fā)環(huán)境搭建：

1. 安裝node.js和npm。

2. npm安裝vue腳手架vue-cli:

npm install vue-cli -g // 全局安裝

vue-cli 是一個(gè)官方發(fā)布的 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。 GitHub地址：https://github.com/vuejs/vue-cli

3. 接下來使用vue-cli創(chuàng)建一個(gè)項(xiàng)目，采用官方的webpack模板：

vue init webpack demo

這里采用默認(rèn)設(shè)置即可，一路按下Enter，會(huì)提示安裝完成，進(jìn)入項(xiàng)目

cd demo

安裝依賴(需要耐心等待一段時(shí)間):

npm install

4. 啟動(dòng)開發(fā)服務(wù)器：

npm run dev

訪問：http://localhost:8080，可以看到vue官方為我們搭建好的初始化頁面了。

到這里，我們很方便的搭建好了vue初始項(xiàng)目模板，那么我們?cè)趺磳?shí)現(xiàn)前后端分離的數(shù)據(jù)交互工作呢？接下來，用一個(gè)最近使用過小案例來演示數(shù)據(jù)交互。

使用echarts畫一張簡單的圖表

1. 在src目錄下新建views目錄，用來存放視圖（目錄結(jié)構(gòu)）：

src
├── App.vue
├── assets
│  └── logo.png
├── components
│  └── HelloWorld.vue
├── main.js
├── router
│  └── index.js
└── views
  ├── ChartLine.vue
  └── index.js

2. 安裝稍后會(huì)使用到的組件：

npm install echarts --save-dev // echarts
npm install axios --save-dev  // 一個(gè)異步http請(qǐng)求庫

3. 新建ChartLine.vue文件用來展示折線圖。內(nèi)容如下：

<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: '堆疊區(qū)域圖'
     },
     tooltip: {
      // 省略， 參數(shù)詳看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({ // 更新數(shù)據(jù)
     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) // 自適應(yīng)
  }
 }
</script>
<style>
.line {
 width: 400px;
 height: 200px;
 margin: 20px auto;
}
</style>

以上代碼實(shí)現(xiàn)了echarts圖表初始化和數(shù)據(jù)填充的過程，以及點(diǎn)擊按鈕刷新圖表的功能；

4. 注冊(cè)路由，編輯router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import ChartLine from '../views/ChartLine.vue'
Vue.use(Router)
export default new Router({
 mode: 'history',
 routes: [
  {
   path: '/line',
   name: 'Line',
   component: ChartLine
  }
 ]
})

5. Gin后臺(tái)api接口實(shí)現(xiàn)：

v1.GET("/line", func(c *gin.Context) {
  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,
  })
})

6. 現(xiàn)在我們就能正確看到圖表了，試著點(diǎn)擊刷新按鈕可以看到圖表正確刷新了數(shù)據(jù)。