Go语言与html模板、js、css的引用以及表单查找

最新推荐文章于 2024-03-18 18:42:55 发布

Elonjelinek

最新推荐文章于 2024-03-18 18:42:55 发布

阅读量2.7k

点赞数 1

分类专栏： go语言文章标签： HTML CSS

本文链接：https://blog.csdn.net/Charliewolf/article/details/84111740

版权

go语言专栏收录该内容

35 篇文章 4 订阅

订阅专栏

引用静态文件

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输入框中输入的用户名和密码。

Elonjelinek

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Go语言与html模板、js、css的引用以及表单查找

引用静态文件Go语言开发中，要在html页面中引用js、css文件，以及引用图片时，必须先做静态服务，导入静态文件路径，才能引入，否则一切js、css文件、图片都无法调用，在编译器直接运行时，是可以的，但是在启动项目时，所有js函数、css渲染无效。比如在我的项目根目录下，有一个名为static的文件夹，所有的静态文件，包括js文件，css文件，和图片都放在static文件夹下，比如这样....
复制链接

扫一扫