Golang學習之基於Vue.js的網路應用程式開發-Golang-PHP中文網

Golang學習之基於Vue.js的網路應用程式開發

王林

發布： 2023-06-25 22:07:18

原創

1795 人瀏覽過

Golang是Google開發的開源程式語言，其誕生並不久，但因其高效的並發性能、優秀的性能和良好的開發體驗而備受開發者追捧。同時，Vue.js是目前非常流行的JavaScript框架之一，廣泛應用於Web應用程式的開發中。本文將探討如何利用Golang和Vue.js開發一個基於Web的應用程式。

1. 環境搭建

首先，需要安裝Golang和Vue.js的運作所需環境：

對於Golang，需要安裝Golang開發環境並將其新增到系統路徑中。安裝包可在[官方網站](https://golang.org/dl/)上下載，並依照指示安裝即可。

對於Vue.js，需要全域安裝 node.js 的套件管理器npm，並透過npm安裝Vue.js。相關資訊可在[官方網站](https://vuejs.org)上取得。

2. 建立一個新專案

建立一個新的Golang和Vue.js專案：

mkdir myproject
cd myproject

登入後複製

使用Golang建立一個新的go.mod檔：

module projectname

go 1.16

require (
    github.com/gin-gonic/gin v1.6.3
)

登入後複製

在這個例子中，我們使用了Gin框架，你也可以使用其他你熟悉的框架。

接下來，使用npm建立一個新的Vue.js應用程式：

npm init @vue/cli

登入後複製

這條指令會提示我們選擇需要的配置，輸入選擇項目即可。待設定完成後，我們會對專案進行一些初始化：

cd frontend
npm install
npm run build

登入後複製

注意，這些指令需要在Vue.js專案的frontend目錄下方執行。

3. 寫後端程式碼

接下來，我們需要寫後端程式碼。在這個例子中，我們使用Gin框架編寫一個最簡單的網頁應用程序，並且將Vue.js應用程式生產的HTML檔案提供給瀏覽器進行渲染。

在main.go中，我們引入gin框架套件並建立Gin實例：

package main

import (
    "net/http"

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

func main() {
    router := gin.Default()
}

登入後複製

我們使用Gin的Default函數來建立預設的路由器實例。現在我們將路由器連接到Vue.js產生的HTML檔案：

func main() {
    router := gin.Default()

    router.StaticFS("/", http.Dir("./frontend/dist"))
}

登入後複製

這條程式碼將所有請求到根目錄「/」的請求連結到Vue.js產生的HTML檔案。最後，我們運行這個Web應用程式：

func main() {
    router := gin.Default()

    router.StaticFS("/", http.Dir("./frontend/dist"))

    router.Run(":8080")
}

登入後複製

使用這行程式碼，我們可以在本地8080連接埠上啟動服務。

4. 寫前端程式碼

在完成後端程式碼的撰寫後，我們需要在Vue.js中編寫前端程式碼。

首先，在Vue.js應用程式的App.vue檔案中，我們需要引入後端的API：

<script>
export default {
  data() {
    return {
      data: [],
    };
  },

  async created() {
    const response = await fetch("/api/data");
    this.data = await response.json();
  },
};
</script>

登入後複製

這行程式碼將存取我們在後端編寫的/data路由，並將得到JSON格式的回應，填入data數組中。接下來，我們需要使用Vue.js的模板語法將這些資料提取並進行渲染：

<template>
  <ul>
    <li v-for="(title, index) in data" :key="index">
      {{ title }}
    </li>
  </ul>
</template>

登入後複製

這段程式碼使用Vue.js的v-for指令遍歷data數組並渲染出清單項目。最後，我們需要為Vue.js應用程式的入口檔案main.js新增一個路由器，指向/data路徑，並啟動Vue.js應用程式：

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";

createApp(App).use(router).mount("#app");

登入後複製

我們在這個範例中使用了Vue.js官方提供的路由管理插件，router.js檔案內容如下：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import(/* webpackChunkName: "home" */ "./views/Home.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

登入後複製

在這段程式碼中，我們定義了一個基本的路由器，將根路徑導航到Home.vue元件。