近年、フロントエンド フレームワークの開発に伴い、多くのバックエンド言語がフロントエンド フレームワークと組み合わせてフルスタック開発を実現しようと試み始めています。これらのバックエンド言語の中でも、Go (Golang) は、その効率性、シンプルさ、安定性、信頼性によりますます注目を集めています。 Vue.js は、多くの強力なツールとコンポーネントを提供する高速フロントエンド フレームワークで、開発者は複雑な単一ページ アプリケーションをより迅速かつ簡単に構築できます。
この記事では、フロントエンドの使用方法を示すために、Golang Web アプリケーションに Vue.js を埋め込む方法を検討します。
Vue.js を表示する前に、次のテクノロジとツールが必要です。
npm install -g vue-cli
まず、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 が表示されます。ページ。
これで、Vue.js アプリケーションが作成され、ローカルで実行できるようになりました。次のステップは、それを Go アプリケーションに埋め込むことです。
Go アプリケーションで Vue.js を使用する最も一般的な方法は、Vue.js ビルド ファイルを Go アプリケーションの静的ディレクトリに配置し、HTML ファイルでこれらのファイルを参照することです。これは、次の 2 つの方法で実現できます。
この方法では、Go アプリケーションによって提供される HTML テンプレートを使用し、Vue.js を参照します。その中にビルドファイルを入れます。まず、Vue.js ビルド ファイルがコンパイルされていることを確認する必要があります。次のコマンドを使用してコンパイルを完了できます:
npm run build
このコマンドを実行すると、dist
という名前のディレクトリが作成されます。これには、Vue.js アプリケーションの後のパッケージが含まれています。次に、このディレクトリを Go アプリケーションの静的ディレクトリに移動する必要があります。静的ディレクトリには任意のディレクトリを指定でき、アプリケーションに静的リソース ファイルが保存されます。この記事では、static
を静的ディレクトリとして使用しますが、これは自分で変更できます。
dist
ディレクトリを Go アプリケーションの静的ディレクトリにコピーします。
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/ で始まるすべてのリクエストを処理します。
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 アプリケーションがコンパイルされていることを確認する必要があります。次のコマンドを使用してコンパイルを完了できます:
npm run build
このコマンドを実行すると、
という名前のファイルが作成されますdist ディレクトリ。パッケージ化された Vue.js アプリケーションが含まれています。次に、このディレクトリを Go アプリケーションの静的ディレクトリに移動する必要があります。静的ディレクトリには任意のディレクトリを指定でき、アプリケーションに静的リソース ファイルが保存されます。この記事では、static
を静的ディレクトリとして使用しますが、これは自分で変更できます。
ディレクトリを 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 サイトの他の関連記事を参照してください。