Go語言與html模板、js、css的引用以及表單查詢
引用靜態檔案
Go語言開發中，要在html頁面中引用js、css檔案，以及引用圖片時，必須先做靜態服務，匯入靜態檔案路徑，才能引入，否則一切js、css檔案、圖片都無法呼叫，在編譯器直接執行時，是可以的，但是在啟動專案時，所有js函式、css渲染無效。
比如在我的專案根目錄下，有一個名為static的資料夾，所有的靜態檔案，包括js檔案，css檔案，和圖片都放在static資料夾下，比如這樣
. ├── css │ ├── blogsheet.css │ ├── img │ │ ├── chair.jpg │ │ ├── lanbogeni.jpg │ │ ├── usercenter.jpg │ └── login.css └── js ├── blog.js ├── lib │ ├── jquery-3.3.1.min.js │ └── jquery.url.js └── reload.min.js 4 directories, 12 files
那麼要在main函式中先做靜態服務，這些檔案才可引入
package main
import (
"blog/gomod"
"blog/utils"
"fmt"
"net/http"
)
var app gomod.App
func main() {
utils.InitMysql()
fs := http.FileServer(http.Dir("static"))
http.Handle("/static/", http.StripPrefix("/static/", fs))
http.HandleFunc("/", app.Login)
http.HandleFunc 在這裡做了靜態服務後，js檔案、css檔案要在相關html頁面中引入，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< 一般在head標籤中引入，然後js檔案中的函式才能有效呼叫，src、img圖片路徑中引入的圖片也才能被正確引用。
比如css檔案中引入的圖片
#register_body {
background-image: url("/static/css/img/chair.jpg");
background-color: rgba(219, 215, 212, 0.45);
background-size: cover;
display: block;
}
在做了靜態檔案服務，以及在html頁面中引入css檔案後，圖片才會在背景中出現。
html中id、name、class的區別
模板渲染
在css檔案中，進行模板渲染時，
以#開頭的是根據id查詢的；
以.開頭的，是根據class查詢的，class顧名思義是類，所以class的名稱可以重複，名稱相同的class表示是同一類元素，此時，可根據.加class名來查詢，進行模板渲染；而id名稱是唯一的，在一個專案中，每一個id名稱只能出現一次，只有id唯一，才能根據id進行精確查詢。
#registerbox {
width: 400px;
height: 550px;
margin-left: 665px;
background: rgba(179, 179, 177, 0.97);
margin-top: 75px
}
.register_input{
width: 270px;
height: 35px;
margin-left: 55px;
margin-bottom: 10px;
}
也就是說.加名稱，渲染的是一類元素，
#加名稱，渲染的是一個元素。
form表單引數查詢
js檔案中，
var userName = document.getElementById("username").value;
這種查詢元素是用html頁面中的id標籤進行查詢的。
在go程式碼中，
request.FormValue("username")
這種引數查詢是通過html頁面中的name標籤查詢的。
總結，在一段html程式碼中，
<form action="/register" method="post">
<br/>
<input type="text" id="username" class="register_input" name="username" placeholder="使用者名稱:4-12字中文">
<input type="password" id="password" class="register_input" name="password" placeholder="密碼">
<input type="password" id="repassword" class="register_input" name="" placeholder="重複密碼">
<input type="submit" id="registe_sub" value="註冊" onclick="return register()">
<br/>
</form>
在input標籤中，有id、name、class三個屬性標籤
id的作用
id可以在css渲染時被用到，
#registe_sub {
width: 270px;
font-size: 25px;
margin-left: 55px;
margin-top: 30px;
text-align: center;
background: #ff5f25
}
這裡#號後面跟著的就是id
也可以在js中被用到，比如document.getElementById("username")，這裡括號中的也是id。
class的作用
class在css渲染時用到
.register_input{
width: 270px;
height: 35px;
margin-left: 55px;
margin-bottom: 10px;
}
這裡.後面跟著的是class，class是一類元素，也就是說這一段程式碼，把前面的class的值為registe_input的三個輸入框同時渲染了。
name的作用
在go檔案中，獲取表單元素的值時，是通過name查詢的，
username := r.FormValue("username")
password := r.FormValue("password")
也就是說，在go程式碼中，要通過input標籤中的name的值來獲取使用者在input輸入框中輸入的使用者名稱和密碼。