无法 POST / (Express, EJS)答案

【问题标题】：Cannot POST / (Express, EJS)无法 POST / (Express, EJS)
【发布时间】：2022-12-12 15:14:29
【问题描述】：

我正在尝试制作一个计算器来计算正方形的体积和面积。但是当我提交表单时，我得到“无法发布/square_volume”或“无法发布/square_area” 如何解决？（请帮助我，因为这是一个学校团体项目，我是唯一一个从事这件事的人）

这是我的HTML方形体积计算表格（square_volume.ejs）

<% if (!locals.data) { %>
<form method="post" action="/square_volume">
    <label><p>Square Width : </p></label>
    <input type="number" name="square_width" step="any"></input>
    <label><p>Square Length : </p></label>
    <input type="number" name="square_length" step="any"></input>
    <label><p>Square Height : </p></label>
    <input type="number" name="square_height" step="any"></input>
    <button class="submitButton">Calculate</button>
</form> <br>
<% } else { %>
        <p>Square Width : <p><%= square_width %></p></p>
        <p>Square Length : <p><%= square_length %></p></p>
        <p>Square Height : <p><%= square_height %></p></p>
        <h1>Square Volume : <p><%= square_volume %></p></h1>
        <button onclick="history.back()">Calculate Again</button>
<% } %>

这是我的JavaScript服务器，使用 Node.js、Express、EJS (app.js)

// PAGES
app.get('/', (req, res) => {
    res.render('shapes_selection')
})
app.get('/square_selection.ejs', (req, res) => {
    res.render('square_selection')
})
app.get('/square_volume.ejs', (req, res) => {
    res.render('square_volume')
})
app.get('/square_area.ejs', (req, res) => {
    res.render('square_area')
})

//CALCULATIONS
if (typeof square_width != 'undefined') {
    app.all('square_volume', (req, res) => {
        let form = req.body
        let data = {}
        if (form.square_width) {
            data = {
                data: true,
                square_width: form.square_width,
                square_length: form.square_length,
                square_height: form.square_height,
                square_volume: numberWithCommas(parseFloat(form.square_width) * parseFloat(form.square_length) * parseFloat(form.square_height))
            }
        }
        res.render('square_volume', data)
    })
} else if (typeof square_side1 != 'undefined') {
    app.all('square_area', (req, res) => {
        let form = req.body
        let data = {}
        if (form.square_side1) {
            data = {
                data: true,
                square_side1: form.square_side1,
                square_side2: form.square_side2,
                square_area: numberWithCommas(parseFloat(form.square_side1) * parseFloat(form.square_side2))
            }
        }
        res.render('square_area', data)
    })
}

如果我做了一些蠢事，你可以责怪我。

【问题讨论】：

if (typeof square_width != 'undefined') { 看起来是假的，所以你永远不要添加端点处理程序。
为什么要在处理程序之外检查 square_width 值？正如代码所示，square_width 和square_side1 是undefined，并且这些路由不可用。另外，您可能应该使用app.post 而不是app.all；如果将正文作为 URL 参数发送 get 请求，则处理程序将不起作用。

标签： javascript html node.js express ejs

【解决方案1】：

app.post('/square_volume', (req, res) => {

const {
square_width
} = req.body

 if (typeof square_width != 'undefined') {
    app.all('square_volume', (req, res) => {
        let form = req.body
        let data = {}
        if (form.square_width) {
            data = {
                data: true,
                square_width: form.square_width,
                square_length: form.square_length,
                square_height: form.square_height,
                square_volume: numberWithCommas(parseFloat(form.square_width) * parseFloat(form.square_length) * parseFloat(form.square_height))
            }
        }
        res.render('square_volume', data)
    })
} else if (typeof square_side1 != 'undefined') {
    app.all('square_area', (req, res) => {
        let form = req.body
        let data = {}
        if (form.square_side1) {
            data = {
                data: true,
                square_side1: form.square_side1,
                square_side2: form.square_side2,
                square_area: numberWithCommas(parseFloat(form.square_side1) * parseFloat(form.square_side2))
            }
        }
        res.render('square_area', data)
    })
}
})

【讨论】：