无法读取未定义的ExpressJS EJS的属性

时间:2020-09-06 12:57:54

标签: javascript html express ejs backend

请帮助,我是NodeJS的初学者。 我正在创建一个网站,人们可以在其中推广自己的虚拟会议,其他人也可以看到。因此,我使用POST方法创建了一个表单,然后将数据发送到将其推入数组的位置,然后由EJS文件读取该数组。但是这个错误来了:-

TypeError: Cannot read property 'hostName' of undefined

这是我的server.js

const express = require("express");
const ejs = require("ejs");

//create express app
const app = express();
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));

var conferences = [];

//////////////////// ROUTES /////////////////////////
app.get("/", (req, res) => {
  res.render("index.ejs");
});
app.get("/home", (req, res) => {
  res.render("home.ejs", { conferences: conferences });
});
app.get("/conferences/@me", (req, res) => {
  res.render("my_conferences.ejs");
});
app.get("/create/conference", (req, res) => {
  res.render("create.ejs");
});
app.post("/create/conference", (req, res) => {
  console.log(req.body);
  conferences.push({
    hostName: req.body.hostName,
    email: req.body.email,
    topic: req.body.topic,
    date: req.body.date,
    time: req.body.time,
    timezone: req.body.timezone,
    details: req.body.details,
    tags: req.body.tags,
  });
  res.redirect("/home");
});
app.use((req, res, next) => {
  res.send("<h1> Page not found </h1>");
});
/////////////////////////////////////////////////////

//error handling
app.use(function (err, req, res, next) {
  res.send({ error: err.message });
  console.log(err);
});

//listen for requests
app.listen(process.env.port || 4000, function () {
  console.log("Ready...");
});

这是我的create.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/style.css" />
    <title>Confrencia</title>
  </head>
  <body>
    <header>
      <nav class="navbar">
        <div class="nav-heading">Confrencia</div>
        <div>
          <a href="/home">Home</a>
        </div>
        <div>
          <a href="/conferences/@me">My Conferences</a>
        </div>
        <div>
          <a href="/create/conference">Create a Conference</a>
        </div>
      </nav>
    </header>
    <main>
      <form action="/create/conference" method="POST" for="createMeet">
        <h3>Create a Conference</h3>
        <input
          type="text"
          id="hostName"
          name="hostName"
          placeholder="Host Name"
          required
        />
        <input
          type="email"
          id="email"
          name="email"
          placeholder="Email"
          required
        />
        <input
          type="text"
          id="topic"
          name="topic"
          placeholder="Topic of the Virtual Conference"
          required
        />
        <input type="date" id="date" name="date" placeholder="Date" required />
        <input type="time" id="time" name="time" placeholder="Time" required />
        <input
          type="text"
          id="timezone"
          name="timezone"
          placeholder="Timezone"
          required
        />
        <input
          type="text"
          id="details"
          name="details"
          placeholder="Other Details"
        />
        <input type="text" id="tags" name="tags" placeholder="tags" />
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>
</html>

这是home.ejs,将在其中显示内容:-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/style.css" />
    <title>Confrencia</title>
  </head>
  <body>
    <header>
      <nav class="navbar">
        <div class="nav-heading">Confrencia</div>
        <div>
          <a href="/home">Home</a>
        </div>
        <div>
          <a href="/conferences/@me">My Conferences</a>
        </div>
        <div>
          <a href="/create/conference">Create a Conference</a>
        </div>
      </nav>
    </header>
    <main>
        <% for(let i; i<conferences.length; i++){  %>
            <%= var hello = conferences[i] %>
            <%= <div class="conferenceCard">
                <p>
                    <b><%= hello[name] %></b><br>
                    Date: <%= hello[date] %>
                    Time: <%= hello[time] %> <%= hello[timezone] %>
                    <%= hello[details] %>
                </p> 
                <div class="interestButton">Interested?</div>
            </div> %>
        <% } %>
    </main>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

Body Parser丢失

app.use(express.static(__dirname + "/public"));

尝试在命令后添加以下行

const bodyParser = require('body-parser');
app.use(bodyParser.json({limit: '100mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));