引用静态文件

staticstatic
.
├── 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>

headsrcimg

比如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文件后，图片才会在背景中出现。

idnameclass

模板渲染

#id.classclassclassclass.classidididid
#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表单参数查找

var userName = document.getElementById("username").value;id
request.FormValue("username")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>

inputidnameclass
id
id
#registe_sub {
    width: 270px;
    font-size: 25px;
    margin-left: 55px;
    margin-top: 30px;
    text-align: center;
    background: #ff5f25
}

#iddocument.getElementById("username")id
class
class
.register_input{
    width: 270px;
    height: 35px;
    margin-left: 55px;
    margin-bottom: 10px;
}

.classclassclassregiste_input
name
name
username := r.FormValue("username")
password := r.FormValue("password")

inputnameinput