01 . Go之Gin+Vue開發一個線上外賣應用

men發表於2020-11-01
GoVue

專案介紹

我們將開始使用Gin框架開發一個api專案，我們起名為：雲餐廳。如同餓了麼，美團外賣等生活服務類應用一樣，雲餐廳是一個線上的外賣應用，應用的使用者可以線上瀏覽商家，商品並下單。

該專案分為客戶端和服務端兩端程式。

  • 1、客戶端程式通過介面從服務端獲取資料，獲取結果後展示資料。
  • 2、服務端程式提供介面Api的訪問功能，執行資料庫操作，並組織資料返回。

客戶端介紹

雲餐廳客戶端使用Vue、ES6、Webpack等技術進行開發，專案開發需要具備前端開發技能，我們聚焦於後端Api功能的開發。

環境準備

執行vue等技術開發的客戶端專案,需要安裝Node.js環境

下載

可以到nodejs的下載頁面: http://nodejs.cn/download/下載對應的安裝包

1.Windows電腦安裝Nodejs環境

  • 1、windows環境下選擇.msi安裝檔案。然後進行雙擊node.msi，選擇安裝路徑。
  • 2、配置環境變數。在計算機（或者我的電腦）右擊屬性 -> 高階系統設定 -> 環境變數進行配置。新建NODE_PATH變數並設定Nodejs的安裝目錄。

macOS系統安裝Nodejs

在終端中使用brew命令安裝nodejs。詳細命令：

brew install nodejs

Linux系統安裝Nodejs

在nodejs的下載頁面選擇linux類別下的64位檔案，下載檔案為tar.xz格式的壓縮檔案。然後依次執行解壓縮和建立軟連線的命令：

tar -xvf   node-v10.15.3-linux-x64.tar.xz
vi /etc/profile
export NODEJS=/opt/node/node-v10.15.3-linux-x64
export PATH=$NODEJS/bin:$PATH

// 儲存/etc/profile檔案後
node -v 
// 看版本

服務端介紹

我們著重後端專案開發

建立專案

在gopath的src目錄下，建立OnlineRestaurant目錄，作為服務端專案。

mkdir CloudRestaurant
建立配置檔案目錄
mkdir config

config目錄中,配置app.json配置檔案

{
  "app_name": "youmen",
  "app_mode": "debug",
  "app_host": "localhost",
  "app_port": "8090"
}

建立一個tool目錄

裡面建立config.go檔案,用於解析專案配置資訊,config.go如下

type Config struct {
	AppName  string         `json:"app_name"`
	AppMode  string         `json:"app_mode"`
	AppHost  string         `json:"app_host"`
	AppPort  string         `json:"app_port"`
}
var _cfg *Config = nil
func GetConfig() *Config {
	return _cfg
}

func ParseConfig(path string) (*Config, error) {
	file, err := os.Open(path)
	if err != nil {
		panic(err)
	}
	defer file.Close()

	reader := bufio.NewReader(file)
	decoder := json.NewDecoder(reader)
	if err := decoder.Decode(&_cfg); err != nil {
		return nil, err
	}
	return _cfg, nil
}
編寫main.go
func main() {
    //讀取配置檔案
	cfg, err := toolbox.ParseConfig("./config/app.json")
	if err != nil {
		toolbox.Error(err.Error())
		return
	}
	app := gin.Default()
	app.Run(cfg.AppHost + ":" + cfg.AppPort)
}

編寫hello world

編寫Controller: 建立controller，並建立HelloController。

package controller

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

type HelloController struct {
}

func (hello *HelloController) Router(engine *gin.Engine) {
	engine.GET("/hello", hello.Hello)
}

func (hello *HelloController) Hello(context *gin.Context) {
	context.JSON(200, map[string]interface{}{
		"message": "hello world",
	})
}
新增路由

在main.go程式中新增路由設定

func registerRouter(router *gin.Engine) {
     new(controller.HelloController).Router(router)
}

專案前端使用及除錯

前端專案目錄說明

