Golang学習 Vue.jsをベースにしたWebアプリケーション開発

Golang は、Google によって開発されたオープン ソース プログラミング言語です。誕生してからそれほど経っていませんが、その効率的な同時実行パフォーマンス、優れたパフォーマンス、優れた開発経験により、開発者の間で非常に人気があります。同時に、Vue.js は現在最も人気のある JavaScript フレームワークの 1 つであり、Web アプリケーションの開発で広く使用されています。この記事では、Golang と Vue.js を使用して Web ベースのアプリケーションを開発する方法を説明します。

1. 環境セットアップ

まず、Golang と Vue.js の実行に必要な環境をインストールする必要があります:

Golang の場合は、Golang 開発ツールをインストールする必要があります。環境を作成し、システム パスに追加します。インストール パッケージは [公式 Web サイト](https://golang.org/dl/) からダウンロードし、プロンプトに従ってインストールできます。

Vue.js の場合、node.js パッケージ マネージャー npm をグローバルにインストールし、npm 経由で Vue.js をインストールする必要があります。関連情報は[公式Webサイト](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 プロジェクトのフロントエンド ディレクトリで実行する必要があることに注意してください。

3. バックエンド コードを作成する

次に、バックエンド コードを作成する必要があります。この例では、Gin フレームワークを使用して最も単純な Web アプリケーションを作成し、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>

このコード行は、バックエンドでは、JSON 形式で応答を取得し、それをデータ配列に入力します。次に、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 にルーターを追加し、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 コンポーネントに移動します。

5. 実行

これで、Golang と Vue.js を使用して Web アプリケーションを開発するためのコードがすべて完成しました。アプリケーションを開始するには、次のコマンドを使用する必要があります:

go run main.go

ブラウザを開いて「http://localhost:8080」と入力し、Web アプリケーションにアクセスします。

6. 結論

この記事では、Golang と Vue.js を使用して Web ベースのアプリケーションを開発する方法を説明しました。これら 2 つのフレームワークの利点を組み合わせることで、さまざまな開発ニーズを満たす、より効率的かつ高速な Web アプリケーションを開発できます。この記事が開発者に役立ち、より創造性と革新的な思考を刺激することができれば幸いです。

以上がGolang学習 Vue.jsをベースにしたWebアプリケーション開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。