无法使用 Ejs 模板制作待办事项列表应用程序答案

【问题标题】：Cannot Make a To-Do-List app using Ejs Templating无法使用 Ejs 模板制作待办事项列表应用程序
【发布时间】：2021-10-13 19:38:45
【问题描述】：

我正在上全栈网络开发课程。我跟随讲师，但他能够在 HTML 表单输入上加上项目符号，但我不能。以前的讲座中有一些不必要的代码。但这是我的代码：

list.ejs

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

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

<body>

  <h1>
    <%= kindOfDay %>
  </h1>
  <ul>
    <li>Buy Ganja</li>
    <li>Roll Ganja</li>
    <li>Smoke Ganja</li>


   <% for(var i=0;i<newListItems.lenth; i++){ %>
       <li> <%= newListItems[i] %></li>
    <% } %>

  </ul>

  <form action="/" method="post">

    <input type="text" name="newItem">
    <button type="submit" name="button">Add</button>

  </form>


</body>

</html>

这是我的服务器文件：

App.js

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
var items = [];

app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/", function (req, res) {
  var today = new Date();

  var options = {
    weekday: "long",
    day: "numeric",
    month: "long",
  };

  var day = today.toLocaleDateString("en-US", options);

  res.render("list", { kindOfDay: day, newListItems: items });
});

app.post("/", function (req, res) {
  var item = req.body.newitem;
  items.push(item);
  res.redirect("/");
});

app.listen(3000, function () {
  console.log("Server Started at Port 3000");
});

这是屏幕截图。我不能在提交表单时加分！

【问题讨论】：

标签： node.js express ejs

【解决方案1】：

const express = require('express');
const app = express();
app.set('view engine','ejs');

app.use(express.urlencoded({extended:true}));

app.get("/",function(req,res){
var today = new Date();
var options = {
    weekday: "long",
    year:"numeric",
    day: "numeric",
    month:"long"
  };
  var day = today.toLocaleDateString("en-US",options);
  res.render("index",{kindOfDay:day,tasks:tasks});
  })

  var tasks = [];

   app.post("/",function(req,res){
   const task = req.body.newItem;
   tasks.push(task);
   res.redirect("/");
   })

  app.listen(3000,function(){
  console.log("Server is running");
  })

  <!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial- 
  scale=1.0">
    <title>To-Do List App</title>
</head>
<body>
    <h1><%= kindOfDay %> </h1>
    <ul>
        <li>Buy Food</li>
        <li>Watch Movies</li>
        <% for(var i=0;i<tasks.length;i++){ %> 
            <li><%= tasks[i] %> </li>
        <% } %>
    </ul>
    <form action="/" method="POST">
        <label for="newItem">Add New Task</label>
        <input type="text" name="newItem" id="newItem">
        <button type="submit">Add</button>
    </form>
</body>
</html>

【讨论】：

这段代码对我有用，试试看
虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。