指向由Node.js服务的HTML页面中的静态资源的链接不起作用

Question

我在nodejs项目中有这样的目录结构

这是带有CSS链接的我的login_nimda.html代码段：

我正在从nimda.js提供login_nimda.html ， nimda.js加载关联的CSS文件。

如您所见，我使用了根相对路径，但仍然没有得到任何结果。 我必须将CDN用于Bootstrap却无法使用下载文件的相同原因。

应该怎么样 链接的href属性哪里出问题了？

编辑：这是我的nimda.js代码段，正在提供HTML文件login_nidma.html

router.get('/', function( req, res){
    let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html'));
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
});

Answer 1

您还需要提供静态文件（例如.css文件）。

您可以使用Express的内置中间件来提供静态文件express.static() 。

这是基本示例：

// serve static files in "app/static" with your node.js server
app.use('/static', express.static('app/static'))

现在，您可以从/static在浏览器中（以及HTML文件中）访问它们：

<link href="/static/css/login_nimda.css" rel="stylesheet"> 

请在此处阅读有关express.static()及其用法的更多信息： http : //expressjs.com/en/starter/static-files.html

Answer 2

1. 使用express.static中间件代替以下内容提供静态文件：

    router.get('/', function( req, res){ let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html')); res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); }); 

   https://expressjs.com/en/starter/static-files.html
   
   不要忘记，您可以使用path模块和__dirname变量（请参见此SO问题 ）来帮助告诉express.static(...)确切的静态文件在哪里。

2. 如果要在不同文件app.use(express.static(...))乘以倍数，则需要确保将中间件应用于同一app实例。 我创建了一个代码示例进行说明。 在server.js＃L10中 ，我将var app传递到routes.js模块（与您的nimda.js等效）。 在routes.js＃L4中 ，我在与在server.js创建的var app相同的var app上调用.use() 。 在重构版本中，您在server.js和nimda.js中都使用app.use(express.static(...)) ，我猜测您正在创建一个新的var app = express()在每个文件中（这是我们要避免的事情）。

3. 我不建议您将静态资产分成如图所示的两个不同位置，除非您有充分的理由这样做。 将它们放在一个中央位置可以确保我们甚至不需要单独的routes.js （aka nimda.js ）文件来满足当前所需的功能，从而帮助您减少应用程序的复杂性。

Answer 3

如果使用Express，则根本不需要处理对静态内容的请求。 Express会自动返回您的静态信息。 只需使用路由器和文件夹结构的路径即可。 如

app.use（'/ my_statics'，express.static（__ dirname +“ / public”））;

如果您在下面的/public/assets/css/a.css中有a.css

http://example.com/my_statics/assets/css/a.css

如果您在以下/public/assets/b.html拥有b.html，

http://example.com/my_statics/assets/b.html

编辑：我为我的sideproject DataEndpoints建立了一个类似的设置。 检查app.js的静态设置和路由器设置。 还要检查路由器文件夹以查看如何处理，您可能想在views文件夹下查看如何设置静态文件链接