如何使用 Go 在 HTML 中包含 CSS？答案

【问题标题】：How to include CSS in HTML using Go?如何使用 Go 在 HTML 中包含 CSS？
【发布时间】：2022-01-24 19:21:54
【问题描述】：

我正在玩 Go，但我似乎无法用 CSS 打开页面，当我在 Go 之外打开 HTML 文件时，CSS 工作得非常好，但是当我通过 Go 运行它时，它永远不会包括在内。

package main

import (
    "fmt"
    "html/template"
    "log"
    "net/http"
    "strings"

    _ "github.com/go-sql-driver/mysql"
)

func sayhelloName(w http.ResponseWriter, r *http.Request) {
    r.ParseForm() //Parse url parameters passed, then parse the response packet for the POST body (request body)
    // attention: If you do not call ParseForm method, the following data can not be obtained form
    fmt.Println(r.Form) // print information on server side.
    fmt.Println("path", r.URL.Path)
    fmt.Println("scheme", r.URL.Scheme)
    fmt.Println(r.Form["url_long"])
    for k, v := range r.Form {
        fmt.Println("key:", k)
        fmt.Println("val:", strings.Join(v, ""))
    }
    fmt.Fprintf(w, "Hello astaxie!") // write data to response
}

func login(w http.ResponseWriter, r *http.Request) {
    fmt.Println("method:", r.Method) //get request method
    if r.Method == "GET" {
        t, _ := template.ParseFiles("Add-Vehicle.html")
        t.Execute(w, nil)
    } else {
        r.ParseForm()
        // logic part of log in
        fmt.Println("username:", r.Form["select"])
        fmt.Println("password:", r.Form["select-1"])
        fmt.Println("username:", r.Form["year"])
        fmt.Println("password:", r.Form["text"])
        fmt.Println("username:", r.Form["dayrate"])
    }
}

func main() {
    http.HandleFunc("/", sayhelloName) // setting router rule
    http.HandleFunc("/login", login)
    http.Handle("/css/", http.FileServer(http.Dir("./css/")))
    err := http.ListenAndServe(":9090", nil) // setting listening port
    if err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

这也是我的 html 文件中的 href

    <link rel="stylesheet" href="css/nicepage.css" media="screen">
    <link rel="stylesheet" href="css/Add-Vehicle.css" media="screen">

有人能帮我解决这个问题吗？

【问题讨论】：

直接打开会看到什么？ http://localhost:9090/css/nicepage.css
使用绝对路径

标签： go

【解决方案1】：

您正在为 CSS 链接使用相对路径，而您从 /login 而不是 / 提供页面。所以浏览器试图从 /login/css/ 而不是 /css/ 获取文件。

你可以通过使用绝对路径来解决这个问题。

<link rel="stylesheet" href="/css/nicepage.css" media="screen">
<link rel="stylesheet" href="/css/Add-Vehicle.css" media="screen">

请参阅此答案以了解有关相对和绝对路径行为的更多信息：https://stackoverflow.com/a/24028813/9208887。

此外，您应该从请求的 URL 中去除 /css 前缀。

fs := http.FileServer(http.Dir("./css"))
http.Handle("/css/", http.StripPrefix("/css", fs))

查看此答案以了解为什么 StripPrefix 在此处有用：https://stackoverflow.com/a/27946132/9208887。

【讨论】：

【解决方案2】：

http.FileServer 还将请求文件的路径添加到本地文件搜索路径中。所以你的请求实际上是在“css”目录中请求一个文件“css/nicepage.css” - css/css/nicepage.css。

这样的事情会在你的情况下工作：

http.Handle("/css/", http.FileServer(http.Dir("./")))

对于此类应用程序，使用根路径会被认为是不利的，因此 Web 应用程序通常从专门为其分配的目录中提供文件。通常这称为“公共”，该目录将包含您可公开访问的文件，例如public/css、public/js等

在这种情况下，您可以为他们提供：

http.Handle("/css/", http.FileServer(http.Dir("./public")))

这里有一个写得很好的答案，可能会对你有所帮助：Golang. What to use? http.ServeFile(..) or http.FileServer(..)?

【讨论】：