【问题标题】:node.js - need to validate my input fieldnode.js - 需要验证我的输入字段
【发布时间】:2022-01-04 23:16:31
【问题描述】:

我正在参加 Udemy 的代码训练营。

挑战是使用 Node.js 和 ejs 创建一个博客站点。我已经完成了挑战,并且博客网站正常工作。但是,我想改变一件事,我正在努力寻找可行的解决方案。

我的 app.js 文件会将我在撰写页面中创建的帖子“推送”到主页,然后将我重定向到那里。然后主页在 100 个字符后给了我一个“...阅读更多”。如果帖子的标题中包含“/”,例如“1/2/22”,那么当我单击阅读更多按钮时,我会收到错误“无法获取 /posts/1/2/22”。我了解为什么会出现此错误,因此我希望有人能帮助我防止有人在输入字段中输入“/”或其他特殊字符。

我尝试了正则表达式,但无法正常工作。

<!-- My home page -->

<h1>Home</h1>
  <p>
    <%= startingContent %>
  </p>


  <% posts.forEach(function(post){ %>

    <h1>
      <%=post.title%>
    </h1>
    <p>
      <%=post.content.substring(0, 100) + " ..." %>
        <a href="/posts/<%= post.title %>">Read More</a>
    </p>


    <% }) %>
<!--  this is the page to type the post and submit it -->
<h1>Compose</h1>
    <form class="" action="/compose" method="post">
      <div class="form-group">
        <label>Title</label>
        <input class="form-control" type="text" name="postTitle">
        <label>Post</label>
        <textarea class="form-control" name="postBody" rows="5" cols="30"></textarea>
      </div>
      <button class="btn btn-primary" type="submit" name="button">Publish</button>
    </form>
//app.js file

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const _ = require("lodash");
const port = 3000;

const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a iaculis at erat pellentesque adipiscing.";
const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui.";
const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero.";

const app = express();

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

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

let posts = [];

app.get("/", (req, res) => {
  res.render("home", {
    startingContent: homeStartingContent,
    posts: posts
  });
});

app.get("/about", (req, res) => {
  res.render("about", {
    aboutContent: aboutContent
  });
});

app.get("/contact", (req, res) => {
  res.render("contact", {
    contactContent: contactContent
  });
});

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

app.post("/compose", (req, res) => {
  const post = {
    title: req.body.postTitle,
    content: req.body.postBody
  };

  posts.push(post);
  res.redirect("/");

});

app.get("/posts/:postName", (req, res) => {
  const requestedTitle = _.lowerCase(req.params.postName);

  posts.forEach((post) => {
    const storedTitle = _.lowerCase(post.title);

    if (storedTitle === requestedTitle) {
      res.render("post", {
        title: post.title,
        content: post.content
      });
    }
  });

});

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

【问题讨论】:

  • 如果这是一个有效的帖子,编码参数是否更有意义?

标签: javascript node.js express ejs


【解决方案1】:

'无法获取 /posts/1/2/22'

你要么 app.get("/posts/:postName(*)"

参考:Solution

【讨论】:

  • 由于标题中的 /,我得到了 cannot GET 错误。但是如果我要执行 app.get("/posts/:postName(*),我是否要插入一些东西来代替 *?对不起,如果这是一个愚蠢的问题。我还是节点和表达的新手。实际上我很新所有这一切,所以任何澄清都是有帮助的。
  • 假设发生的情况是,如果您执行 /posts/:postName(*) ,然后如果您使用 /posts/1/2/22 访问,那么您的 req.params.postName 等于“ /1/2/22" 类型的字符串。这是未经测试的我。
  • 在 /posts/:postName 末尾添加 (*) 有效。谢谢!
猜你喜欢
  • 2015-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-05-23
  • 1970-01-01
相关资源
最近更新 更多