如何为Node.js中res.write输出的HTML内容附加样式表

嘿，我明白你的情况——你直接通过Node.js的resp.write()输出HTML，没有单独的HTML文件，想给表格加样式对吧？这里有几个实用的方案，你可以根据需求选：

1. 内联样式（快速简单，适合少量样式） #

直接在<table>或者表格元素里加style属性，这种方式最直接，不需要额外配置：

var express = require('express');
var app = express();

function func(){
 app.get('/', function (reqs, resp) {
 resp.writeHead(200, {'Content-Type': 'text/html'});
 // 给table和单元格加内联样式
 resp.write("<table style='border-collapse: collapse; width: 100%;'>");
 resp.write("<tr><th style='border: 1px solid #ddd; padding: 8px;'>表头1</th><th style='border: 1px solid #ddd; padding: 8px;'>表头2</th></tr>");
 resp.write("<tr><td style='border: 1px solid #ddd; padding: 8px;'>内容1</td><td style='border: 1px solid #ddd; padding: 8px;'>内容2</td></tr>");
 resp.write("</table>");
 resp.end();
 });
}

var server = app.listen(8081, function () {
 func();
});

2. 内部样式表（更易维护，适合中等复杂度样式） #

在输出的HTML里添加<head>和<style>标签，把样式集中写在一起，比内联更整洁：

var express = require('express');
var app = express();

function func(){
 app.get('/', function (reqs, resp) {
 resp.writeHead(200, {'Content-Type': 'text/html'});
 // 先输出HTML头部和样式表
 resp.write(`
 <html>
 <head>
 <style>
 table {
 border-collapse: collapse;
 width: 100%;
 margin: 20px 0;
 }
 th, td {
 border: 1px solid #ccc;
 padding: 12px;
 text-align: left;
 }
 th {
 background-color: #f2f2f2;
 }
 tr:hover {
 background-color: #f5f5f5;
 }
 </style>
 </head>
 <body>
 `);
 // 输出表格内容
 resp.write("<table>");
 resp.write("<tr><th>姓名</th><th>年龄</th></tr>");
 resp.write("<tr><td>张三</td><td>25</td></tr>");
 resp.write("<tr><td>李四</td><td>30</td></tr>");
 resp.write("</table>");
 // 关闭HTML标签
 resp.write("</body></html>");
 resp.end();
 });
}

var server = app.listen(8081, function () {
 func();
});

这里用了模板字符串（``）来换行，让代码更易读，你也可以用多个resp.write()拼接。

3. 外部样式表（适合复杂样式，便于复用） #

如果样式很多，想单独管理CSS文件，需要让Express能访问静态资源。步骤如下：

第一步：创建静态文件目录 #

在你的项目根目录下新建一个public文件夹，然后在里面创建style.css文件，内容比如：

table {
 border-collapse: collapse;
 width: 100%;
}
th, td {
 border: 1px solid #ddd;
 padding: 8px;
}
th {
 background-color: #4CAF50;
 color: white;
}

第二步：配置Express静态资源中间件 #

在你的Node.js代码里添加express.static中间件，让Express能提供public文件夹里的静态文件：

var express = require('express');
var app = express();

// 配置静态资源目录，这样可以访问public下的文件
app.use(express.static('public'));

function func(){
 app.get('/', function (reqs, resp) {
 resp.writeHead(200, {'Content-Type': 'text/html'});
 // 在HTML头部引入外部样式表
 resp.write(`
 <html>
 <head>
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <table>
 <tr><th>产品</th><th>价格</th></tr>
 <tr><td>手机</td><td>2999</td></tr>
 <tr><td>电脑</td><td>5999</td></tr>
 </table>
 </body></html>
 `);
 resp.end();
 });
}

var server = app.listen(8081, function () {
 func();
});

这样访问localhost:8081时，浏览器会自动请求/style.css，Express会从public文件夹里返回这个文件。

内容的提问来源于stack exchange，提问作者JuanBernardoIV