ホームページ >バックエンド開発 >Golang >golangでvueを表示する方法

golangでvueを表示する方法

王林オリジナル: 2023-05-10 10:18:36933ブラウズ

近年、フロントエンドフレームワークの開発に伴い、多くのバックエンド言語がフロントエンドフレームワークと組み合わせてフルスタック開発を実現しようと試み始めています。これらのバックエンド言語の中でも、Go (Golang) は、その効率性、シンプルさ、安定性、信頼性によりますます注目を集めています。 Vue.js は、多くの強力なツールとコンポーネントを提供する高速フロントエンドフレームワークで、開発者は複雑な単一ページアプリケーションをより迅速かつ簡単に構築できます。

この記事では、フロントエンドの使用方法を示すために、Golang Web アプリケーションに Vue.js を埋め込む方法を検討します。

前提条件

Vue.js を表示する前に、次のテクノロジとツールが必要です。

Go 言語環境。公式ウェブサイト。
Vue CLI は、npm パッケージマネージャーを通じてインストールできます:

npm install -g vue-cli

Visual Studio Code、Sublime Text などのテキストエディター。
Chrome、Firefox などのブラウザ。

ステップ 1: Vue.js アプリケーションを作成する

まず、Vue.js アプリケーションを作成する必要があります。標準の Vue.js プロジェクトは、Vue CLI を使用してすぐに作成できます。

vue init webpack-simple my-vue-app

ここでは、my-vue-app という名前の Vue.js プロジェクトを作成しました。これにより、Vue.js ファイルを含むプロジェクトディレクトリが作成されます。

my-vue-app ディレクトリに入り、次のコマンドを実行します:

npm install
npm run dev

これにより、ローカル Web サーバーが起動し、デフォルトでブラウザに Vue.js が表示されます。ページ。

ステップ 2: Vue.js を Go アプリケーションに統合する

これで、Vue.js アプリケーションが作成され、ローカルで実行できるようになりました。次のステップは、それを Go アプリケーションに埋め込むことです。

Go アプリケーションで Vue.js を使用する最も一般的な方法は、Vue.js ビルドファイルを Go アプリケーションの静的ディレクトリに配置し、HTML ファイルでこれらのファイルを参照することです。これは、次の 2 つの方法で実現できます。

方法 1: Go アプリケーションでテンプレートを使用する

この方法では、Go アプリケーションによって提供される HTML テンプレートを使用し、Vue.js を参照します。その中にビルドファイルを入れます。まず、Vue.js ビルドファイルがコンパイルされていることを確認する必要があります。次のコマンドを使用してコンパイルを完了できます:

npm run build

このコマンドを実行すると、dist という名前のディレクトリが作成されます。これには、Vue.js アプリケーションの後のパッケージが含まれています。次に、このディレクトリを Go アプリケーションの静的ディレクトリに移動する必要があります。静的ディレクトリには任意のディレクトリを指定でき、アプリケーションに静的リソースファイルが保存されます。この記事では、static を静的ディレクトリとして使用しますが、これは自分で変更できます。

dist ディレクトリを Go アプリケーションの静的ディレクトリにコピーします。

<pre class='brush:php;toolbar:false;'>cp -r dist/ $GOPATH/src/my-app/static/</pre>

Go アプリケーションでは、http.FileServer ## を定義する必要があります。 #Handler、静的ディレクトリ内のファイルを返します。また、Vue.js アプリケーションの HTML ファイルをロードし、その中に Vue.js ビルドファイルを含めるテンプレートを定義する必要があります。

以下はルートとテンプレートを定義するためのサンプルコードです:

package main

import (
    "html/template"
    "net/http"
)

func main() {
    http.HandleFunc("/", handler)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    tpl, err := template.ParseFiles("templates/index.html")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }

    err = tpl.Execute(w, nil)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

上記のコードでは、ブラウザに表示されるルート

/ を定義します。 templates/index.html ファイルを作成し、ユーザーに提示します。また、静的ディレクトリからファイルをロードする静的ファイルハンドラーも定義します。このハンドラーは、/static/ で始まるすべてのリクエストを処理します。

