如何在 ejs 文件、nodeJS 应用程序中包含 JS 脚本?
How to include a JS script in a ejs file, nodeJS app?
我正在 openclassroom 上学习 nodeJS tuto。
我使用模板引擎ejs
。我尝试 运行 一个简单的 JS 脚本,但我做不到。
这是我的应用程序结构:
App_toDoList/
│
├──app.js
├──package-lock.json
├──package.json
│
├── js/
├── node_modules/
└── views/
├── modify.ejs
└── todo.ejs
我 运行 我的服务器 app.js
:
var express = require('express');
var session = require('cookie-session'); // Charge le middleware de sessions
var bodyParser = require('body-parser'); // Charge le middleware de gestion des paramètres
var urlencodedParser = bodyParser.urlencoded({ extended: false });
var app = express();
/* On utilise les sessions */
app.use(session({secret: 'todotopsecret'}))
/* S'il n'y a pas de todolist dans la session,
on en crée une vide sous forme d'array avant la suite */
.use(function(req, res, next){
if (typeof(req.session.todolist) == 'undefined') {
req.session.todolist = [];
}
next();
})
/* On affiche la todolist et le formulaire */
.get('/todo', function(req, res) {
res.render('todo.ejs', {todolist: req.session.todolist});
})
/* On ajoute un élément à la todolist */
.post('/todo/add/', urlencodedParser, function(req, res) {
if (req.body.newtodo != '') {
req.session.todolist.push(req.body.newtodo);
}
res.redirect('/todo');
})
/* Supprime un élément de la todolist */
.get('/todo/delete/:id(\d+)', function(req, res) {
if (req.params.id != '') {
req.session.todolist.splice(req.params.id, 1);
}
res.redirect('/todo');
})
.get('/todo/modify/:id(\d+)',function(req,res){
if (req.params.id != '') {
res.render('modify.ejs', {index: req.params.id, toModify: req.session.todolist[req.params.id]})
}
})
.post('/todo/modified/:id(\d+)', urlencodedParser, function(req, res) {
if (req.body.modifytodo != '') {
req.session.todolist[req.params.id]=req.body.modifytodo;
}
res.redirect('/todo');
})
/* On redirige vers la todolist si la page demandée n'est pas trouvée */
.use(function(req, res, next){
res.redirect('/todo');
})
.listen(8080);
你可以看到我调用渲染 todo.ejs :
<!DOCTYPE html>
<html>
<head>
<title>Ma todolist</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
<script src="/js/myJS.js"></script>
</head>
<body>
<h1>Ma todolist</h1>
<ul>
<% todolist.forEach(function(todo, index) { %>
<li>
<a href="/todo/delete/<%= index %>">✘</a>
<%= todo %>
<a href="/todo/modify/<%= index %>">️</a>
</li>
<% }); %>
</ul>
<form action="/todo/add/" method="post">
<p>
<label for="newtodo">Que dois-je faire ?</label>
<input type="text" name="newtodo" id="newtodo" autofocus />
<input type="submit" />
</p>
</form>
<input type="text" name="date" id="date">
</body>
</html>
我的问题是 myJS.js 脚本没有 运行。其中只有一个 alert('hello')
,我的浏览器 (Firefox) 没有出现任何警报
问题是,如果我将 todo.ejs 保存在 todo.html 中(我删除了 ejs 部分),则会出现警报。
我担心问题出在我的节点服务器处理目录的方式上。我找到了 this,但对我帮助不大。
如果您有任何想法或问题,请随时告诉我。我是 JS、node 等方面的初学者,所以解决方案很容易。
谢谢
好的,我发现了我的错误。我从未向我的节点服务器说明静态文件在哪里。我在会话行上方添加此行 app.use(express.static('public'));
。我在 app.js
旁边创建了一个文件夹 '/public'
这样,我的服务器在ejs
模板需要图像、CSS或JS
时发送文件
我正在 openclassroom 上学习 nodeJS tuto。
我使用模板引擎ejs
。我尝试 运行 一个简单的 JS 脚本,但我做不到。
这是我的应用程序结构:
App_toDoList/
│
├──app.js
├──package-lock.json
├──package.json
│
├── js/
├── node_modules/
└── views/
├── modify.ejs
└── todo.ejs
我 运行 我的服务器 app.js
:
var express = require('express');
var session = require('cookie-session'); // Charge le middleware de sessions
var bodyParser = require('body-parser'); // Charge le middleware de gestion des paramètres
var urlencodedParser = bodyParser.urlencoded({ extended: false });
var app = express();
/* On utilise les sessions */
app.use(session({secret: 'todotopsecret'}))
/* S'il n'y a pas de todolist dans la session,
on en crée une vide sous forme d'array avant la suite */
.use(function(req, res, next){
if (typeof(req.session.todolist) == 'undefined') {
req.session.todolist = [];
}
next();
})
/* On affiche la todolist et le formulaire */
.get('/todo', function(req, res) {
res.render('todo.ejs', {todolist: req.session.todolist});
})
/* On ajoute un élément à la todolist */
.post('/todo/add/', urlencodedParser, function(req, res) {
if (req.body.newtodo != '') {
req.session.todolist.push(req.body.newtodo);
}
res.redirect('/todo');
})
/* Supprime un élément de la todolist */
.get('/todo/delete/:id(\d+)', function(req, res) {
if (req.params.id != '') {
req.session.todolist.splice(req.params.id, 1);
}
res.redirect('/todo');
})
.get('/todo/modify/:id(\d+)',function(req,res){
if (req.params.id != '') {
res.render('modify.ejs', {index: req.params.id, toModify: req.session.todolist[req.params.id]})
}
})
.post('/todo/modified/:id(\d+)', urlencodedParser, function(req, res) {
if (req.body.modifytodo != '') {
req.session.todolist[req.params.id]=req.body.modifytodo;
}
res.redirect('/todo');
})
/* On redirige vers la todolist si la page demandée n'est pas trouvée */
.use(function(req, res, next){
res.redirect('/todo');
})
.listen(8080);
你可以看到我调用渲染 todo.ejs :
<!DOCTYPE html>
<html>
<head>
<title>Ma todolist</title>
<style>
a {
text-decoration: none;
color: black;
}
</style>
<script src="/js/myJS.js"></script>
</head>
<body>
<h1>Ma todolist</h1>
<ul>
<% todolist.forEach(function(todo, index) { %>
<li>
<a href="/todo/delete/<%= index %>">✘</a>
<%= todo %>
<a href="/todo/modify/<%= index %>">️</a>
</li>
<% }); %>
</ul>
<form action="/todo/add/" method="post">
<p>
<label for="newtodo">Que dois-je faire ?</label>
<input type="text" name="newtodo" id="newtodo" autofocus />
<input type="submit" />
</p>
</form>
<input type="text" name="date" id="date">
</body>
</html>
我的问题是 myJS.js 脚本没有 运行。其中只有一个 alert('hello')
,我的浏览器 (Firefox) 没有出现任何警报
问题是,如果我将 todo.ejs 保存在 todo.html 中(我删除了 ejs 部分),则会出现警报。
我担心问题出在我的节点服务器处理目录的方式上。我找到了 this,但对我帮助不大。
如果您有任何想法或问题,请随时告诉我。我是 JS、node 等方面的初学者,所以解决方案很容易。
谢谢
好的,我发现了我的错误。我从未向我的节点服务器说明静态文件在哪里。我在会话行上方添加此行 app.use(express.static('public'));
。我在 app.js
'/public'
这样,我的服务器在ejs
模板需要图像、CSS或JS