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应用程序可以是“home”、“mission”...等的位置...这条路线运行良好

另一条路线是：/:app/:action 其中:app定义文件夹，例如文件夹任务和动作定义动作，例如create。使用URL/mission/create包括在模板/mission/create.ejs中default.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页面（玉/ EJS / HTML）除去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

更多信息在这里