【问题标题】:nodejs/expressjs update(crUd) operation is not displaying css filesnodejs/expressjs update(crUd) 操作未显示 css 文件
【发布时间】:2017-10-17 00:49:20
【问题描述】:

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

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

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

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

我在 app.js 文件中包含了“公共”文件夹。

代码:

文件夹目录:

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

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

【问题讨论】:

  • 请发布您的 server.js 或 app.js... 或您用作启动的任何文件。 “看起来”可能是您没有将您的 css 文件作为静态内容快速提供,但由于缺乏信息,我在这里可能是错误的。
  • 已添加。但所有其他模板文件都运行正常。我认为我没有在 nodejs 中正确处理“编辑”操作

标签: css node.js express ejs


【解决方案1】:

/edit_team/23 等 URL 提供 edit_team.ejs,其中包含相对路径 css/bootstrap.min.css。这是相对于/edit_team 路径的,所以它将是edit_team/css/bootstrap.min.css,这可能不是您想要的。

您应该能够使用浏览器的开发工具确认这一点。查看“网络”选项卡并检查未加载文件的路径。

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

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

注意额外的/

【讨论】:

  • 你是个天才!从昨天开始,我一直在尝试解决这个问题。相对路径和绝对路径很重要,现在我明白它的价值了。非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-09-23
  • 1970-01-01
  • 2012-09-06
  • 2014-03-29
  • 1970-01-01
  • 2011-10-13
  • 1970-01-01
相关资源
最近更新 更多