英文:
How to include CSS in HTML using Go?
问题
我正在玩Go语言，但是似乎无法在Go中打开带有CSS的页面。当我在Go外部打开HTML文件时，CSS可以正常工作，但是当我通过Go运行时，CSS就没有被包含进去。
以下是你的代码：
package mainimport ("fmt""html/template""log""net/http""strings"_ "github.com/go-sql-driver/mysql")func sayhelloName(w http.ResponseWriter, r *http.Request) {r.ParseForm() //解析url传递的参数，对于POST则解析响应包的主体（request body）//注意:如果没有调用ParseForm方法，下面无法获取表单的数据fmt.Println(r.Form) //这些信息是输出到服务器端的打印信息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!") //这个写入到w的是输出到客户端的}func login(w http.ResponseWriter, r *http.Request) {fmt.Println("method:", r.Method) //获取请求的方法if r.Method == "GET" {t, _ := template.ParseFiles("Add-Vehicle.html")t.Execute(w, nil)} else {r.ParseForm()//逻辑处理的代码写在这里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) //设置访问的路由http.HandleFunc("/login", login)http.Handle("/css/", http.FileServer(http.Dir("./css/")))err := http.ListenAndServe(":9090", nil) //设置监听的端口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">
有人能帮我解决这个问题吗？
英文:
I am playing around with Go, but I can't seem to have the page open up with CSS, when I open the HTML file outside Go, the CSS works perfectly fine, but when I run it through Go, it's never included.
package mainimport ("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 formfmt.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 methodif r.Method == "GET" {t, _ := template.ParseFiles("Add-Vehicle.html")t.Execute(w, nil)} else {r.ParseForm()// logic part of log infmt.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 rulehttp.HandleFunc("/login", login)http.Handle("/css/", http.FileServer(http.Dir("./css/")))err := http.ListenAndServe(":9090", nil) // setting listening portif err != nil {log.Fatal("ListenAndServe: ", err)}}
Also here is the href on my html file
<link rel="stylesheet" href="css/nicepage.css" media="screen"><link rel="stylesheet" href="css/Add-Vehicle.css" media="screen">
Would anyone be able to help me with this?
答案1
得分: 3
你正在为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。
英文:
You are using relative path for your CSS links, while you are serving the page from /login and not from /. So the browser is trying to get the files from /login/css/ instead of /css/.
You can fix that, by using an absolute path.
<link rel="stylesheet" href="/css/nicepage.css" media="screen"><link rel="stylesheet" href="/css/Add-Vehicle.css" media="screen">
See this answer to learn more about relative and absolute path behaviour: https://stackoverflow.com/a/24028813/9208887.
Additionally, you should strip the /css prefix from the request's URL.
fs := http.FileServer(http.Dir("./css"))http.Handle("/css/", http.StripPrefix("/css", fs))
See this answer to learn why StripPrefix is useful here: https://stackoverflow.com/a/27946132/9208887.
答案2
得分: 0
http.FileServer还将请求文件的路径添加到本地文件搜索路径中。
因此，您的请求实际上是在“css”目录内请求一个文件“css/nicepage.css”。
在您的情况下，可以使用以下代码：
http.Handle("/css/", http.FileServer(http.Dir("./")))
对于此类应用程序，使用根路径被认为是不好的做法，因此Web应用程序通常从专门分配给它们的目录中提供文件。通常称为“public”的目录将包含您的公共可访问文件，例如public/css、public/js等。
在这种情况下，您可以使用以下代码提供这些文件：
http.Handle("/css/", http.FileServer(http.Dir("./public")))
这里有一个非常好的答案，可能会对您有所帮助：Golang. What to use? http.ServeFile(..) or http.FileServer(..)?
英文:
The http.FileServer also adds the path of the requested file to the local file search path.
So your request is actually requesting a file "css/nicepage.css" inside "css" directory - css/css/nicepage.css.
Something like this would work in your case:
http.Handle("/css/", http.FileServer(http.Dir("./")))
Using root path would be considered bad for such application so web apps usually serve files from a directory specifically assigned for that. Usually this is called "public" and that directory would contain your publicly accessible files e.g. public/css, public/js, etc.
In this case you would serve them with:
http.Handle("/css/", http.FileServer(http.Dir("./public")))
There's a very nicely written answer here, that might help you: Golang. What to use? http.ServeFile(..) or http.FileServer(..)?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论