HTML テンプレートには、Vue.js ビルドファイルが含まれており、

div#app 要素を Vue.js アプリケーションのルート要素として使用します。

次は、

index.html ファイルの例です:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Vue App</title>
</head>
<body>
  <div id="app">
    <!-- Vue.js应用程序将在此渲染 -->
  </div>
  <script src="/static/js/app.js"></script>
</body>
</html>

上記のコードでは、Vue.js ビルドファイルへのパスを ## に設定します。 #/静的/js/app.js

。ニーズに応じて自分で変更できます。方法 2: Go アプリケーションで Vue.js ルーティングを使用する

この方法では、Vue.js をルーターとして使用し、アプリケーションの Go に埋め込みます。このようにして、実際に Go アプリケーションを Vue.js のバックエンドとして使用し、Vue.js がユーザーのルーティングリクエストの処理を担当します。

まず、Vue.js アプリケーションがコンパイルされていることを確認する必要があります。次のコマンドを使用してコンパイルを完了できます:

npm run build

このコマンドを実行すると、

という名前のファイルが作成されますdist

ディレクトリ。パッケージ化された Vue.js アプリケーションが含まれています。次に、このディレクトリを Go アプリケーションの静的ディレクトリに移動する必要があります。静的ディレクトリには任意のディレクトリを指定でき、アプリケーションに静的リソースファイルが保存されます。この記事では、static を静的ディレクトリとして使用しますが、これは自分で変更できます。

dist

ディレクトリを Go アプリケーションの静的ディレクトリにコピーします: <pre class='brush:php;toolbar:false;'>cp -r dist/ $GOPATH/src/my-app/static/</pre> Go アプリケーションでは、HTML ファイルを返すルートハンドラーを定義する必要があります。 Vue.js アプリケーションのを作成し、Vue.js アプリケーションが Go バックエンドによって提供される API を呼び出せるようにします。

以下は、ルートと API を定義するためのサンプルコードです:

package main

import (
    "encoding/json"
    "net/http"
)

type Message struct {
    Text string `json:"text"`
}

func main() {
    http.HandleFunc("/", handler)
    http.HandleFunc("/api/hello", hello)
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
    http.ListenAndServe(":8080", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "index.html")
}

func hello(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    message := Message{"Hello, Vue.js!"}
    json.NewEncoder(w).Encode(message)
}

在上面的代码中，我们定义了两个路由：/和/api/hello。/路由将返回Vue.js应用程序的HTML文件，并让Vue.js应用程序调用我们的Go后端提供的API。/api/hello路由是我们定义的API，它将返回一条简单的JSON消息。

在我们的Vue.js应用程序中，我们需要实现路由器，并确保它可以调用我们Go后端提供的API。以下是一个示例路由器：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在上面的代码中，我们定义了一个路由器，并将/路由与一个名为HelloWorld的组件相对应。我们还将路由模式设置为history，以便它使用HTML5路由历史记录API，并将其与我们的Go应用程序进行集成。

最后，在我们的Vue.js应用程序中，我们可以使用axios来调用我们Go后端提供的API。以下是一个使用axios调用API的示例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    axios.get('/api/hello')
      .then(response => {
        this.message = response.data.text
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

在上面的代码中，我们在组件的created生命周期中使用axios来调用我们的Go后端提供的API，并将响应数据设置为组件模板中的message数据。

结论

通过本文，我们已经学习了如何将Vue.js嵌入到Golang的Web应用程序中。我们已经探讨了两种方法，一种是使用模板，另一种是使用Vue.js路由器。通过使用Vue.js，我们可以更轻松地构建和管理复杂的前端应用程序，并将其与Golang开发的后端应用程序结合在一起。希望这篇文章可以帮助您更好地理解如何将Golang和Vue.js结合在一起，从而构建高效和可靠的全栈Web应用程序。

以上がgolangでvueを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：golang io待機エラー次の記事：golang io待機エラー

続きを見る