Node.js 服务器应用未显示 CSS

Question

我的 node.js 服务器上有以下代码（我使用的是 express）：

app.get('/appointment/:id',function(req,res){
  res.writeHead(200,{'Content-Type':'text/html'});
  res.write('<link href="public/css/style.css" rel="stylesheet" type="text/css">');
  res.write('<form name="accept" action="http://localhost:8080/appointment/'+ req.params.id+'/1" method="post">');
  res.write('<input id="accept" type="submit" value="Accept">');
  res.write('</form><br>');
  res.write('<form name="decline" action="http://localhost:8080/appointment/'+ req.params.id+'/0" method="post">');
  res.write('<input id="decline" type="submit" value="Decline">');
  res.write('</form><br>');
  res.end();
});

在我的根文件夹中我有文件夹 appointment/public/css/style.css.
当我打开网页时，它只显示 2 个表单按钮，但没有应用 CSS。
CSS代码是：

#accept {
  width:50px;
  height:30px;
  background-color:#00FF00;
  color:#FFFFFF;
  font-weight:bold;
  font-size:120%;
}

#decline {
  width:50px;
  height:30px;
  background-color:#FF0000;
  color:#FFFFFF;
  font-weight:bold;
  font-size:120%;
}

问题是什么，我该如何解决？

编辑：层次结构如下：
-server_files
--nodeServer.js
--public
---css
----style.css

Answer 1

我觉得有必要和大家分享一下出现这个问题的原因。就像其他 Web 框架一样，ExpressJs 有自己的静态文件服务方式。

express.static middleware is based on serve-static，负责为 Express 应用程序的静态资产提供服务。

工作原理：

从应用程序目录中的 "public" 目录为应用程序提供静态内容

// 获取 /style.css 等

app.use(express.static(__dirname + '/public'));
将中间件挂载在“/static”以仅在其请求路径以“/static”为前缀时提供静态内容

// GET /static/style.css 等

app.use('/static', express.static(__dirname + '/public'));
从多个目录提供静态文件，但优先于“./public”其他目录

app.use(express.static(__dirname + '/public'));

app.use(express.static(__dirname + '/files'));

app.use(express.static(__dirname + '/uploads'));

我检查了您的文件夹结构，建议您将 public 目录与 server_files 目录 保持在同一级别，并且nodeServer.js 文件位于 server_files 之外，因为它是您用来启动应用程序的主要文件。

然后在你的nodeServer.js中你可以这样做：

app.use('/public', express.static(__dirname + '/public'));

执行此操作后，public 目录中的所有静态资产都可以在 html 模板或您可能使用的任何其他模板引擎中访问。例如：

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

请注意nodeServer.js中中间件的顺序。希望对您有所帮助。

Node.js 服务器应用未显示 CSS

Node.js server app not showing CSS

html

css

node.js

express