空值使用 express 返回数组

Question

我仍在学习 express，所以我是新手，好吧，所以我正在尝试将数据从我创建的表单发送到数组，但不幸的是它向数组返回了一个空值。因此，这些值显示在控制台中“consoe.log”。

HTML 表单页面代码

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>New Movie</h1>
                <form action="/movies" method="POST">
                    <input type="text" placeholder="Movie Title" name="title">
                    <input type="text" placeholder="Movie Img" name="image">
                    <input type="text" placeholder="Movie Date" name="date">
                    <input type="text" placeholder="Movie Time" name="time">
                    <button>Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>

HTML 和 EJS

    <body>
    <div class="container">
        <div class="row">
            <% for (let movie of moviesList) { %>
            <div class="col-md-3">
                <div class="row">
                    <div class="co-12">
                        <%= movie.movieImg %>
                    </div>
                    <div class="col-12">
                        <%= movie.movieTitle %>
                    </div>
                    <div class="col-6">
                        <%= movie.movieDate %>
                    </div>
                    <div class="col-6">
                        <%= movie.movieTime %>
                    </div>
                </div>
            </div>
            <% } %>
        </div>
        <a href="/movies/new">New Movie</a>
    </div>
</body>

App.js 文件

const express = require("express");
const app = express();
const ip = require("ip");
const path = require('path');
const port = 8800;

app.use(express.urlencoded({ extended: true }))
app.use(express.json());
app.set('views', path.join(__dirname, 'views'));
app.set("view engine", "ejs");

// ================ DB ================ //

const moviesList = [
    {
        movieTitle:'Movie 1',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    },
    {
        movieTitle:'Movie 2',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    },
    {
        movieTitle:'Movie 3',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    },
    {
        movieTitle:'Movie 4',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    }
]

// ================ DB ================ //

// ================ Content ================ //
app.get("/movies", (req, res)=>{
    res.render("movies", { moviesList })
})
app.get("/movies/new", (req, res)=>{
    res.render("new-movie")
})
app.post("/movies", (req, res) => {
    const { title, date } = req.body;
    moviesList.push( {title, date})
    console.log(req.body)
    res.redirect("/movies")
})
// ================ Content End ================ //


app.listen(port, ()=>{
    console.log(`Visit: http://localhost:${port}, as for the other devices Visit: http://${ip.address()}:${port}`)
})

这是我现在正在处理的代码..

Answer 1

问题已解决，所以我 re-read 多次仔细地编写代码，问题出在表单名称属性值和 json 数组键或 (app.post). 下面是我编辑和更新的代码。

HTML 表单页面代码

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>New Movie</h1>
                <form action="/movies" method="POST">
                    <input type="text" placeholder="Movie Img" name="movieImg">
                    <input type="text" placeholder="Movie Title" name="movieTitle">
                    <input type="text" placeholder="Movie Date" name="movieDate">
                    <input type="text" placeholder="Movie Time" name="movieTime">
                    <button>Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>

App.js 文件

const express = require("express");
const app = express();
const ip = require("ip");
const path = require('path');
const port = 8800;

app.use(express.urlencoded({ extended: true }))
app.use(express.json());
app.set('views', path.join(__dirname, 'views'));
app.set("view engine", "ejs");

// ================ DB ================ //

const moviesList = [
    {
        movieTitle:'Movie 1',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    },
    {
        movieTitle:'Movie 2',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    },
    {
        movieTitle:'Movie 3',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    },
    {
        movieTitle:'Movie 4',
        movieImg: 'Movie Image Link',
        movieDate: '2021',
        movieTime: '100 min'
    }
]

// ================ DB ================ //

// ================ Content ================ //
app.get("/movies", (req, res)=>{
    res.render("movies", { moviesList })
})
app.get("/movies/new", (req, res)=>{
    res.render("new-movie")

})
app.post("/movies", (req, res) => {
    const { movieTitle, movieImg, movieDate, movieTime } = req.body;
    moviesList.push({movieTitle, movieImg, movieDate, movieTime})
    console.log(req.body)
    console.log(moviesList)
    res.redirect("/movies")
})
// ================ Content End ================ //


app.listen(port, ()=>{
    console.log(`Visit: http://localhost:${port}, as for the other devices Visit: http://${ip.address()}:${port}`)
})

空值使用 express 返回数组

Empty Values is returning to an array using express

html

ejs

node.js

express