Q&A
前提
プログラミング初心者です。
練習でGoとVueを使ったwebアプリケーションのフロントエンド部分を作成しているときにエラーが発生して困っています。
具体的には、下記「該当のソースコード」に記載のHTMLファイルが表示されるようにしてwebサーバを起動しようとすると、エラーが発生してwebサーバの起動に失敗します。
実現したいこと
- webサーバを正常に起動できるようにする
- jsから正常にhtmlに値を渡せるようにする
発生している問題・エラーメッセージ
※「message」が表示されてほしい文字列が入る変数です
PS C:\Users\***\Go\***> go run .\main.go [GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached. [GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production. - using env: export GIN_MODE=release - using code: gin.SetMode(gin.ReleaseMode) panic: template: index.html:20: function "message" not defined goroutine 1 [running]: html/template.Must(...) C:/Program Files/Go/src/html/template/template.go:368 github.com/gin-gonic/gin.(*Engine).LoadHTMLGlob(0xc0000849c0, {0x88f8ac, 0xc}) C:/Users/***/go/pkg/mod/github.com/gin-gonic/gin@v1.8.1/gin.go:251 +0x306 main.serve() C:/Users/***/Go/***/main.go:14 +0x33 main.main() C:/Users/***/Go/***/main.go:53 +0x17 exit status 2
特に
panic: template: index.html:20: function "message" not defined
の部分です。
フォルダ構成
C:.
app
│ .gitignore
│ go.mod
│ go.sum
│ main.go
│
├─controllers
│□□Controller.go
│
├─models
│ ├─db
│ │□□ UserDb.go
│ │
│ └─entity
│□□□□ User.go
│
└─views
□□├─html
□□│□□index.html
□□│
□□└─js
□□□□test.js
該当のソースコード
index.html
html
1<!DOCTYPE html> 2<html> 3 <body> 4 <!--CDNによるVueの取り込み --> 5 <script src="https://unpkg.com/vue@next"></script> 6 7 <!--Vueインスタンスの生成--> 8 <script> 9 new Vue({ 10 el: "#show", 11 data() { 12 return { 13 message: "Hello Vue!" 14 }; 15 } 16 }); 17 </script> 18 19 <!--messageの表示--> 20 <div id="show"> 21 Message: {{ message }} 22 </div> 23 24 </body> 25</html>
main.go
go
1package main 2 3import ( 4 "net/http" 5 "app/controllers" 6 7 "github.com/gin-gonic/gin" 8) 9 10func serve() { 11 12 r := gin.Default() 13 14 r.LoadHTMLGlob("views/html/*") 15 16 r.GET("index", func(ctx *gin.Context) { 17 ctx.HTML(http.StatusOK, "index.html", gin.H{ 18 "title": "Main Page", 19 }) 20 }) 21 22//ルーティングについては記載を省略 23 24 r.Run(":8888") 25} 26 27func main() { 28 29 serve() 30 31}
期待していた動作
html
1 <!--messageの表示--> 2 <div id="show"> 3 Message: {{ message }} 4 </div>
この {{ message }}に、
html
1 <!--Vueインスタンスの生成--> 2 <script> 3 new Vue({ 4 el: "#show", 5 data() { 6 return { 7 message: "Hello Vue!" 8 }; 9 } 10 }); 11 </script>
ここで設定したmessageが入るという動作を期待していました。
試したこと
index.htmlが以下の場合には正常にwebサーバが起動し、「localhost:8888/index」にアクセスすることでindex.htmlが表示されます。
html
1<!DOCTYPE html> 2<html> 3 <h1>Hello Gin!</h1> 4</html>
よろしくお願いいたします。
回答1件
0
ベストアンサー
Goのテンプレートが置き換えする部分と、Vueをのテンプレートが置き換えする部分は書式がバッティングします。
index.htmlはまずGoのテンプレート処理したものがクライアント（ブラウザ）に送られます。
クライアント側でVueのテンプレート処理が走って描画されるという手順です。
なので、Goのテンプレート処理の後、Vue側で処理可能なように記述する必要があります。
html
1Message: {{`{{message}}`}}
上記のようにすると、Goのテンプレート処理が終わると、以下のようなHTMLがクライアントに渡されます。
html
1Message: {{message}}
投稿2022/09/14 09:59
総合スコア3353
あなたの回答
tips
プレビュー
関連した質問
Q&A
Unable to locate Mix fileのエラーが解決できない
Q&A
Golangでcould not import(no package for import)というエラーでインポートができない
Q&A
Laravel+Vue.js3+Inertiaでfilepondを使ったファイルアップロード項目がある編集画面に登録済みのファイルを表示できない
Q&A
th:href内に変数を設置し、ページごとに動的なリンクを作成したい。
Q&A
【`400 Bad Request` 】LaravelでAWS S3に画像をアップロードできない
Q&A
vite buildコマンドを実行すると出力ファイルでパスがおかしくなる原因が知りたい
Q&A
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/09/14 15:23