javascript - ExpressJS将路由名称添加到静态文件路径的问题
问题描述
我有一个基于 express 和 ejs 的网络应用程序。
我有两条路线索引和文章。
虽然样式表和脚本等静态文件在索引路由中按预期提供，但文章路由无法正确提供脚本。
//app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');
var indexRouter = require('./routes/index');
var articleRouter = require('./routes/article');
var app = express();
app.use(cors());
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
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('/article', articleRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, 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;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>Title</title>
<!-- Core Stylesheet -->
<link rel="stylesheet" href="/stylesheets/styles.css">
</head>
<body>
<!-- ##### Header Area Start ##### -->
<header class="header-area">
<!-- Navbar Area -->
<div class="newspaper-main-menu top-header-area" id="">
<div class="container">
<div class="row">
<div class="col-12">
<div class="top-header-content d-flex align-items-center justify-content-between">
<!-- Logo -->
<div class="logo">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="136px" height="53.429px" viewBox="0 0 136 53.429" enable-background="new 0 0 136 53.429" xml:space="preserve">
<path fill="#FFFFFF" d="M7.538,14.257c0.268-1.225,0.852-2.194,1.753-2.903c0.901-0.709,2.021-1.063,3.363-1.063 c1.188,0,2.156,0.24,2.904,0.718c0.747,0.48,1.274,1.543,1.58,3.191l4.369,22.65h0.115l4.772-22.593 c0.268-1.225,0.862-2.194,1.782-2.903s1.897-1.063,2.932-1.063c1.035,0,1.859,0.355,2.472,1.063c0.612,0.71,0.786,1.677,0.517,2.903 l-7.357,34.607c-0.308,1.38-0.92,2.444-1.84,3.191c-0.92,0.747-1.897,1.122-2.932,1.122c-1.572,0-2.712-0.25-3.421-0.747 c-0.71-0.497-1.198-1.552-1.466-3.162l-4.254-22.995h-0.115L7.826,49.21c-0.269,1.226-0.862,2.195-1.782,2.903 c-0.92,0.708-1.897,1.064-2.932,1.064s-1.859-0.355-2.472-1.064s-0.786-1.676-0.517-2.903L7.538,14.257z M36.915,27.019 c0.805-3.794,1.801-6.813,2.989-9.055c1.187-2.242,2.5-3.948,3.937-5.116c1.437-1.169,2.951-1.925,4.542-2.27 s3.191-0.517,4.801-0.517c1.61,0,3.133,0.172,4.57,0.517c1.437,0.345,2.625,1.102,3.564,2.27c0.939,1.17,1.524,2.874,1.754,5.116 s-0.057,5.26-0.862,9.055l-1.84,8.738c-0.843,3.909-1.84,7.023-2.989,9.341c-1.15,2.32-2.425,4.092-3.823,5.317 c-1.4,1.227-2.914,2.031-4.542,2.415c-1.63,0.382-3.325,0.575-5.088,0.575c-1.802,0-3.43-0.193-4.886-0.575 c-1.457-0.383-2.616-1.187-3.479-2.415c-0.862-1.226-1.371-2.998-1.523-5.317c-0.153-2.319,0.191-5.432,1.035-9.341L36.915,27.019z M43.123,35.758c-0.538,2.529-0.872,4.552-1.007,6.064c-0.134,1.514-0.106,2.683,0.086,3.507c0.192,0.825,0.556,1.361,1.092,1.61 c0.537,0.25,1.188,0.373,1.955,0.373s1.466-0.124,2.099-0.373c0.632-0.249,1.226-0.785,1.782-1.61 c0.555-0.824,1.092-1.993,1.61-3.507c0.517-1.513,1.044-3.535,1.58-6.064l1.84-8.738c0.46-2.223,0.747-4.043,0.862-5.461 c0.115-1.418,0.067-2.529-0.143-3.334c-0.211-0.805-0.575-1.35-1.092-1.639c-0.517-0.287-1.16-0.431-1.926-0.431 c-0.768,0-1.466,0.143-2.099,0.431c-0.632,0.287-1.226,0.834-1.782,1.639c-0.556,0.805-1.083,1.916-1.58,3.334 c-0.498,1.418-0.977,3.238-1.437,5.461L43.123,35.758z M45.308,3.852c0.192-1.072,0.747-1.983,1.667-2.731 C47.894,0.374,48.891,0,49.965,0c1.072,0,1.897,0.374,2.472,1.121c0.575,0.747,0.767,1.658,0.575,2.731 c-0.23,1.073-0.805,1.983-1.725,2.731c-0.92,0.747-1.917,1.121-2.989,1.121c-1.073,0-1.897-0.373-2.472-1.121 C45.25,5.835,45.077,4.925,45.308,3.852z M56.001,3.852c0.191-1.072,0.747-1.983,1.667-2.731C58.587,0.374,59.583,0,60.657,0 c1.072,0,1.897,0.374,2.472,1.121c0.575,0.747,0.767,1.658,0.575,2.731c-0.23,1.073-0.805,1.983-1.725,2.731 c-0.92,0.747-1.917,1.121-2.989,1.121c-1.073,0-1.897-0.373-2.472-1.121C55.942,5.835,55.771,4.925,56.001,3.852z M70.429,14.257 c0.268-1.225,0.852-2.194,1.753-2.903c0.901-0.709,2.021-1.063,3.363-1.063c1.188,0,2.156,0.24,2.904,0.718 c0.747,0.48,1.274,1.543,1.58,3.191l4.369,22.65h0.115l4.772-22.593c0.268-1.225,0.862-2.194,1.782-2.903s1.897-1.063,2.932-1.063 c1.035,0,1.859,0.355,2.472,1.063c0.612,0.71,0.786,1.677,0.517,2.903L89.63,48.865c-0.308,1.38-0.92,2.444-1.84,3.191 c-0.92,0.747-1.897,1.122-2.932,1.122c-1.572,0-2.712-0.25-3.421-0.747c-0.71-0.497-1.198-1.552-1.466-3.162l-4.254-22.995h-0.115 L70.717,49.21c-0.269,1.226-0.862,2.195-1.782,2.903c-0.92,0.708-1.897,1.064-2.932,1.064c-1.035,0-1.859-0.355-2.472-1.064 c-0.613-0.709-0.786-1.676-0.517-2.903L70.429,14.257z M94.458,49.824c0.193-0.882,0.662-1.626,1.406-2.233 c0.744-0.606,1.557-0.91,2.44-0.91s1.557,0.304,2.026,0.91c0.468,0.607,0.606,1.35,0.414,2.233s-0.655,1.627-1.386,2.233 c-0.73,0.606-1.537,0.91-2.419,0.91c-0.882,0-1.564-0.304-2.046-0.91C94.41,51.451,94.265,50.706,94.458,49.824z M119.393,47.632 c-0.165,0.717-0.262,1.365-0.289,1.943c-0.028,0.579-0.083,1.048-0.165,1.406c-0.138,0.662-0.462,1.158-0.971,1.489 c-0.51,0.331-1.165,0.496-1.965,0.496c-0.69,0-1.255-0.201-1.695-0.6c-0.442-0.399-0.552-1.151-0.331-2.253l-0.083,0.041 c-0.69,1.02-1.503,1.744-2.44,2.17c-0.938,0.427-1.861,0.641-2.771,0.641c-0.744,0-1.413-0.118-2.006-0.352 c-0.593-0.234-1.069-0.592-1.426-1.075c-0.359-0.482-0.586-1.102-0.683-1.861c-0.097-0.757-0.035-1.66,0.187-2.709 c0.358-1.709,0.916-3.08,1.675-4.115c0.757-1.034,1.881-1.908,3.37-2.626l5.003-2.357c1.185-0.551,1.888-1.336,2.109-2.357 c0.138-0.606,0.083-1.131-0.165-1.571s-0.69-0.662-1.323-0.662c-0.882,0-1.53,0.221-1.944,0.662 c-0.414,0.442-0.773,1.103-1.075,1.985c-0.165,0.496-0.496,0.889-0.992,1.178c-0.496,0.289-1.075,0.435-1.737,0.435 c-0.275,0-0.566-0.034-0.868-0.104c-0.304-0.069-0.566-0.187-0.786-0.352s-0.392-0.378-0.516-0.641 c-0.124-0.261-0.145-0.585-0.063-0.971c0.193-0.965,0.558-1.819,1.095-2.564c0.538-0.744,1.178-1.365,1.922-1.861 c0.744-0.496,1.571-0.875,2.481-1.138c0.91-0.261,1.847-0.392,2.812-0.392c1.681,0,2.977,0.172,3.887,0.516 c0.91,0.345,1.557,0.821,1.944,1.427c0.386,0.607,0.572,1.31,0.559,2.109c-0.014,0.8-0.117,1.654-0.311,2.564L119.393,47.632z M115.796,40.851l-2.068,1.241c-0.634,0.386-1.158,0.737-1.571,1.054s-0.751,0.634-1.013,0.951c-0.262,0.318-0.462,0.656-0.6,1.014 s-0.262,0.773-0.372,1.241c-0.165,0.854-0.138,1.51,0.083,1.964c0.22,0.455,0.606,0.683,1.158,0.683 c0.827,0,1.557-0.399,2.192-1.199c0.633-0.799,1.075-1.792,1.323-2.977L115.796,40.851z M127.125,33.821h-0.537 c-0.744,0-1.276-0.137-1.593-0.414c-0.317-0.275-0.406-0.757-0.269-1.447c0.138-0.716,0.428-1.213,0.868-1.489 c0.441-0.275,1.034-0.414,1.778-0.414h0.538l0.827-3.846c0.22-1.047,0.606-1.812,1.157-2.294c0.552-0.482,1.213-0.723,1.986-0.723 c0.772,0,1.336,0.241,1.695,0.723c0.357,0.483,0.428,1.248,0.207,2.294l-0.827,3.846h1.158c0.743,0,1.268,0.138,1.571,0.414 c0.304,0.275,0.386,0.773,0.248,1.489c-0.138,0.69-0.421,1.172-0.848,1.447c-0.428,0.275-1.013,0.414-1.757,0.414h-1.158 l-2.811,13.15c-0.111,0.469-0.111,0.834,0,1.095c0.109,0.262,0.454,0.421,1.033,0.476c0.579,0.027,1.007,0.165,1.282,0.414 c0.274,0.248,0.344,0.703,0.207,1.365c-0.194,0.854-0.586,1.461-1.179,1.819s-1.426,0.538-2.501,0.538 c-0.965,0-1.751-0.118-2.357-0.352c-0.607-0.234-1.069-0.545-1.386-0.93c-0.317-0.385-0.503-0.827-0.558-1.323 c-0.056-0.496-0.028-1.007,0.083-1.53L127.125,33.821z"/>
</svg>
</div>
<div class="noen-header">
<h1 onClick="scrollToItem(3)">Overview</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- ##### Header Area End ##### -->
<!-- ##### Featured Post Area Start ##### -->
<div class="featured-post-area">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-12">
<%- news_item %>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function goBackToOverview() {
location.href = '/';
}
</script>
<!-- ##### All Javascript Files ##### -->
<!-- jQuery-2.2.4 js -->
<script src="javascripts/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="javascripts/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="javascripts/bootstrap.min.js"></script>
<!-- All Plugins js -->
<script src="javascripts/plugins.js"></script>
<!-- Active js -->
<script src="javascripts/active.js"></script>
</html>
它说：Loading failed for the <script> with the source "http://localhost:3000/article/javascripts/jquery-2.2.4.min.js".
我认为问题在于路径名称（文章）被添加到路径中。你的意见/解决方案是什么？
解决方案
推荐阅读
- python - 如何在python中拆分数组中的每个值？
- vba - 如何将 Outlook 邮件转换为保持双字节字符集的文本？
- angular - 如何解析上传文件的 MIDI 内容？
- reactjs - 父状态更改时子组件不更新
- php - 使用带有 FileType 的转换器
- excel - VBA 代码无法很好地跨多个工作簿进行复制和粘贴
- c++ - C++ 和 SDL2 网格移动太快
- android - 使用 ConstraintLayout 在横向模式下居中对齐 ImageButton
- python - 如何获取嵌套列表python中每列的最大值？
- c++ - 为什么在公共数据成员之前使用“静态”关键字？