EJS Node.JS Express - 具有超过 1 个参数的 url 时的 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 可以是“家”、“任务”......等等...... 这条路线运行良好

另一条路线是：/:app/:action 其中 :app 定义文件夹，例如文件夹 mission 和 action 定义动作，例如创建。使用 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。

这是我链接我的 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">

Answer 2

看起来你可能想试试这个。

Express 按照您设置静态文件的顺序查找文件 具有 express.static 中间件功能的目录。

创建一个虚拟路径前缀（路径实际上并不 存在于文件系统中）对于由 express.static 函数，指定静态的挂载路径 目录，如下图：

app.use('/required', express.static('required'));

这应该可以在你的代码中替换它

// Définit le chemin relatif pour tous les fichiers utilisés dans l'app
app.use(express.static(__dirname));

现在，您可以从 /static 路径前缀。

例如：

http://localhost:8333/required/bootstrap/somefile.css
http://localhost:8333/required/css/somefile.css
http://localhost:8333/required/font-awesome/somefile.css

More Info on this here