Javascript 使用ejs模板获取通过输入发布到同一页面的值_Javascript_Node.js_Ejs

Javascript 使用ejs模板获取通过输入发布到同一页面的值

javascript node.js

Javascript 使用ejs模板获取通过输入发布到同一页面的值,javascript,node.js,ejs,Javascript,Node.js,Ejs,我试图通过使用node.js和ejs模板将从输入中获得的值发布到同一页面。模板用于传递页面标题，但是当我尝试传递从输入中获得的值时，它不起作用。它说“字幕”数组没有定义。这让我有点困惑。你能帮我吗 app.js const express = require('express'); const parser = require('body-parser'); const path = require('path'); const app = express(); app.use(parser.

我试图通过使用node.js和ejs模板将从输入中获得的值发布到同一页面。模板用于传递页面标题，但是当我尝试传递从输入中获得的值时，它不起作用。它说“字幕”数组没有定义。这让我有点困惑。你能帮我吗

app.js

const express = require('express');
const parser = require('body-parser');
const path = require('path');
const app = express();

app.use(parser.urlencoded({ extended: false }));
app.use(parser.json());

app.use((req, res, next) => {
    res.locals.userValue = null;
    next();
})

app.set('view engine', 'ejs');
app.set('views', 'views');

app.get('/', (req, res, next) => {
    res.render('index', {
        topicHead: 'Subtitles Page',
    });
    console.log('Home Page!');
})

app.post('/subtitle/add', (req, res, next) => {
    let subtitles = [];
    sub_title: req.body.subtitleInput
    subtitles.push(sub_title)
    console.log(subtitles);
    res.render('index', {
        subtitles,
        topicHead: 'Subtitles Page'
    });
});

app.listen(3000, () => {
    console.log('Server running on port 3000')
})

index.ejs

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <main>
        <h1><%= topicHead %></h1>
        <form name="form1" method="POST" action="/subtitle/add">
            <table>
                <tr>
                    <td>Subtitle</td>
                    <td><input type="text" name="subtitleInput"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="Save"></td>
                </tr>
            </table>
        </form>
            <% for (let sub of subtitles) { %>
                <h1><%= sub %></h1>
            <% } %>
    </main>
</body>

</html>


文件
字幕

我得到的错误

ReferenceError: D:\code\getSub\views\index.ejs:25
    23|             </table>

    24|         </form>

 >> 25|             <% for (let sub of subtitles) { %>

    26|                 <h1><%= sub %></h1>

    27|             <% } %>

    28|     </main>


subtitles is not defined
    at eval (eval at compile (D:\code\getSub\node_modules\ejs\lib\ejs.js:633:12), <anonymous>:14:24)
    at returnedFn (D:\code\getSub\node_modules\ejs\lib\ejs.js:668:17)
    at tryHandleCache (D:\code\getSub\node_modules\ejs\lib\ejs.js:254:36)
    at View.exports.renderFile [as engine] (D:\code\getSub\node_modules\ejs\lib\ejs.js:485:10)
    at View.render (D:\code\getSub\node_modules\express\lib\view.js:135:8)
    at tryRender (D:\code\getSub\node_modules\express\lib\application.js:640:10)
    at Function.render (D:\code\getSub\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (D:\code\getSub\node_modules\express\lib\response.js:1012:7)
    at D:\code\getSub\app.js:18:9
    at Layer.handle [as handle_request] (D:\code\getSub\node_modules\express\lib\router\layer.js:95:5)

ReferenceError:D:\code\getSub\views\index.ejs:25
23|             
24|         
>> 25|             
26|                 
27|             
28|     
字幕没有定义
评估时（编译时评估）（D:\code\getSub\node\u modules\ejs\lib\ejs.js:633:12），：14:24）
在returnedFn处（D:\code\getSub\node\u modules\ejs\lib\ejs.js:668:17）
在tryHandleCache（D:\code\getSub\node\u modules\ejs\lib\ejs.js:254:36）
在View.exports.renderFile[作为引擎]（D:\code\getSub\node\u modules\ejs\lib\ejs.js:485:10）
在View.render（D:\code\getSub\node\u modules\express\lib\View.js:135:8）
在tryRender（D:\code\getSub\node\u modules\express\lib\application.js:640:10）
位于Function.render（D:\code\getSub\node\u modules\express\lib\application.js:592:3）
在ServerResponse.render（D:\code\getSub\node\u modules\express\lib\response.js:1012:7）
在D:\code\getSub\app.js:18:9
在Layer.handle[作为handle\u请求]（D:\code\getSub\node\u modules\express\lib\router\Layer.js:95:5）

此行中存在问题

子标题：req.body.subtitleInput

也许您需要这样的

let sub_title=req.body.subtitle输入以保存值。
无论如何，你不需要它，你可以像这样直接按下输入值
let subtitles = [];
subtitles.push(req.body.subtitleInput)
console.log(subtitles);
res.render('index', {
    subtitles,
    topicHead: 'Subtitles Page'
});

此外，您必须检查字幕
是否未定义，因为您使用的是相同的ejs文件
<% if (locals.subtitles){ %>
    <% subtitles.forEach(function (sub) { %>
        <h1><%= sub %></h1>
    <% }) %>
<% } %>

此行中存在问题子标题：req.body.subtitleInput


也许您需要这样的let sub_title=req.body.subtitle输入以保存值。
无论如何，你不需要它，你可以像这样直接按下输入值
let subtitles = [];
subtitles.push(req.body.subtitleInput)
console.log(subtitles);
res.render('index', {
    subtitles,
    topicHead: 'Subtitles Page'
});

此外，您必须检查字幕
是否未定义，因为您使用的是相同的ejs文件
<% if (locals.subtitles){ %>
    <% subtitles.forEach(function (sub) { %>
        <h1><%= sub %></h1>
    <% }) %>
<% } %>


谢谢您的帮助。但每当我将一个值推送到数组时，它就会替换现有的值，所以它不会推。为什么会发生这种情况？这是因为在每一篇新文章中，您的代码都会创建一个新数组let subtitles=[]。如果你想保留以前的帖子，你必须将输入数据保存在数据库中。你说得对，我错过了。我将数组移到app.post之外。有了这些，现在一切都好了。谢谢你的帮助。但每当我将一个值推送到数组时，它就会替换现有的值，所以它不会推。为什么会发生这种情况？这是因为在每一篇新文章中，您的代码都会创建一个新数组let subtitles=[]。如果你想保留以前的帖子，你必须将输入数据保存在数据库中。你说得对，我错过了。我将数组移到app.post之外。有了这些，现在一切都好了。谢谢你的帮助。