如何使用 golang 运行带有 css 的 html答案

【问题标题】：How to run html with css using golang如何使用 golang 运行带有 css 的 html
【发布时间】：2020-07-18 07:14:50
【问题描述】：

大家，我在通过 golang 文件在 html 文件中包含 css 时遇到问题。本地服务器上的输出只有html文件，没有css，如何修复？

可能是我使用模板包的方式有问题，你能解释一下如何以不同的方式进行路由吗？示例：当您转到 http://localhost:8080/login 时，它会显示 login.html。我看到了有关它的 net/http 文档，但要么我是盲人，要么我只是试图在那里找到错误的东西。所有文件都在同一个目录中

welcome.html

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
    <link rel="stylesheet" href="style.css" >
</head>

<body>
    <link rel="stylesheet" href="style.css">
<form action="">
    <center><h1>Enter</h1></center>
        <div class="group">
            <label for="">Login:</label>
            <input type="text">
        </div>
        <div class="group">
            <label for="">Password:</label>
            <input type="password">
        </div>
    <div class="group">
            <center><button>Come in</button></center>
        </div>
    <center><a href="regist.html" class="link">Registration</a></center>
    </form>

</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
body
{
    font-family: "Comic Sans MS";
    background-image: url(images/bg.jpg);
    background-repeat: repeat ;
    background-size: 80px 80px ;
}
h1
{
margin: 0;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 3px solid rgba(58,87,15,0.80);
}
form 
{
    margin : 0 auto;
    background: rgba(123,170,52,0.76);
    width: 450px;
    height: 350px;
    padding: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
.group
{
    margin: 16px ;
    padding: 5px;

}
label
{
    padding-left: 10px;
    text-transform: uppercase;
}
input
{
    margin-top: 5px;
    height: 30px;
    width: 400px;
    border-radius:20px/20px;
    border: none;
    padding-left: 15px;
    font-size: 18px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}

input:focus{
    border: 2px solid #264503;
    transform: translateX(15px);
    width: 385px;
}
button{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
button:hover{
    font-weight: bold;
    transform: scale(1.1);
}

.link{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
    text-decoration: none; 

}

goFile.go

package main

import (
    "fmt"
    "html/template"
    "net/http"
)

func welcome(w http.ResponseWriter, r *http.Request) {

    tmpl := template.Must(template.ParseFiles("welcome.html"))

    tmpl.Execute(w, nil)
}

func login(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.ParseFiles("login.html"))

    tmpl.Execute(w, nil)
}

func main() {
    http.HandleFunc("/", welcome)
    http.HandleFunc("/login", login)

    fmt.Println("Listening...")
    http.ListenAndServe(":8080", nil)
}

**输出如下：**

总结： 如何使用 golang net/http 或 html/template 包显示带有 css 的页面？如何正确地在页面之间进行路由？对错误感到抱歉。提前谢谢各位！

【问题讨论】：

因此，您已经在浏览器中打开了开发者工具（其中任何一个现在都已内置），清除了缓存并在“网络”选项卡处于活动状态的情况下重新尝试了您的请求，正确的？它是否向您显示对 CSS 文件的请求以 404 失败？我的意思是，您要么没有进行最直接的检查，要么没有告知我们完整的细节。哪一个都不太好，你知道的;-)

标签： html css go

【解决方案1】：

您的 Go 服务器不知道它应该为 style.css 提供服务，因为您从未告诉过它。如果将该文件移动到 assets/ 子目录，则可以注册一个处理程序来为该目录提供服务：

http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))

另见this answer。

【讨论】：

如果不更新 html hrefs，这将无法工作，还是会这样？ href 也需要是绝对的而不是相对的，否则浏览器在提供 /login 时会查看 /login/assets/styles.css。