如何获取用户输入的访问权限并在我的后端服务器上计算某些内容？

Question

所以，我使用 Node.js 和 express 来运行服务器并制作计算器。 之后，我下载了 body-parser，以访问用户输入的数字并使用它来计算结果，但出于某种原因，每当我尝试在控制台上记录其中一个数字时，只是为了确保它有效，它不会被记录。

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
})

app.post('/', (req, res) => {
  console.log(req.body);
  res.send('Thanks for the information');
})

app.listen(3000, () => console.log('Server Started'));

Answer 1

你的表格看起来像这样

<form id="post-form" action="/your/post/url" method="POST">
     <div class="form-control">
         <label for="title">Number</label>
         <input type="number" name="number" id="number">
     </div>

      <button type="submit">
         Submit
      </button>
</form>

或者在你的脚本标签中，你可以做这样的事情。 使用这种方法，表单无需重新加载即可提交

// Note: Optional approach (without reloading the page) 
// Just above HTML only code also works perfectly fine
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const number= document.getElementById('number')
document.getElementById('post-form').addEventListener('submit', (e) => {
    e.preventDefault();
    axios
        .post('/your/post/url', { number: number.value })
        .then((res) => {
            //handle response here
        })
        .catch((err) => { //handle err here});
});
<script>

然后在你表达应用程序你可以做

app.post('/you/post/url/', (req,res,next) => { 
   // this is how you accces title from you form
  // here title will hold value "Value Here"
  const { number} = req.body
  //calculate here
  number = number * number + number
  
  // then send the response 
  res.send(`calculated number: ${number}`)
});