Question

所以，我正在使用Node.js和Express编写用JS编写的URL Shortener。我刚刚完成了前端但我遇到了让css工作的问题。我的项目树看起来像这样：

public
  css
    main.css
views
  index.html
app.js

在我的index.html文件中，我的.css文件以这种方式链接

<link rel="stylesheet" type="text/css" href="../public/css/main.css">

并且在使用Brackets编辑器制作网站时它确实有效，但是当我启动localhost服务器时，CSS并没有我得到

Cannot GET /public/css/main.css

我想这与我在app.js

中声明的静态路径有关

app.use(express.static(path.join(__dirname, "public")));

因为当我将index.html中的路径更改为/css/main.css时，一切都可以在localhost上运行，但是我的本地文本编辑器（Brackets）无法看到该css文件。在文本编辑器和localhost的开发期间，我该怎么做才能使它工作？

Answer 1

有几种方法（可能更多）：

选项1

使用浏览器调试应用程序（仅使用您的应用程序查看修改而不是括号编辑器）

选项2

将您的href=""属性设置为静态位置，例如href="localhost:8080/css/main.css"。然后（可能）当您同时运行编辑器和应用程序时，您将获得双方相同的CSS文件。

选项3

添加另一行样式表以加载它们。

<link rel="stylesheet" type="text/css" href="../public/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">

解决此问题的最常见方法通常是选项1 ，因此您不必担心支架的内部浏览器，并找出与{{{}的组合。 3}}模块将复制你从编辑器中获得的额外内容。

Answer 2

浏览器发送获取请求以获取CSS文件，您可以在代码中添加以下代码片段：

var fs = require('fs');
var url = require('url');
var query = url.parse(req.url, true)
var pathname = query.pathname
var filepath = "./public/"

if(fs.existsSync(filepath+pathname)){
    res.end(fs.readFileSync(filepath+pathname));
}

现在在html页面中：

<link rel="stylesheet" type="text/css" href="css/main.css">

解释：

浏览器将针对css/main.css发送 GET 请求然后pathname将css/main.css <{1}} 声明为filepath

./public/将为filepath + pathname

./public/css/main.css将返回fs.existsSync并在响应中写下数据。

因为true filepath只有 public 目录下的文件可以通过此方法发送，因此您的* app.js /文件安全

我已经使用同步函数以 synchronus 方式编写了这个，您也可以使用 asynchronus 方式执行此操作。

希望这会有所帮助

CSS文件路径在localhost和文本编辑器

2 个答案: