引用静态文件
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输入框中输入的用户名和密码。
扫一扫
3559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
