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

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

王林

リリース： 2023-06-25 22:07:18

オリジナル

1876 人が閲覧しました

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 サイトの他の関連記事を参照してください。