nodejs / expressjs update(crUd)操作不显示css文件

时间:2017-10-16 16:05:46

标签: css node.js express ejs

我在Nodejs / Expressjs中制作一个CRUD应用程序,模板引擎是EJS。

更新的想法是从数据库中显示user_id,当管理员点击user_id时,它应该重定向到edit_team.ejs页面。

它工作正常但是当它重定向到edit_team.ejs页面时,css文件没有加载。我收到了以下错误 enter image description here

对于其他所有.ejs文件,都会加载所有css文件。

我在app.js文件中包含了'public'文件夹。

代码:

文件夹目录:

enter image description here

app.js:

app.use(express.static('app/public'));

view_team.ejs

<a class="button" href='/edit_team/<%= team[i].team_id %>'>
   <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>

edit_team.js:

var express = require('express');
var path = require('path');
const { Client } = require('pg')
const connectionString = 'postgresql://localhost:5432/idid';

//router object
var router = express.Router();

router.get('/edit_team/:id', function(req, res){
 res.render('login/edit_team');
});

module.exports = router;

edit_team.ejs(仅粘贴头部):

 <html lang="en">
  <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>

 </title>
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
  awesome.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/style.css">

    

有人可以帮我试图弄清楚这里有什么问题吗?

1 个答案:

答案 0 :(得分:0)

/edit_team/23等网址提供edit_team.ejs,其中包含相对路径css/bootstrap.min.css。这与/edit_team路径相关,因此它会edit_team/css/bootstrap.min.css,这可能不是您想要的。

您应该可以使用浏览器的开发工具进行确认。在“网络”选项卡中查看并检查未加载的文件的路径。

尝试使用与当前路径无关的路径,例如:

<link href="/css/bootstrap.min.css" rel="stylesheet">

请注意额外的/