Golang HTTP服务器中CSS和JS无法加载的问题

Golang HTTP服务器中CSS和JS无法加载的问题 asdasdasd

大家好， 我开始使用Golang，还不太习惯没有分号的语法 😊 我正尝试让我的网站正常运行，但我的CSS和JS完全不起作用。

4 回复

你好。请按照以下说明在论坛上发布代码。如何在此论坛发布代码

更多关于Golang HTTP服务器中CSS和JS无法加载的问题的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


此外，从 HTTP 处理程序中移除 http.Handle 调用，因为您的文件服务器将在每次调用处理程序时被初始化。请在其他处理函数之后，在 main 函数的某个位置执行一次此操作。

你需要为这些内容设置一个处理器。你可以使用

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

这些关于静态文件的处理可能会有点令人困惑。第一行的意思是：创建一个用于名为"static"目录的文件服务器。

下一行是为所有以"static"开头的路径设置一个处理器。在查找上述指定目录中的文件之前，StripPrefix用于移除静态路径。如果不使用StripPrefix，当请求/static/test.jpg时，它会在/static文件夹中尝试查找这个路径，即/static/static/test.jpg。

在Golang HTTP服务器中，CSS和JS文件无法加载通常是因为没有正确配置静态文件服务。你需要使用http.FileServer来提供静态资源。以下是一个完整的示例：

package main

import (
	"net/http"
)

func main() {
	// 创建文件服务器提供静态文件服务
	fs := http.FileServer(http.Dir("./static"))
	
	// 将/static/路径映射到文件服务器
	http.Handle("/static/", http.StripPrefix("/static/", fs))
	
	// 处理根路径
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		// 返回HTML页面，其中引用静态资源
		html := `<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>
    <h1>我的网站</h1>
    <script src="/static/script.js"></script>
</body>
</html>`
		w.Header().Set("Content-Type", "text/html; charset=utf-8")
		w.Write([]byte(html))
	})
	
	http.ListenAndServe(":8080", nil)
}

项目目录结构应该是：

project/
├── main.go
└── static/
    ├── style.css
    └── script.js

在static/style.css中：

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
    text-align: center;
}

在static/script.js中：

document.addEventListener('DOMContentLoaded', function() {
    console.log('JavaScript loaded successfully!');
    document.querySelector('h1').style.color = 'red';
});

关键点：

  1. 使用http.FileServer创建静态文件服务器
  2. 使用http.StripPrefix移除URL前缀
  3. 确保HTML中引用的路径与路由配置匹配
  4. 静态文件要放在正确的目录中

启动服务器后，访问http://localhost:8080，CSS和JS文件应该能正常加载。

回到顶部