如何在 ejs 文件、nodeJS 应用程序中包含 JS 脚本?

Thé*_*o.B 5 html javascript node.js embedded-javascript

我正在openclassroom上做 NodeJS 教程。\n我使用模板引擎ejs。我尝试运行一个简单的 JS 脚本,但我不能。

\n\n

这是我的应用程序结构:

\n\n
App_toDoList/\n\xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80app.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80package.json\n\xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules/\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views/\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 modify.ejs\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 todo.ejs\n
Run Code Online (Sandbox Code Playgroud)\n\n

我运行我的服务器app.js

\n\n
var express = require(\'express\');\nvar session = require(\'cookie-session\'); // Charge le middleware de sessions\nvar bodyParser = require(\'body-parser\'); // Charge le middleware de gestion des param\xc3\xa8tres\nvar urlencodedParser = bodyParser.urlencoded({ extended: false });\n\nvar app = express();\n\n\n/* On utilise les sessions */\napp.use(session({secret: \'todotopsecret\'}))\n\n\n/* S\'il n\'y a pas de todolist dans la session,\non en cr\xc3\xa9e une vide sous forme d\'array avant la suite */\n.use(function(req, res, next){\n    if (typeof(req.session.todolist) == \'undefined\') {\n        req.session.todolist = [];\n    }\n    next();\n})\n\n/* On affiche la todolist et le formulaire */\n.get(\'/todo\', function(req, res) {\n    res.render(\'todo.ejs\', {todolist: req.session.todolist});\n})\n\n/* On ajoute un \xc3\xa9l\xc3\xa9ment \xc3\xa0 la todolist */\n.post(\'/todo/add/\', urlencodedParser, function(req, res) {\n    if (req.body.newtodo != \'\') {\n        req.session.todolist.push(req.body.newtodo);\n    }\n    res.redirect(\'/todo\');\n})\n\n/* Supprime un \xc3\xa9l\xc3\xa9ment de la todolist */\n.get(\'/todo/delete/:id(\\\\d+)\', function(req, res) {\n    if (req.params.id != \'\') {\n        req.session.todolist.splice(req.params.id, 1);\n    }\n    res.redirect(\'/todo\');\n})\n\n.get(\'/todo/modify/:id(\\\\d+)\',function(req,res){\n  if (req.params.id != \'\') {\n    res.render(\'modify.ejs\', {index: req.params.id, toModify: req.session.todolist[req.params.id]})\n  }\n})\n\n.post(\'/todo/modified/:id(\\\\d+)\', urlencodedParser, function(req, res) {\n    if (req.body.modifytodo != \'\') {\n        req.session.todolist[req.params.id]=req.body.modifytodo;\n    }\n    res.redirect(\'/todo\');\n})\n/* On redirige vers la todolist si la page demand\xc3\xa9e n\'est pas trouv\xc3\xa9e */\n.use(function(req, res, next){\n    res.redirect(\'/todo\');\n})\n\n.listen(8080);\n
Run Code Online (Sandbox Code Playgroud)\n\n

你可以看到我调用渲染 todo.ejs :

\n\n
<!DOCTYPE html>\n\n<html>\n\n<head>\n  <title>Ma todolist</title>\n  <style>\n    a {\n      text-decoration: none;\n      color: black;\n    }\n  </style>\n      <script src="/js/myJS.js"></script>\n</head>\n\n<body>\n  <h1>Ma todolist</h1>\n\n  <ul>\n    <% todolist.forEach(function(todo, index) { %>\n      <li>\n        <a href="/todo/delete/<%= index %>">\xe2\x9c\x98</a>\n        <%= todo %>\n          <a href="/todo/modify/<%= index %>">\xef\xb8\x8f</a>\n      </li>\n      <% }); %>\n  </ul>\n\n  <form action="/todo/add/" method="post">\n    <p>\n      <label for="newtodo">Que dois-je faire ?</label>\n      <input type="text" name="newtodo" id="newtodo" autofocus />\n      <input type="submit" />\n    </p>\n  </form>\n\n  <input type="text" name="date" id="date">\n\n\n\n</body>\n\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

我的问题是 myJS.js 脚本无法运行。其中只有一个alert(\'hello\'),我的浏览器(Firefox)上没有任何警报

\n\n

问题是,如果我将 todo.ejs 保存在 todo.html 中(我删除了 ejs 部分),则会出现警报。

\n\n

我担心问题来自我的节点服务器处理目录的方式。我发现了这个,但它对我没有多大帮助。

\n\n

如果您有任何想法或问题,请随时告诉我。我是 JS、节点等方面的初学者,所以解决方案可能很简单。

\n\n

谢谢

\n

Thé*_*o.B 4

好吧,我发现我的错误了。我从未向我的节点服务器说明静态文件在哪里。我app.use(express.static('public'));在会话行上方添加了这一行。我'/public'在旁边创建一个文件夹app.js

这样,当ejs模板需要图像、CSS 或 JS时,我的服务器会发送文件