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 ("/login", app.Login)
http.HandleFunc("/register", app.Register)
err := http.ListenAndServe("127.0.0.1:8080", nil)
if err != nil {
fmt.Errorf("啟動web服務失敗!", err)
}
}
在這裡做了靜態服務後,js檔案、css檔案要在相關html頁面中引入,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title>部落格賬號 - 登入</title>
<link rel="stylesheet" href="../static/css/blogsheet.css">
<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>
一般在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
輸入框中輸入的使用者名稱和密碼。