node.js - 从 express-handlebars 文件链接到 Javascript 文件
问题描述
视窗 10
VSCode 1.55.2
Node.js v14.15.5
快递 v4.17.1
Express-handlebars v5.3.0
我有一个使用 express-handlebars 的 Express 应用程序，我可以链接到我的样式表，但我无法链接到我的 JavaScript 文件，没有错误，它只是不执行。javascript 文件创建此日历： https ://jsfiddle.net/bsvLenpj/
这是我的文件夹结构：
应用程序.js
import path from 'path';
import {fileURLToPath} from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
import express from 'express'
import routes from './routes/calendarRouter.js'
import dotenv from 'dotenv'
import exphbs from 'express-handlebars'
dotenv.config()
const port = process.env.PORT || 3000
const app = express()
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: '.hbs'
}));
app.set('view engine', 'hbs');
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('./public/javascript',express.static(path.join(__dirname, './public/javascript')));
app.use("/", routes)
app.listen(port, () =>
console.log('App listening on port 3000')
)
主文件
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../public/css/style.css">
<script src="../../public/javascript/calendar.js"></script>
<title>Test</title>
</head>
<body>
{{{body}}}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
主页.hbs
<script src="../public/javascript/calendar.js"></script>
<table class="table table-bordered vh-100">
<thead>
<tr id="monthHeader">
<th colspan="7" id="header" class="text-center">
<div class="container">
<div id="logbookContainer">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="60" height="60" id="logbook"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"
enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata>
Svg Vector Icons : http://www.onlinewebfonts.com/icon
</metadata>
<g>
<g transform="translate(0.000000,253.000000) scale(0.100000,-0.100000)">
<path
d="M1434.5,2386.8c-106.5-94.6-110.4-106.5-122.2-548.2l-15.8-453.5l-504.8-15.8c-418-7.9-516.6-23.6-583.7-82.8C50.3,1144.5,70,758,239.5,667.3c39.4-23.7,295.8-39.4,567.9-39.4h496.9V-42.6v-670.4H803.5c-556.1-4-623.1-23.7-682.3-236.6c-51.3-173.5-7.9-343.1,110.4-433.8c86.8-67.1,157.8-78.9,583.7-78.9h489v-670.4v-670.4h-489c-461.4,0-500.9-7.9-599.5-90.7c-90.7-78.9-106.5-126.2-106.5-284s15.8-205.1,106.5-284c98.6-82.8,138-90.7,599.5-90.7h489v-650.7V-4854H803.5c-556.1-3.9-623.1-23.6-682.3-236.6c-51.3-173.5-7.9-343.1,110.4-433.8c86.8-67.1,157.8-78.9,583.7-78.9h489v-433.8c0-500.9,47.3-638.9,240.6-706c86.7-27.6,678.3-43.4,1810.2-43.4h1684l67,307.6l67.1,303.7l1790.5,2267.7l1790.5,2267.7l3.9,1940.4c0,1064.8-11.8,1967.9-23.7,2003.4c-71,177.5-35.5,177.5-3719,177.5H1544.9L1434.5,2386.8z M2392.9,1282.5c272.1-272.1,122.3-678.3-272.1-721.7c-169.6-19.7-193.3-11.8-323.4,118.3c-118.3,118.3-138,165.6-138,315.5c0,145.9,19.7,201.1,122.3,299.7c98.6,102.5,153.8,122.3,299.7,122.3C2231.2,1416.6,2278.5,1396.9,2392.9,1282.5z M2274.5-697.3c307.6-145.9,335.2-615.2,47.3-753.3c-161.7-78.9-220.8-86.8-362.8-47.3c-189.3,51.3-299.7,201.1-299.7,406.2c0,193.2,82.8,327.3,252.4,402.3C2073.4-622.4,2112.8-622.4,2274.5-697.3z M2290.3-2783.5c319.4-165.6,307.6-631-23.7-788.8c-287.9-134.1-607.3,67.1-607.3,382.6c0,197.2,51.3,291.8,209,386.5C2022.1-2708.6,2136.5-2704.7,2290.3-2783.5z M2333.7-4865.8c228.7-153.8,256.3-465.4,55.2-666.5c-276.1-276.1-729.6-78.9-729.6,315.5C1659.3-4858,2030-4660.8,2333.7-4865.8z" />
<path
d="M8931.6-1687.2c-106.5-126.2-213-256.3-240.6-291.8c-47.3-55.2,0-102.5,358.9-386.5c224.8-173.5,418-319.5,429.8-319.5c7.9,0,110.5,118.3,220.9,260.3c284,370.7,276.1,422-98.6,721.7c-173.5,138-339.2,240.6-394.4,240.6C9148.6-1462.4,9057.9-1533.3,8931.6-1687.2z" />
<path
d="M8482-2231.4c-23.6-31.5-39.4-71-31.5-94.6c15.8-51.3,765.1-635,812.4-635c31.6,0,86.8,86.8,86.8,138c0,11.8-587.6,481.2-753.2,599.5C8541.2-2184.1,8521.5-2184.1,8482-2231.4z" />
<path
d="M6825.7-4345.3c-804.5-1021.5-1451.3-1873.3-1431.6-1889.1c138-122.2,808.5-634.9,816.4-623.1c7.9,3.9,670.4,851.8,1478.9,1877.2S9152.5-3106.9,9144.6-3103c-3.9,3.9-185.3,145.9-398.3,311.5s-402.3,303.7-422,303.7C8304.6-2487.8,7630.2-3323.8,6825.7-4345.3z" />
<path
d="M7634.1-5311.5C7026.8-6080.5,6522-6731.3,6518-6751c-11.8-23.7,354.9-35.5,1013.6-27.6l1029.3,11.8l98.6,98.6l98.6,102.5l-7.9,1329.1l-11.8,1325.1L7634.1-5311.5z" />
<path
d="M5252.1-6589.3c-59.2-280-63.1-280,149.9-441.7l193.2-149.9l220.9,102.5c122.2,55.2,220.8,106.5,220.8,114.4c0,15.8-705.9,571.8-725.6,571.8C5303.4-6392.1,5275.8-6482.8,5252.1-6589.3z" />
<path
d="M5129.8-7117.8c0-27.6-11.8-110.4-23.6-177.5l-27.6-126.2l153.8,63.1c205,82.8,205,90.7,74.9,197.2C5173.2-7050.7,5129.8-7038.9,5129.8-7117.8z" />
</g>
</g>
</svg>
</div>
<div class="div-1" id="prevContainer">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" id="prev"
class="bi bi-arrow-left-square" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z" />
</svg>
</div>
<div class="div-2">
<h1 id="month"></h1>
<h1 id="year"></h1>
</div>
<div class="div-1" id="nextContainer">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" id="next"
class="bi bi-arrow-right-square" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
</svg>
</div>
</div>
</th> <!-- END 'header' th -->
</tr> <!-- END 'monthHeader' tr -->
<tr class="text-center" id="weekHeader">
<th class="headerDay">Sun</th>
<th class="headerDay">Mon</th>
<th class="headerDay">Tues</th>
<th class="headerDay">Wed</th>
<th class="headerDay">Thur</th>
<th class="headerDay">Fri</th>
<th class="headerDay">Sat</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-modal="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title w-100 text-center" id="exampleModalLabel">Create New Event For:</h2>
</div>
<div class="modal-body text-center">
<form id="eventDateForm">
<div class="form-row" id="eventDateRow">
<div class="col" id="eventDateCol">
<input type="text" readonly class="form-control-plaintext text-center" id="eventDate"
value="Saturday January 2nd">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!-- <div class="btn-toolbar mx-auto"> -->
<button type="button" id="btnSubmit" class="btn btn-lg btn-success">OK</button>
<button type="button" id="btnCancel" class="btn btn-lg btn-danger" onclick="closeModal()">CANCEL</button>
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div>
日历路由器.js
import express from 'express'
const router = express.Router()
router
.route("/")
.get((req, res)=>{
// res.send("hello from the get router")
res.render('home', { msg: 'Some data here'});
})
.post((req, res)=>{
res.send("hello from the post router")
})
export default router
解决方案
推荐阅读
- python - python中的高效搜索算法可在excel工作簿的所有工作表中搜索字符串并返回匹配的工作表编号
- php - 博特曼没有回复
- jquery - 用jquery创建迭代淡入淡出函数的最有效方法是什么
- windows - 如果没有用户登录，则无法通过 Jenkins 运行 COM 应用程序
- java - Jedis 扫描未找到任何密钥
- javascript - 获取元素的所有数据属性及其在jquery中的值
- c# - 如何使用书签添加换行符以在 C# 和 OpenXML 中运行，并带有对齐的文本
- python - Django REST Framework ModelSerializer read_only_fields 不起作用
- asp.net - 错误 400 错误请求 - 单独重定向
- php - 如何在 CanvasJS 图表中显示格式化的日期时间？