我是围棋新手。当我创建一个服务器并连接到html时,我的CSS和图像没有加载。
我的Folder Structure
该文件加载为html和显示html代码在css文件。我从这个image当我试图检查什么是网络面板中的错误
下面是代码
package main
import (
"errors"
"fmt"
"html/template"
"net/http"
)
var tmpl *template.Template
func getHome(w http.ResponseWriter, r *http.Request) {
fmt.Println("Home Loaded")
tmpl.ExecuteTemplate(w, "index.html", "Abdullah Nettoor")
}
func getLogin(w http.ResponseWriter, r *http.Request) {
fmt.Println("Login Loaded")
tmpl.ExecuteTemplate(w, "login.html", nil)
}
func getSignup(w http.ResponseWriter, r *http.Request) {
fmt.Println("Signup Loaded")
tmpl.ExecuteTemplate(w, "signup.html", nil)
}
func postSignup(w http.ResponseWriter, r *http.Request) {
tmpl.ExecuteTemplate(w, "signup.html", nil)
}
func postLogout(w http.ResponseWriter, r *http.Request) {
http.Redirect(w, r, "/login", http.StatusSeeOther)
}
func main() {
tmpl = template.Must(template.ParseGlob("view/template/*.html"))
// tmpl, _ = template.ParseGlob("view/template/*.html")
// Create Server
fmt.Println("Starting Server...")
mux := http.NewServeMux()
mux.HandleFunc("/", getHome)
mux.HandleFunc("/login", getLogin)
mux.HandleFunc("/signup", getSignup)
mux.HandleFunc("/logout", postLogout)
mux.HandleFunc("/signup-post", postSignup)
mux.Handle("/view/static/", http.FileServer(http.Dir("static")))
// Start Server
err := http.ListenAndServe(":3333", mux)
if errors.Is(err, http.ErrServerClosed) {
fmt.Println("Server Closed")
} else if err != nil {
fmt.Printf("Error starting server: %s", err)
} else {
fmt.Println("Server Started on PORT:3333")
}
}
我尝试添加mux.Handle("/view/static/", http.FileServer(http.Dir("static")))
,添加这个函数来调用目录中的其他文件。但是,它仍然是像以前一样。我还检查了浏览器中的网络面板,它显示文件正在加载,但它没有样式我的htmlindex.html
的代码附在下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="../static/main.css">
</head>
<body class="text-white">
<img class="body-bg" src="../static/images/bg.jpg" alt="">
<main class="container-sm d-flex flex-column justify-content-center align-items-center">
<h1 class="display-1 text-center text-bold mt-5"> Hello, Good morning<br> {{.}}</h1>
<p class="text-center fs-4 pb-5 pt-2 fw-lighter">Were you expecting something 😅 See you later!</p>
<form action="/logout" method="post">
<button type="submit" class="btn btn-labeled btn-outline-light btn-lg">
<span><i class=" fa fa-sign-out btn-label"></i>Logout</span>
</button>
</form>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>
</html>
如果有谁知道如何正确加载css,希望能得到你的帮助.
1条答案
按热度按时间juzqafwq1#
问题解决了。我已经通过明确提及文件夹结构而不是像这样的点将链接标记更改为
<link rel="stylesheet" type="text/css" href="/view/static/css/style.css">
并且还在go代码中添加了一行代码来添加静态文件
mux.Handle("/view/static/", http.StripPrefix("/view/static/", http.FileServer(http.Dir("view/static/"))))