如何解决使用Pug和expressjs路由,CSS将不会显示和图像加载,但是数据在那里
这仅在我使用路线时发生。
./ routes / users.js
const express = require('express');
const router = express.Router();
const dbQuery = require('../controllers/db_query');
router.get('/',async function(req,res) {
console.log('ROUTE - /');
const result = await dbQuery.getUsers();
res.render('users',{
data: result
});
});
router.get('/:id',res) {
console.log('ROUTE - /id');
const result = await dbQuery.getUser(req.params.id);
console.log('result',result);
res.render('user',{
data: result
});
});
module.exports = router;
./ App.js
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views',path.join(__dirname,'views'));
app.set('view engine','pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname,'public')));
app.use('/',indexRouter);
app.use('/users',usersRouter);
// catch 404 and forward to error handler
app.use(function(req,res,next) {
next(createError(404));
});
// error handler
app.use(function(err,req,next) {
// set locals,only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
./ routes / users.js
const router = express.Router();
const dbQuery = require('../controllers/db_query');
router.get('/',{
data: result
});
});
module.exports = router;
./ views / users.pug
extends layout
block content
// Navigation
nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top
.container
a.navbar-brand.js-scroll-trigger(href='/') Node.js Excersise
button.navbar-toggler.navbar-toggler-right(type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation')
| Menu
i.fas.fa-bars
// Masthead
header.masthead
.container.d-flex.h-100.align-items-center
.mx-auto.text-center
h1.mx-auto.my-0.text-uppercase Users List
h2.text-white-50.mx-auto.mt-2.mb-5 This is where you can find all the users.
// Projects
section#projects.projects-section.bg-light
.container
.col-md-10.col-lg-8.mx-auto.text-center
ul
each user in data
div(class='profile-tile')
img(class='img-rounded' src='images/profile/' + user.Uid + '.jpg' alt= user.Uid + ' image')
br
a(class='profile-name' href='/users/' + user.Uid)= user.Uname
li(style='list-style-type:none')= user.Uemail
// Contact
section.contact-section.bg-black
.container
.col-md-10.col-lg-8.mx-auto.text-center
button.btn.btn-primary.mx-auto(onclick="window.location.href='/'") Back
.social.d-flex.justify-content-center
a.mx-2(href='#!')
i.fab.fa-twitter
a.mx-2(href='#!')
i.fab.fa-facebook-f
a.mx-2(href='#!')
i.fab.fa-github
// Footer
footer.footer.bg-black.small.text-center.text-white-50
.container copyright © : node.js.exercise 2020
// Bootstrap core JS
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js')
script(src='javascript/bootstrap.bundle.min.js')
// Third party plugin JS
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js')
// Core theme JS
script(src='javascripts/scripts.js')
下面是我的问题。 我试图显示从数据库获取的数据,并按路线传递以进行渲染。 (请参阅h1和img ) 我得到了预期的结果,但是图像(img)没有显示并且页面的CSS。
下面的代码与./views/users.pug相同,我只是以更简单的方式显示了数据。
./ views / user.pug
extends layout
block content
nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top
.container
a.navbar-brand.js-scroll-trigger(href='/') Node.js Excersise
button.navbar-toggler.navbar-toggler-right(type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation')
| Menu
i.fas.fa-bars
// Masthead
header.masthead
.container.d-flex.h-100.align-items-center
.mx-auto.text-center
h1.mx-auto.my-0.text-uppercase Users List
h2.text-white-50.mx-auto.mt-2.mb-5 This is where you can find all the users.
// Projects
section#projects.projects-section.bg-light
.container
.col-md-10.col-lg-8.mx-auto.text-center
div(class='profile-tile')
img(class='img-rounded' src='images/profile/' + data[0].Uid + '.jpg' alt='image')
h1= data[0].Uid
h1= data[0].Uname
h1= data[0].Uemail
// Contact
section.contact-section.bg-black
.container
.col-md-10.col-lg-8.mx-auto.text-center
button.btn.btn-primary.mx-auto(onclick="window.location.href='/'") Back
.social.d-flex.justify-content-center
a.mx-2(href='#!')
i.fab.fa-twitter
a.mx-2(href='#!')
i.fab.fa-facebook-f
a.mx-2(href='#!')
i.fab.fa-github
// Footer
footer.footer.bg-black.small.text-center.text-white-50
.container copyright © : node.js.exercise 2020
// Bootstrap core JS
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js')
script(src='javascript/bootstrap.bundle.min.js')
// Third party plugin JS
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js')
// Core theme JS
script(src='javascripts/scripts.js')
./ views / layout.js
head
Meta(charset='utf-8')
Meta(name='viewport' content='width=device-width,initial-scale=1,shrink-to-fit=no')
Meta(name='description' content='')
Meta(name='author' content='')
title Node.js
link(rel='icon' type='image/x-icon' href='/images/favicon.ico')
// Font Awesome icons (free version)
script(src='https://use.fontawesome.com/releases/v5.13.0/js/all.js' crossorigin='anonymous')
// Google fonts
link(href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet')
link(href='https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i' rel='stylesheet')
// Core theme CSS (includes Bootstrap)
link(href='stylesheets/styles.css' rel='stylesheet')
body
block content
我试图弄清楚为什么当我去时它不能正确渲染: localhost / users / 1
最后,我注意到当我去那条路线时
本地主机/用户
我得到了预期的结果。但是如果我在最后放置'/'
本地主机/用户/
我将遇到上述问题。没有CSS,它没有读取我在应用中为我的图片定义的静态图片:app.use(express.static(path.join(__dirname,'public')));
我有2个星期的学习node.js的时间,现在正在尝试使用它学习PUG。
谢谢大家。
解决方法
设法从我的同事那里得到答案(谢谢凯文)。
问题的原因是,我没有在{strong> ./ views / layout.pug 中放置/
中的'link(href='stylesheets/styles.css' rel='stylesheet')
'。这会导致浏览器假定路径是相对于文档的。
注释: 可以在浏览器的网络调试标签中进行检查。
当我进入 localhost:port / users 时,相对路径就可以了,因为当前URL没有'/'。因此样式表可以在网址中使用
localhost:port /用户
localhost:port / edit
以此类推...
样式表的相对路径为: localhost:port / stylesheets / styles.css(正确)
BUT (在路径中遇到“ /
”时)。相对路径将根据其当前位置/ URL的路径进行更改。
在这种情况下。
例如
localhost:port / users /
localhost:port / users / 1
localhost:port / edit / abc
...
样式表现在将相对于以上这些路径或文档路径:
localhost:port/users/stylesheets/styles.css
(不正确)
FIX
如果我们在开始处放置“ /
”,浏览器将查找相对于网站根目录的页面(称为绝对URL)。
我也从这个问题中得到了一些想法: https://github.com/pugjs/pug/issues/2662
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。