NodeJS + Express：由于我使用链接进行导航，因此无法加载CSS

Question

我是Node的新手。

我使服务器按如下方式运行（index.js）：

var express = require('express'),
    views   = require('./routes/views');
var app = express();

// Get an instance of router
//var router = express.Router();
//app.use(express.static(__dirname+'/routes/keenIO/assets/css'));
app.use('/', views);

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

我以这种方式使用路由器，我也猜对了，设置了静态内容的路径（views.js）：

var express = require('express');
var path    = require("path");
var router = express.Router();

router.use('/assets', express.static(__dirname+'/keenIO/assets'));
router.use('/specificAssets', express.static(__dirname+'/keenIO/examples'));
//app.use(express.static(__dirname+'/routes/keenIO/assets/css'));

router.get('/', function(req, res) {
    //res.send('GET handler for /views route.');

    var indexPatch = path.join(__dirname+'/keenIO/examples/connected-devices/index.html');
    res.sendFile(indexPatch);
    //res.send(__dirname);
});

router.get('/rules', function(req, res) {
    //res.send('GET handler for /views route.');

    var indexPatch = path.join(__dirname+'/keenIO/examples/connected-devices/rules.html');
    res.sendFile(indexPatch);
    //res.send(__dirname);
});

router.get('/json', function(req, res) {
    //res.send('POST handler for /views route.');
  var fs = require('fs');
  //res.send('HOLA MUNDO');
  var obj;
  fs.readFile('network-big.json', 'utf8', function (err, data) {
    if (err) throw err;
      obj = JSON.parse(data);
     res.send(obj);
    });
});


module.exports = router;

因此，在.html文件中，例如，我使用它来访问CSS，并类似于javascript文件：

  <link rel="stylesheet" type="text/css" href="assets/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="assets/css/keen-dashboards.css" />
  <link rel="stylesheet" type="text/css" href="specificAssets/connected-devices/connected-devices.css" />

我开始了，一切都很好，但是当我尝试加载相同的index.html时，例如单击链接（带有链接的路径：specificAssets / connected-devices / index.html），它根本没有样式。

16年10月25日下午3:30编辑：好吧，用Chrome检查元素，当我单击链接时，我将补丁的一部分加倍，获得一些静态资源http：// localhost：3000 / assets / assets / resource 。{css / js}但它在我第一次使用http：// localhost：3000访问.html时已正确加载。 我很困惑...

任何建议将不胜感激。

最好的祝福，

伊万

Answer 1

创建适当的结构并将所有html文件保存在views文件夹中，并按照适合您的方式进行操作；对于样式，只需将css仅保留在html文件中，或将它们保留在同一文件夹中并要求使用html文件，这是最简单的方法是将您的html和样式保留在同一文件中

router.set('views', path.join(__dirname, 'views'));


 router.get('/', function(req, res) {

       res.render('index');
    });

如果您想使用适当的结构，那么您也需要知道这一点

由于.css文件是静态文件，因此您必须将它们提供给客户端。 但是，您不能将静态文件用作快速中间件。 将以下中间件添加到您的express应用中，然后将css文件夹移动到公共目录下（您应该创建一个公共目录）

app.use（express.static（path.join（__ dirname，'public'）））;