具有相同功能的两个脚本之间的差异（Express.js / Node.js / EJS）

问题描述 投票：0回答：1

我正在学习一门课程，其中包括一项练习，要求我：

  1. 创建一个 index.ejs 文件，其中包含 h1 以及名字和姓氏的两个输入（表单）
  2. 在index.js 文件中，从表单中获取名字和姓氏值（POST 请求）
  3. 计算全名的字母总数
  4. 更改 h1，显示“您的全名是 xxx 字母长。”

使用 Express.js、Node.js 和 EJS 来传递数据。

这是me开发的解决方案：

  • index.ejs
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Name Letters</title>
</head>

<body>
  <% if (!countLetters) { %>
    <h1>Enter your name here!</h1>
  <% } else { %>
    <h1>There are <%= countLetters %> letters in your name.</h1>
  <% } %>
  
  <form action="/submit" method="POST" autocomplete="off">
    <input type="text" name="fName" placeholder="First name">
    <input type="text" name="lName" placeholder="Last name">
    <input type="submit" value="OK">
  </form>
</body>

</html>
  • index.js
import express from "express";

const app = express();
const port = 3000;

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

let countLetters = 0;

app.get("/", (req, res) => {
  res.render("index.ejs", {countLetters: countLetters});
});

app.post("/submit", (req, res) => {
  const firstName = req.body.fName;
  const lastName = req.body.lName;
  countLetters = firstName.length + lastName.length;
  res.redirect("/");
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

function logger(req, res, next) {
  console.log("Request: " + req.method + " " + req.url);
  next();
}

该解决方案有效，并且不会产生任何类型的错误（我还尝试添加一个记录HTTP请求和相关URL的中间件），但它与老师提出的不同。

这是老师开发的解决方案：

  • index.ejs
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Name Letters</title>
</head>

<body>
  <% if (locals.letterNumber) { %>
    <h1>There are <%= letterNumber %> letters in your name.</h1>
    <% } else { %>
      <h1>Enter your name below 👇</h1>
      <% } %>
        <form action="/submit" method="POST">
          <input type="text" name="fName" placeholder="First name">
          <input type="text" name="lName" placeholder="Last name">
          <input type="submit" value="OK">
        </form>
</body>

</html>
  • index.js
import express from "express";
import bodyParser from "body-parser";

const app = express();
const port = 3000;

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

app.get("/", (req, res) => {
  res.render("index.ejs");
});

app.post("/submit", (req, res) => {
  const numLetters = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { numberOfLetters: numLetters });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

抛开一些小差异，比如使用 bodyParser 而不是express或者他没有创建 logger() 函数（这对我来说很方便）...

...我想知道他为什么这样处理请求/响应（app.get() 和 app.post()）？

做我想做的事情不是更方便、更直观吗？

任何可以澄清我的想法的回复都会受到赞赏。

提前感谢您的回复。

javascript html node.js express ejs
1个回答
0
投票

您的方法有一个缺陷，因为它正在更改全局变量

countLetters
。由于这是全局的，因此向 Express 服务器发出的所有请求都会使用它。这意味着，一旦您设置了一个请求的字母计数，如果其他人向您的页面发出 GET 请求以获取 
/
，那么您的服务器将提取通过前一个请求设置的 
countLetters
值并显示该值。通过计算 
POST
调用中的计数字母逻辑，并传递要从那里渲染的值，您可以继续为特定请求渲染正确的数据。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.