Go语言开发：在HTML模板中引入js及其他静态文件

程序员文章站 2022-04-04 20:49:31

...

问题：

用go语言开发，在html页面中，引入js文件无效，写在js文件中的函数无法调用，也没有报错；js代码直接写html页面中，可以调用，但是看起来太乱了，不舒服。这个问题困扰了好久，在网上搜了好多资料都无法解决问题，今天终于解决了，TND，看到答案的时候，原来这么简单。

参考文章

Go语言引用css和js文件
 go的template模板怎么才能引入css和js等静态文件？
致敬原创，为上面的两位作者点赞。
网上的文章太多千篇一律，很多都是抄的，不解决问题。

我的问题：

在写一个小项目的过程中，在html网页中直接写js代码，是有效的，但是将js代码单独放到js文件中就无效了，无法调用其中的函数，目录大概是这样

sszxr:blog sszxr$ tree
.
├── gomod
│   ├── accesscontrol.go
│   ├── app.go
│   ├── login.go
│   ├── register.go
│   └── session.go
├── main.go
├── models
│   ├── article.go
│   ├── homepage.go
│   └── user.go
├── static
│   ├── css
│   │   └── login.css
│   └── js
│       ├── blog.js
│       ├── lib
│       │   ├── jquery-3.3.1.min.js
│       │   └── jquery.url.js
│       └── reload.min.js
├── template
│   ├── accountset.html
│   ├── login.html
│   ├── register.html
├── utils
│   ├── myUtils.go
│   └── mysqlUtil.go
└── validator
    └── regexp.go

在html页面中是这样引用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客账号 - 登录</title>
    <script src="../static/js/lib/jquery-3.3.1.min.js"></script>
    <script src="../static/js/lib/jquery.url.js"></script>
    <script src="../static/js/blog.js"></script>
</head>
<body style="background-image:url(http://phc94on01.bkt.clouddn.com/%E5%8D%D%89.jpg);
      background-size: cover;background-color: rgba(214,210,207,0.45)">
<div style="width:100%;height: 600px"></div>

看了网上的好多攻略，主要因为是Go语言的问题，Go语言太不火了，好多问题都搜不到答案，网上搜到的答案基本都不能解决问题。
参考上面两篇文章的答案，是因为Go语言无法直接引用静态文件，必须要做静态服务才能引用，而做静态服务，大概就是要把静态文件，包括js文件，css文件的存放路径，告诉go编译器，不然的话，找不到文件，所以在html页面中无法引用js中的函数或代码。
也就是在main文件中，在路由监听前，要导入js文件路径

    fs := http.FileServer(http.Dir("static"))
	http.Handle("/static/", http.StripPrefix("/static/", fs))
	http.HandleFunc("/", app.Login)
	http.HandleFunc("/login", app.Login)
	http.HandleFunc("/register", app.Register)

这样就解决问题了。