EJS Node.JS Express-网址包含多个参数时css路径问题 [英] EJS Node.JS Express - css path issue when url with more than 1 parameter

问题描述

对不起，我的英语不好！

First sorry for my poor english !

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

Well, I am developping a web application using NodeJS / Express and EJS as template engine.

我目前遇到问题。

这是我的文件夹层次结构

Here is my folder hierarchy

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， mission ...等。
这条路线运作良好

Basically, I have two routes : /:app/ I load the value into the template default.ejs and I include app.ejs where app can be "home", "mission"... etc... This route is working well

另一条路线是： /：app /：action 其中：app 定义文件夹，例如文件夹 mission ，而 action 定义操作，例如 create 。使用URL / mission / create 在默认的中包含模板 /mission/create.ejs .ejs 并显示它。

The other route is : /:app/:action where :app defines the folder for example the folder mission and action defines the action for example create. Using the URL /mission/create includes the template /mission/create.ejs in default.ejs and display it.

它正在工作，但是我对加载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 。

It's working but I have an issue about the path to load the css. By using this route, the browser try to get : http://localhost:8333/mission/required/font-awesome-4.5.0/css/font-awesome.min.css instead of http://localhost:8333/required/font-awesome-4.5.0/css/font-awesome.min.css like in the first route.

这是我链接CSS文件的方式：

Here is how I link my css files :

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

你有什么主意吗？
我认为这与我的路由配置有关，但找不到解决方案。

Do you have any idea ? I assume it is about my route configuration but I can't find the solution.

推荐答案

看起来像你

Express会按照您使用express设置静态
目录的顺序查找文件。静态中间件功能。

Express looks up the files in the order in which you set the static directories with the express.static middleware function.

为$所服务的文件创建虚拟路径前缀（该路径实际上在文件系统中不存在
）。 b $ b express.static函数，为静态
目录指定安装路径，如下所示：

To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:

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路径前缀。

Now, you can load the files that are in the public directory from the /static path prefix.

例如：

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

在此处获取更多信息

这篇关于EJS Node.JS Express-网址包含多个参数时css路径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！