Node Express 在不重新加载的情况下验证表单提交但显示验证错误

Question

我认为我错过了一个基本概念，并且可能在这里重新发明轮子。我正在构建一个允许用户发表评论的网络应用程序。我正在使用 EJS、Node、Express、Postgres。索引页面是顶部的 Web 表单，带有提交按钮，用于向数据库发布评论。索引页面的下半部分是数据库中的最后 15 条评论。

在页面加载的初始获取请求中，将查询数据库中最后 15 条记录，这些记录显示在表单下方的表格中。当最终用户填写表单并通过验证时，它会发布到数据库并重定向到成功页面。

我的问题是表单验证失败。当它失败时，我将服务器端的错误消息收集到一个名为 alert 的数组中。然后我尝试重新渲染页面以通过输入字段显示这些错误消息。我意识到现在我还必须从数据库中获取这 15 条记录，以便重新呈现表单下方的表格。

正如我在这里所写的，我在获取查询结果时遇到了问题。当我在调试器中运行代码时，它会跳过“arr[1] = getRecords(15)”这一行。因此，当它渲染页面时， arr[1] 以未定义的形式返回，因为 getRecords 函数从未执行过。我怀疑这是异步/同步执行的问题，但我不够熟练，不知道如何解决它。

谁能帮我弄清楚如何让这个实现工作，但我是否过于复杂了？仅仅因为表单验证失败而查询数据库似乎很浪费。似乎应该有一种方法来保留最初呈现的表格，并只呈现与表单验证相关的错误消息。但我无法通过谷歌搜索找到解决方案。

我对从数据库加载数据的索引的初始获取请求

app.get('',async (req,res)=>{

console.log("hello world?")
const lastTwenty = await pool.query("select *,  TO_CHAR(reviewdate,\'MM-DD-YYYY\') from reviews ORDER BY id DESC LIMIT 15")

const reformattedDates = lastTwenty.rows.map((r)=>{
    r.reviewdate = dayjs(r.reviewdate).format('MM/DD/YYYY')
    return r
})

reformattedDates.forEach((rec)=>{
    console.log("revised dates "+ rec.reviewdate)
})

res.render('index', {reviewData: reformattedDates})

})

我的帖子请求来自同一页面上的表单，该表单在让帖子通过之前执行验证

app.post( '/添加记录', urlencodedParser, check('name', '用户名必须是3个字符') .exists() .isLength({min:3}), check('company', '公司名称不能为空或大于50个字符') .exists() .isLength({min:3}) .isLength({max:50}), check('country', '国家不能为空或大于 50 字符') .exists() .isLength({min:3}) .isLength({max:50}), check('state', '州/省名称不得为空或大于 50 个字符') .exists() .isLength({min:2}) .isLength({max:50}), check('review', '评论故事不能为空白或大于 1000 字符') .exists() .isLength({min:3}) .isLength({max:1000}),

 (req,res)=>{
    const errors = validationResult(req)
    if(!errors.isEmpty()){
        //return res.status(422).jsonp(errors.array())
        const alert = errors.array()
        let arr = ['','']
        arr[1] = getRecords(15)
        .then(
            
            res.render('index',{data: {alert: arr[0] = alert, reviewData:arr[1]}})
        )

    }else{
            const {name, company, state, country, review} = req.body
            const reviewdate = dayjs().format('MM/DD/YYYY')
            console.log("todays date is ", typeof reviewdate)
            const newRecord = pool.query("insert into reviews(rName, rCompany, rState, rCountry, rReview, reviewDate) VALUES ($1, $2, $3, $4, $5, $6)",
            [name, company, state, country, review, reviewdate])
            console.log("posting to db")    
            res.render('success', {text:"many success"})
        //res.render('success',{text:'success'})
    }})

    let getRecords = async (alert) => {
        console.log("in get record and qty is ",qtyRecords)
        const queryOutput = await pool.query("select *,  TO_CHAR(reviewdate,\'MM-DD-YYYY\') from reviews ORDER BY id DESC LIMIT 15")
        const reformattedOutput = queryOutput.rows.map((r)=>{
            r.reviewdate = dayjs(r.reviewdate).format('MM/DD/YYYY')
            return r 
        }) 
        return reformattedOutput
    }

Answer 1

我重写了帖子以按照以下方式处理表单验证失败。添加 async 和 try 块似乎可以解决问题。

 (req,res)=>{
    const errors = validationResult(req)
    if(!errors.isEmpty()){
        //return res.status(422).jsonp(errors.array())
        const alert = errors.array()

        async function reRender(alert){
            try{
            const output = await getRecords(15);
            res.render('index', {data: {alert: alert, reviewData: output}})

            }
            catch(e){
                console.log('catch error ',e)
            }         
        }
        reRender(alert);
    }
    else{
            const {name, company, state, country, review} = req.body
            const reviewdate = dayjs().format('MM/DD/YYYY')
            console.log("todays date is ", typeof reviewdate)
            const newRecord = pool.query("insert into reviews(rName, rCompany, rState, rCountry, rReview, reviewDate) VALUES ($1, $2, $3, $4, $5, $6)",
            [name, company, state, country, review, reviewdate])
            console.log("posting to db")    
            res.render('success', {text:"many success"})
        //res.render('success',{text:'success'})
    }
 }