Question

我正在尝试使用1-3-5规则制作待办事项，因此我创建了三个html表单，并希望将它们存储在三个不同的数组中。但是我看来.ejs文件只能访问task数组，但无法识别task3和task5。

运行代码时，浏览器返回：未定义task3。我不知道为什么，请帮忙！谢谢！

index.js（控制器）

var express = require("express");
var bodyParser = require("body-parser");

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
//render css files
app.use(express.static("public"));

//placeholders for added task
var task = [];
var task3 = [];
var task5 = [];
//placeholders for removed task
var complete = [];

//post route for adding new task
app.post("/addtask", function(req, res) {
    var newTask = req.body.newtask;
    task.push(newTask);
    res.redirect("/");
});

app.post("/addtask3", function(req, res) {
    var newTask = req.body.newtask3;
    task3.push(newTask);
    res.redirect("/");
});

app.post("/addtask5", function(req, res) {
    var newTask = req.body.newtask5;
    task5.push(newTask);
    res.redirect("/");
});

app.post("/completetask", function(req, res) {
    var completeTask = req.body.check;
    //check for the "typeof" the different completed task, then add into the complete task
    if (typeof completeTask === "string") {
        complete.push(completeTask);
        //check if the completed task already exits in the task when checked, then remove it
        task.splice(task.indexOf(completeTask), 1);
    } else if (typeof completeTask === "object") {
        for (var i = 0; i < completeTask.length; i++) {
            complete.push(completeTask[i]);
            task.splice(task.indexOf(completeTask[i]), 1);
        }
    }
    res.redirect("/");
});

app.post("/removetask", function(req, res) {
    var removeTask = req.body.check;
    //check for the "typeof" the different completed task, then add into the complete task
    if (typeof removeTask === "string") {
        task.splice(task.indexOf(removeTask), 1);
    } else if (typeof removeTask === "object") {
        for (var i = 0; i < removeTask.length; i++) {
            task.splice(task.indexOf(removeTask[i]), 1);
        }
    }
    res.redirect("/");
});

//render the ejs and display added task, completed task
app.get("/", function(req, res) {
    res.render("index", { task: task, complete: complete });
});

//set app to listen on port 3000
app.listen(3000, function() {
    console.log("server is running on port 3000");
});

index.ejs（查看器）

<html>
<head>
<title> ToDo App </title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
    <link href="/styles.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1> ToDo List </h1>
<h2> 1 Big Thing </h2>
<form method="POST">
<p />
<input type="text" name="newtask" placeholder="add big task">
<button formaction="/addtask"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
<% for( var i = 0; i < task.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task[i] %>" /> <%= task[i] %> </li>
<% } %>

<h2> 3 Medium Things </h2>
<p />
<input type="text" name="newtask3" placeholder="add medium task">
<button formaction="/addtask3"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
<% for( var i = 0; i < task3.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task3[i] %>" /> <%= task3[i] %> </li>
<% } %>

<h2> 5 Small Things </h2>
<p />
<input type="text" name="newtask5" placeholder="add small task">
<button formaction="/addtask5"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
</form>
<% for( var i = 0; i < task5.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task5[i] %>" /> <%= task5[i] %> </li>
<% } %>

<h2> Completed task </h2>

 <% for(var i = 0; i < complete.length; i++){ %>
    <li><input type="checkbox" checked><%= complete[i] %> </li>
<% } %>

</div>

</body>
</html>

Answer 1

您的问题在于发送给视图的内容

app.get("/", function(req, res) {
  res.render("index", { task: task, complete: complete });
});

你看到了吗？您正在渲染视图索引，并向其中传递了两个对象task和complete。然后，在您看来，您尝试访问task3，但从未发送过它。为了使代码运行，您应该将此行更改为

app.get("/", function(req, res) {
  res.render("index", { task: task, task3: task3, task5: task5, complete: complete });
});

或者，如果您使用的是现代版本的节点，

app.get("/", function(req, res) {
  res.render("index", { task, task3, task5, complete });
});

Answer 2

因为呈现页面时，您仅从服务器发送任务，而没有发送task3和task5，因此也需要发送它们。

之前

//render the ejs and display added task, completed task
app.get("/", function(req, res) {
    res.render("index", { task: task, complete: complete });
});

应该是下面的样子

//render the ejs and display added task, completed task
app.get("/", function(req, res) {
    res.render("index", { task: task,task3:task3, task5:task5, complete: complete });

}）;

我在index.js文件中定义了三个数组，但是index.ejs文件只能标识第一个数组？

2 个答案: