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

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 定义文件夹，例如文件夹 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。

这是我 link 我的 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

看来你可能想试试这个。

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

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));

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

More Info on this here

Answer 2

在 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">

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

EJS Node.JS Express - css path issue when url with more than 1 parameter

javascript

url

ejs

node.js

express