用Go+Vue.js快速搭建一個Web應用(初級demo)
Vue.js做為目前前端最熱門的庫之一，為快速構建并開發(fā)前端項目多了一種思維模式。本文給大家介紹用Go+Vue.js快速搭建一個Web應用(初級demo)。
環(huán)境準備：
1. 安裝go語言，配置go開發(fā)環(huán)境；
2. 安裝node.js以及npm環(huán)境；
Gin的使用：
為了快速搭建后端應用，采用了Gin作為Web框架。Gin是用Golang實現(xiàn)的一種Web框架，api非常友好，且擁有出色的路由性能和詳細的錯誤提示，如果你想快速開發(fā)一個高性能的生產(chǎn)環(huán)境，Gin是一個不錯的選擇。
下載和安裝Gin：
go get github.com/gin-gonic/gin
代碼中使用：
import "github.com/gin-gonic/gin"
下面是一個使用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請求方法以及返回各種類型的數(shù)據(jù)，詳情可以前往https://github.com/gin-gonic/gin查看。
開始一個項目：
在Gogland(IDE)中新建一個項目：demo，并建立一個main.go文件作為項目入口：
package main
import (
"demo/router"
)
func main() {
router.Init() // init router
}
注： go中package main 必須包含一個main函數(shù)。
從上面的代碼可以看到，我們引入了demo下面的router包，并顯式的調(diào)用了router的Init()函數(shù)， 那現(xiàn)在我們就在demo項目下新建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)建了一個gin的默認路由，并為其分配了一個組 v1，監(jiān)聽hello請求并將其路由到視圖函數(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實現(xiàn)的返回json數(shù)據(jù)的內(nèi)置方法，包含了2個參數(shù)，狀態(tài)碼和返回的內(nèi)容。http.StatusOK代表返回狀態(tài)碼為200，正文為{"message": "welcome"}。
注：Gin還包含更多的返回方法如c.String, C.HTML, c.XML等，請自行了解。
到現(xiàn)在為止，我們已經(jīng)實現(xiàn)了最基本的Gin搭建web服務的代碼，運行代碼：
~/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)成功啟動web服務器，并監(jiān)聽本地8000端口，現(xiàn)在可以訪問/v1/hello這個地址了：
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"}
這里服務器已經(jīng)正確相應了請求，并返回{"message":"welcome"}，同時從http請求頭部中可以看到請求的狀態(tài)碼為200，返回的數(shù)據(jù)類型為 Content-Type: application/json。
再來看看服務端的控制臺的輸出信息：
[GIN] 2017/09/18 - 15:37:46 | 200 | 81.546µs | 127.0.0.1 | GET /v1/hello
到這里，我們已經(jīng)成功的搭建了一套簡單的web服務器。但是在真實情況下，我們肯定會跟服務器產(chǎn)生數(shù)據(jù)的交流，接下來看看Gin是如何接收參數(shù)的。
Gin 參數(shù)使用
在restful廣泛流行的情況下，Gin可以很方便的接收url參數(shù)：
我們在之前的組v1路由下新定義一個路由：
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請求路徑中的參數(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)
})
同樣，我們訪問：
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ù)不存在的情況下，會由其默認值 Guest代。
注：Gin還可以接收更多不同類型的參數(shù)，請查看Gin的文檔；
Gin返回靜態(tài)頁面
我們在網(wǎng)站開發(fā)中肯定會涉及到靜態(tài)資源的處理，下面是Gin返回靜態(tài)頁面，以及實現(xiàn)數(shù)據(jù)交互的簡單例子。
新建templates目錄，并目錄下新建index.html，內(nèi)容如下：
<html>
<h1>
{{ .title }}
</h1>
</html>
新建一個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 }}
注：關于模板語言的使用，讀者自行補充。當然靜態(tài)資源我們也可以交由nginx等來處理，減少服務器壓力。
Gin默認路由
我們還可以為Gin定義一些默認路由：
// 404 NotFound
r.NoRoute(func(c *gin.Context) {
c.JSON(http.StatusNotFound, gin.H{
"status": 404,
"error": "404, page not exists!",
})
})
這時候，我們訪問一個不存在的頁面：
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中我們可以很方便的設計中間件，同樣Gin也為我們提供了很方便的中間件使用。 我們可以定義全局中間件，群組中間件和單個路由的中間件，可以限定中間件的作用范圍。
先定義一個簡單的中間件，并將其設為全局中間件:
// PrintMiddleware is a function for test middleware
func PrintMiddleware(c *gin.Context) {
fmt.Println("before request")
c.Next()
}
接下來注冊為全局中間件：
r := gin.Default() r.Use(PrintMiddleware())
然后我們發(fā)起客戶端請求并查看Gin控制臺輸出：
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í)行請求前，成功執(zhí)行了自定義的中間件函數(shù)，c.Next()表示當中間件執(zhí)行完成之后，將請求傳遞給下一個函數(shù)處理。
上面定義了一個全局中間件，現(xiàn)在我們想對v2組的請求進行一次驗證（模擬登錄），假設請求中包含一個token參數(shù)，存儲認證信息，我們來實現(xiàn)這個中間件函數(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()
}
}
然后我們在group v2組注冊這個中間件：
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， 當我們加上token時：
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)通過驗證，Gin正確響應了請求。c.Abort()表示請求被終止。
看到這里，相信大家對Gin已經(jīng)有了大致了解，可以動手擼自己的代碼了。在實際開發(fā)中，會遇到各種各樣的需求，這時候就需要多方查閱資料，尋找答案了。
vue.js使用
vue.js是當下很火的前端框架，我們可以使用vue.js和Gin來搭建前后端分離應用。
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 是一個官方發(fā)布的 vue.js 項目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項目。 GitHub地址：https://github.com/vuejs/vue-cli
3. 接下來使用vue-cli創(chuàng)建一個項目，采用官方的webpack模板：
vue init webpack demo
這里采用默認設置即可，一路按下Enter，會提示安裝完成，進入項目
cd demo
安裝依賴(需要耐心等待一段時間):
npm install
4. 啟動開發(fā)服務器：
npm run dev
訪問：http://localhost:8080，可以看到vue官方為我們搭建好的初始化頁面了。
到這里，我們很方便的搭建好了vue初始項目模板，那么我們怎么實現(xiàn)前后端分離的數(shù)據(jù)交互工作呢？接下來，用一個最近使用過小案例來演示數(shù)據(jù)交互。
使用echarts畫一張簡單的圖表
1. 在src目錄下新建views目錄，用來存放視圖（目錄結構）：
src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js ├── router │ └── index.js └── views ├── ChartLine.vue └── index.js
2. 安裝稍后會使用到的組件：
npm install echarts --save-dev // echarts npm install axios --save-dev // 一個異步http請求庫
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) // 自適應
}
}
</script>
<style>
.line {
width: 400px;
height: 200px;
margin: 20px auto;
}
</style>
以上代碼實現(xiàn)了echarts圖表初始化和數(shù)據(jù)填充的過程，以及點擊按鈕刷新圖表的功能；
4. 注冊路由，編輯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后臺api接口實現(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)在我們就能正確看到圖表了，試著點擊刷新按鈕可以看到圖表正確刷新了數(shù)據(jù)。
總結
以上所述是小編給大家介紹的用Go+Vue.js快速搭建一個Web應用(初級demo)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
sublime text3解決Gosublime無法自動補全代碼的問題
本文主要介紹了sublime text3解決Gosublime無法自動補全代碼的問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
閉包是包括?Go?在內(nèi)的編程語言的一項強大功能,通過閉包,您可以在函數(shù)中封裝數(shù)據(jù),并通過函數(shù)的返回值訪問這些數(shù)據(jù),本文將介紹Go?中閉包的基礎知識,希望對大家有所幫助2023-11-11
Go?基本數(shù)據(jù)類型與字符串相互轉(zhuǎn)換方法小結
這篇文章主要介紹了Go基本數(shù)據(jù)類型與字符串相互轉(zhuǎn)換，將string類型轉(zhuǎn)換成基本類型時，必須確保string類型是有效的，文中補充介紹了Go基本數(shù)據(jù)類型和其字符串表示之間轉(zhuǎn)換，結合實例代碼給大家講解的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了golang時間字符串和時間戳轉(zhuǎn)換的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要介紹了GO語言數(shù)組和切片的用法,以實例形式較為詳細的分析了GO語言中數(shù)組與切片的創(chuàng)建及使用技巧,是深入學習GO語言的基礎,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了golang指數(shù)運算操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要為大家介紹了Go語言基礎關于go接口的用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，在日升職加薪2021-11-11
這篇文章主要為大家詳細介紹了Golang實現(xiàn)心跳機制的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-04-04
在日常開發(fā)中,比較操作是最常用的基本操作之一,可以用來判斷變量之間是否相等或者對應的大小關系,本文將深入解析 Golang 中可比較的數(shù)據(jù)類型,并結合代碼示例來說明如何在不同情況下進行比較,需要的朋友可以參考下2024-01-01
本文主要介紹了Go語言Gin框架前后端分離項目開發(fā)工程化實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-11-11