类型错误:无法读取未定义的属性“msg”

时间:2021-04-13 05:40:58

标签: javascript html node.js express

app.js

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");

const app = express();

app.set(bodyParser.urlencoded({extended:false}));
app.set('view engine', 'ejs');
app.use(express.static('public'));

var blogName = "";

app.get("/", function(req, res){
    blogName = "Priyanshu Gupta's Not-So-Secret Diary";
    res.render("index", {titleName : blogName});
})
app.get("/about", function(req, res){
    blogName = "About This Blog";
    res.render("about", {titleName : blogName});
})
app.get("/contact", function(req, res){
    blogName = "Contact Me";
    res.render("contact", {titleName : blogName});
})

app.get("/blog", function(req, res){
    blogName = "Blog Post";
    res.render("blogPage", {titleName : blogName})
})

app.get("/compose", function(req, res){
    res.render("compose")
})

app.post("/contact", (req, res) => {
    console.log(req.body.msg);
})

app.listen(3000, function(){
    console.log("Your server is running on port 3000!");
})

我在这段代码中使用了 express 并得到了类似的错误

TypeError: 无法读取未定义的属性 'msg' 在 F:\Priyanshu\Coding Playground\Web Development\Blog\app.js:36:26 在 Layer.handle [as handle_request] (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\layer.js:95:5) 接下来 (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\route.js:137:13) 在 Route.dispatch (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\route.js:112:3) 在 Layer.handle [as handle_request] (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\layer.js:95:5) 在 F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\index.js:281:22 在 Function.process_params (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\index.js:335:12) 接下来 (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\index.js:275:10) 在 serveStatic (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\serve-static\index.js:75:16) 在 Layer.handle [as handle_request] (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\layer.js:95:5)

联系人.html

<%- include('header') %>

<div class="container mt-4">
    <h1 style="text-align: center;">Contact Me</h1>
    <form action="/contact" method="POST">
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" placeholder="name@example.com" autocomplete="off">
      </div>
      <div class="mb-3">
        <label for="msg" class="form-label">Example textarea</label>
        <textarea class="form-control" name="msg" rows="3" style="margin-top: 0px; margin-bottom: 0px; height: 224px;" required></textarea>
      </div>
      <button type="submit" class="btn btn-success mb-4">Submit</button>
    </form>
</div> 
<%- include('footer') %> 

Body-Parser 无法检测到联系表单中的 msg,请谁能弄清楚我在这里面临的问题是什么

2 个答案:

答案 0 :(得分:0)

您忘记了标头 application/json HTML 表单不支持它,因此您需要一个解决方法。我建议将它与 fetch API 一起使用,然后发布数据或 this。如果是这种情况,仍然不是 100% 有信心,但请尝试这样做。

答案 1 :(得分:0)

HTML 文件中的数据已成功发送,但 app.js 无法解析请求正文。要将数据解析为 JSON 文件,应正确使用 body-parser。当服务器文件按结构划分时,也应该在每个 .js 文件上使用 body-parser。

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

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");

const app = express();

app.set(bodyParser.urlencoded({extended:false}));
app.set('view engine', 'ejs');

//app.use(express.static('public'));

/// try this
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));

var blogName = "";

app.get("/", function(req, res){
    blogName = "Priyanshu Gupta's Not-So-Secret Diary";
    res.render("index", {titleName : blogName});
})
app.get("/about", function(req, res){
    blogName = "About This Blog";
    res.render("about", {titleName : blogName});
})
app.get("/contact", function(req, res){
    blogName = "Contact Me";
    res.render("contact", {titleName : blogName});
})

app.get("/blog", function(req, res){
    blogName = "Blog Post";
    res.render("blogPage", {titleName : blogName})
})

app.get("/compose", function(req, res){
    res.render("compose")
})

app.post("/contact", (req, res) => {
    console.log(req.body.msg);
})

app.listen(3000, function(){
    console.log("Your server is running on port 3000!");
})