javascript - EJS Node.JS Express - 当 url 具有超过 1 个参数时 css 路径问题

Question

首先抱歉我的英语不好!

嗯，我正在开发一个使用 NodeJS/Express 和 EJS 作为模板引擎的 Web 应用程序。

我目前面临一个问题。

这是我的文件夹层次结构

App folder/
|___ server.js /
|___ node_modules /
|___ required /
     |___ bootstrap /
     |___ css /
     |___ font-awesome /
     |___ images /
|___ views /
     |___ default.ejs
     |___ home.ejs
     |___ mission.ejs
     |___ mission /
          |___ create.ejs
          |___ delete.ejs

这是我的 server.js 配置:

// Setup le serveur http
var app = express();

var code = 4567;
////// CONFIGURATION
// Définit le chemin relatif pour tous les fichiers utilisés dans l'app
app.use(express.static(__dirname));
console.log(__dirname + "");
app.set('views',__dirname + '/views');


app.get('/:app', function(req, res) {

  if (req.session.logged == false) {
    res.render('login.ejs');
  }else{

    if(api.page_exist(req.params.app)){
      res.render('default.ejs', {app:req.params.app});
    }else{

      /*console.log("La page demandée n'existe pas"); */
      res.redirect('/home');
    }

  }

});

app.get('/:app/:action', function(req,res){

  if(api.page_folder_exist(req.params.app,req.params.action)){

    console.log(__dirname);
    res.render('default.ejs', {app:req.params.app, action:req.params.action});


  }else{

      res.redirect('/');
  }

});

基本上，我有两条路线:/:app/ 我将值加载到模板 default.ejs 中，并包含 app.ejs，其中 app 可以是“home” ”、“使命”……等等…… 这条路线运作良好

另一个路径是:/:app/:action 其中 :app 定义文件夹，例如文件夹 mission 和 action 定义操作，例如 create。使用 URL /mission/create 在 default.ejs 中包含模板 /mission/create.ejs 并显示它。

它工作正常，但我对加载 css 的路径有疑问。通过使用此路由，浏览器尝试获取:http://localhost:8333/mission/required/font-awesome-4.5.0/css/font-awesome.min.css 而不是 http://localhost:8333/required/font-awesome-4.5.0/css/font-awesome.min.css 就像在第一条 route 一样。

这是我如何链接我的 css 文件:

<link href="required/css/normalize.css" rel="stylesheet">
<link href="required/css/common.css" rel="stylesheet">
<link href="required/css/style.css" rel="stylesheet">

你有什么想法吗？ 我认为这是关于我的路线配置，但我找不到解决方案。

Answer 1

在 html 页面(jade/ejs/html)中删除路径 ../public 中的 2 个点，同时包含 css 和 javactipts

ex:
Wrong:
<link href="../public/css/style.css" rel="stylesheet">
<link href="public/css/style.css" rel="stylesheet">

Right:
<link href="/public/css/style.css" rel="stylesheet">