本專案的前端專案是使用nodejs的vue框架進行開發而成的。名稱為shop-client。該專案的原始碼如下圖所示：

如上圖所示的是shop-client前端專案.對該前端專案框架作如下解釋說明：

  • build：build目錄是指定的專案編譯目錄，該專案的編譯配置相關的操作，都在該目錄中進行配置和指定。
  • config：config目錄主要是對專案全域性進行相關的配置，以及測試或者釋出版本進行配置。
  • dist：所有的.vue頁面編譯後成為的js檔案，都會輸出到該目錄中。
  • node_modules：該目錄是nodejs專案所需要的依賴的第三方庫的程式碼目錄。由於該目錄體積較大，在進行專案遷移或者專案拷貝時，可以將該目錄刪除，在專案的根目錄中執行npm install命令會重新生成並下載所需要的第三方的程式碼庫。
  • src：該目錄是存放前端工程專案的原始碼目錄。
  • static：該目錄用於存放靜態的檔案，比如js、css檔案等。
  • package.json：執行npm init命令會生成該檔案，該檔案是node專案的配置檔案，其中包含專案的編譯和第三方依賴庫依賴資訊等內容。
執行前端專案

安裝好了nodejs環境後,可以使用命令對前端專案進行操作

進入專案中

cd shop-client

常用命令

...
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
}
...

按照上述的指令碼命令配置,可以實現很多指令功能.

比如說,可以使用如下命令執行編譯專案:

npm run build

因為在scripts指令碼中配置了start命令,只有start命令可以忽略run,當然,npm start會具體執行的命令是npm run dev, 因此可以通過npm run dev命令來執行專案.

請求介面API

在shop-client前端專案的src目錄下的api目錄中，有兩個js檔案，分別為ajax.js檔案和index.js檔案。

  • ajax.js檔案：該檔案中封裝了前端專案進行非同步網路請求的方法ajax，該函式包含三個引數，分別是：url、data、type，表示請求路徑，請求引數和請求方法。
  • index.js檔案：在該檔案中，引入了ajax.js檔案和其中的ajax方法，定義了基礎請求路徑BASE_URL常量，此專案中的請求埠為8090，與後臺伺服器監聽的埠一致。如果想自己修改伺服器監聽埠，要記得將前端程式碼BASE_URL常量中的埠也要一併修改。另外，在index.js檔案中定義了本專案功能開發所需要的介面，供在.vue檔案中進行使用。
前端頁面vue原始檔

在shop-client前端專案的src目錄下的pages目錄中，存放的是專案的頁面原始檔，頁面原始檔是.vue為副檔名的檔案。

在該專案中，根據專案功能和模組劃分為更詳細的目錄：Login、Msite、Order、Profile、Search、Shop等幾個目錄。

路由檔案

在src目錄下存在有router目錄，其中包含一個index.js檔案，該檔案是前端頁面的路由頁面，通過該頁面的路由配置，進行展示對應的前端頁面的vue原始檔。

路由模組使用到了第三方的路由庫：vue-router。對於第三方vue-router的配置依賴，可以在package.json檔案中的dependencies配置模組中找到：

...
"dependencies": {
    "axios": "^0.18.0",
    "better-scroll": "^1.12.6",
    "date-fns": "^1.29.0",
    "fastclick": "^1.0.6",
    "mint-ui": "^2.2.13",
    "mockjs": "^1.0.1-beta3",
    "swiper": "^4.3.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
}
...
專案入口

在shop-client專案根目錄下的src目錄中，有兩個代表專案入口的檔案，分別是js檔案和vue檔案。main.js是專案執行的總入口，在main.js檔案內部，引入並使用了App.vue檔案，同時引入了router路由檔案。

App.vue是專案的主頁面的佈局，並引入了頁面樣式檔案。

專案執行

需要執行前端專案進行除錯時,執行以下步驟

/*
		cd shop-client
		npm run dev
*/

然後在瀏覽器中訪問8080埠: http://localhost:8080 可以訪問到前端頁面，如下圖所示：

相關文章