書いた理由
go言語でginを使っていたら、htmlからjsが読み込めない問題が発生したので、忘れないようにメモっておきます。また、ginを使わない場合でも同様の操作が必要らしいです。
cssの読み込みも同様にやるので、省略します。
ディレクトリについて
githubに今回のコードはおいてあります。
correct.goが正常に動作するプログラムで、incorrect.goが正常に動作しないプログラムです。
./
├── correct.go
├── incorrect.go
└── src
├── index.html
└── js
└── main.js
htmlとjs
ボタンを押すと、alertでPushed!!と出るだけの簡単なプログラムです。
index.html
<html>
<head>
<title>gin-js</title>
<script defer="defer" src="./js/main.js" ></script>
</head>
<body>
<button id="btn">Push!!</button>
</body>
</html>
main.js
document.getElementById("btn").onclick=function(){
alert("Pushed!!")
}
失敗するプログラム
/に接続すると、index.htmlが表示されるいたって簡単なプログラムです。
incorrect.go
package main
import "github.com/gin-gonic/gin"
func main() {
router := gin.Default()
router.LoadHTMLGlob("src/*.html")
router.GET("/", func(ctx *gin.Context) {
ctx.HTML(200, "index.html", gin.H{})
})
router.Run()
}
実行すると/js/main.jsにGETリクエストをして、404が返ってきています。
成功するプログラム
correct.go
package main
import "github.com/gin-gonic/gin"
func main() {
router := gin.Default()
router.Static("/js", "src/js/") // ここを追加するだけ!
// router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")
router.LoadHTMLGlob("src/*.html")
router.GET("/", func(ctx *gin.Context) {
ctx.HTML(200, "index.html", gin.H{})
})
router.Run()
}
実行すると/js/main.jsにGETリクエストをして、200が返ってきて成功しています!
静的なファイルにはこのメソッドを使用するらしいです。(詳しくは自分で調べて...)
router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")
最後に
調べても全然出てこなく、30分ぐらいかかったので備忘録&周知のために記事を書きました。
誰かの役に立ったら幸いです。