Go 實戰：Vue-js - Golang 組合打造應用

時間回到 2018 年，我寫了一篇獲得 15k 閱讀的文章：Django + Angular 4 = A powerful Web application。出於好奇心，我嘗試了 Angular4 和 Django 的組合。接着上個系列，這是一篇使用 Vuejs 和 Golang 來幫助你構建極佳應用的文章。

我知道這兩者一起用不是很常見，但是，讓我們試一試。

背景

首先，讓我們來聊聊兩者提供的技術特徵。

Golang

  1. 二進制 —— 所有需要構建的內置依賴項都是二進制文件。因此，您不需要安裝運行時來運行應用程序。

  2. 靜態類型 —— 編譯器不僅在編譯過程檢查類型，而且在代碼編寫的過程。處理類型轉換和兼容性等問題都有兼顧。

  3. 併發性 —— Golang 最好的特性是它對高併發性的優先支持。

  4. 標準庫 —— 標準庫功能足夠強大，你基本上不需要第三方庫。

Vue.js

  1. 體積 —— 經過 gzip 壓縮後，它的大小僅爲 18kb ，對比壓縮後的 jQuery，gzip 壓縮後的大小爲 29kb。

  2. 可讀性 —— Vue.js 的源碼和語法非常清晰簡單。

  3. 文檔 —— Vue.js 完善的文檔使它能很快上手和學習。

  4. 靈活 —— 數據在 HTML 和 JavaScript 間的綁定是非常流暢的。

  5. Vue CLI 3 —— cli 提供了一系列的功能讓你很快的上手，嘗試着使用它你會喜歡上它。

Golang 和 Vuejs 在運行時都很快，所以讓他們一起合作構建一個很快的單頁面應用。

我們開始構建：

初始化文件目錄

首先，像下面這樣初始化你的文件目錄，爲 Git 添加 “LICENSE” 、“README.md” 等文件.

在 backend 文件夾創建一個'server.go' 文件：

server.go

前端部分，在命令行輸入以下命令來創建一個新的 app 應用：

 vue create calculator

它會詢問你選擇 preset 預設，選擇默認的即可（babel, eslint).

現在文件目錄結構如下：

代碼的結構準備好了!

現在讓我們看下我們將要做開發的應用，它不是一個很複雜但是可以幫助你開始開發複雜應用。我們將要開發一個計算器，我們在前端輸入兩個數字，通過 POST 請求發送到 Golang 服務端。服務端將會進行加、減、乘、除，然後通過一個 POST 請求返回結果，前端將會渲染結果。

構建後端

Golang 很快是因爲它的編譯器，它不允許你定義多餘的變量。如果你定義變量或者引入任何 package 包，那麼這些變量、包應該是你需要使用的，Golang 在這方面很嚴格。另外無論你想要做什麼，你需要事先告訴給編譯器，例如：如果你想使用 POST 獲取數據，你必須事先定義返回數據的 JSON 格式。這有點麻煩，但是爲了速度這是值得的。

回到代碼上。

因此，我們將會使用 encoding/json and net/http 包。然後，我們  定義 JSON 類型的數據結構。

現在，我們將會寫一個簡單的方法來做數字的運算。這裏，我們需要明確指定返回數據的類型。

我們需要寫一個方法，當我們使用 POST 方法發送 JSON 格式的請求時，這個方法能夠被執行。

在代碼第 33 行，我們定義了一個 JSON 的譯碼器來轉譯從請求的實體中的傳過來的 JSON 數據。

numsData 和 numsResData 是定義好的數據結構。

接收的數據存儲在 numsData 中 並且在 38 行被轉譯。

然後我們設置 ResponseWriter 的 header 頭部，並且在 47 行返回 JSON 格式的響應數據以及檢查錯誤。

最後，在這個主函數上，我們可以定義 HTTP 路由，例如 53 行爲每個 URL 請求分別定義響應函數。後端服務將運行在 8090 端口上。

完整的代碼如下：

現在我們來構建前端

首先使用 cd 進入前端目錄並且使用以下命令安裝依賴：

npm install --save bootstrap-vue Bootstrap axios vee-validate

我們將使用 axios 來處理 POST 請求，使用 vee-validate 校驗表單的輸入數據，使用 bootstrap-vue 構建優美的界面。

在 src/Calculator.vue 文件裏編寫前端部分代碼：

從 17 行到 25 行，我們定義 input 輸入框和 label 標籤來獲取數據。在 Vue 中使用 v-model 指令獲取數據。

30-35 行完成計算器 UI 層的展示，並且 43 行定義了一個按鈕，將會被觸發 postreq 方法，這個方法會在接下來完成。

我們在 script 標籤內寫 JavaScript 代碼，首先引入依賴：

54-59 行是必須的，用於引入 axios 和 vee-validate。然後在 64-69 行我們定義一些變量，這些 data 變量用來存儲計算器組件的變量的值。

所有的函數都會定義在 methods 對象裏。我們創建 postreq() 方法用來向 http://localhost:8090/calc 發送 JSON 格式的 POST 請求。還記得之前在 server.go 文件創建的 calc 方法嗎？我們發送 JSON 數據後，後端返回結果後數據會被儲存在 add, mul, sub 和 div 等變量中，這些綁定在 HTML 的變量例如 {{add}} 的佔位符將會顯示結果。

很簡單是吧？是的。

以上就是所有我們需要做的，只需要記住這些要點：

運行應用

啓動後端服務可以使用以下命令，它將運行在 8090 端口上：

go run server.go

運行前端可以使用：

npm run serve

祝賀！你的 App 完成了。

整個代碼託管在這個 Github 倉庫 [1] 上。

並且，如果你想看另一個我使用 Vue.js 和 Golang 構建的應用 Rocket Engine Designer，請點擊這裏 [2]

如果你喜歡這篇文章，請點擊 👏 按鈕給與你對這篇文章的喜愛。

via: https://medium.com/@adeshg7/vuejs-golang-a-rare-combination-53538b6fb918

作者：Adesh Gautam[3] 譯者：M1seRy[4] 校對：polaris1119[5]

本文由 GCTT[6] 原創編譯，Go 中文網 [7] 榮譽推出，發佈在 Go 語言中文網公衆號，轉載請聯繫我們授權。

參考資料

[1]

Github 倉庫: https://github.com/adesgautam/Calculator

[2]

這裏: https://github.com/adesgautam/Proton

[3]

Adesh Gautam: https://medium.com/@adeshg7

[4]

M1seRy: https://github.com/M1seRy

[5]

polaris1119: https://github.com/polaris1119

[6]

GCTT: https://github.com/studygolang/GCTT

[7]

Go 中文網: https://studygolang.com/

福利

我爲大家整理了一份從入門到進階的 Go 學習資料禮包，包含學習建議：入門看什麼，進階看什麼。關注公衆號 「polarisxu」，回覆 ebook 獲取；還可以回覆「進羣」，和數萬 Gopher 交流學習。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/RMTQIvjWOxQXuzKPTfHfbg

猜你喜歡