您好,登錄后才能下訂單哦!
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的簡(jiǎn)單例子:
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)成功的搭建了一套簡(jiǎn)單的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ù)交互的簡(jiǎn)單例子。
新建templates目錄,并目錄下新建index.html,內(nèi)容如下:
<html> <h2> {{ .title }} </h2> </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è)簡(jiǎn)單的中間件,并將其設(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畫一張簡(jiǎn)單的圖表
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ù)。
總結(jié)
以上所述是小編給大家介紹的用Go+Vue.js快速搭建一個(gè)Web應(yīng)用(初級(jí)demo),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。