我應該使用 req.body.item 從發布請求中獲取正文？

Question

我學習了如何在使用 express 時從 post 請求中獲取正文數據。 大多數示例代碼表示req.body.item應該能夠獲取我想要使用的值，例如，將值插入到表中。

但我無法通過req.body.item獲得價值，但最終可以通過req.body.body.value獲得。 我是否沒有以正確的方式獲得帖子正文的價值，或者這不是問題？

Node.js
  v14.15.4
Nuxt.js
  @ v2.15.4
Vue.js
  vue@2.6.12
Express
  ^4.17.1

(expense.vue)，用正確的代碼更新
將表單數據發布到“書籍/書籍/添加”

<template>
  <div>
    <div class="main">
      <h3>please type expense name and amount</h3>
      <form @submit.prevent="addToBookDB">
        <label for="name_expense">expense name: </label>
        <input v-model.trim="expenseTitle" />
        <label for="price_expense">expense amount: </label>
        <input v-model="expenseSummary" />
        <input type="submit" value="Submit" />
      </form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'

Vue.config.productionTip = false

export default {
  data () {
    return {
      expenseTitle: 'Title',
      expenseSummary: 'Summary',
    }
  },
  methods: {
    addToBookDB (event) {
      console.log(event)
      const formData = {
        expenseTitle: this.expenseTitle,
        expenseSummary: this.expenseSummary
      }
      console.log(JSON.stringify(formData))
      //<<wrong code↓>>
      //axios.post('books/books/add', {
      //  headers: {
      //    'Content-Type': 'application/json'
      //  },
      //  body: formData
      //<<correct code↓>>
      axios.post('books/books/add', formData
      ).then((response) => {
        console.log(response)
        return response
      }).catch((response) => {
        console.log(response)
        return response
      })
    }
  }
}
</script>

(books.js)，用正確的代碼更新
將收到的帖子數據插入表中

const express = require('express')
const app = express()

app.use(express.json())
app.use(express.urlencoded({
  extended: true
}))

app.get('/books', (req, res) => {
  // (omitted)
})

app.post('/books/add', (req, res, next) => {
  const mysql = require('mysql')
  const connection = mysql.createConnection({
    host: '***.*.*.*',
    user: '******',
    database: '******',
    password: '******',
  })
  connection.connect()
  //const expenseTitle = req.body.body.expenseTitle
  const expenseTitle = req.body.expenseTitle
  connection.query("INSERT INTO book (title, summary) values (?,'1000');", [expenseTitle], function (error, row, fields) {
    res.redirect('./')
  })
  connection.end()
})

module.exports = {
  path: '/books',
  handler: app,
}

Answer 1

問題是您的axios.post電話。 axios.post的第二個參數是您要發送的數據，而不是選項 object。 所以你發送的是帶有headers屬性和body屬性的數據。 （看起來您已經習慣使用fetch了。）選項是第三個參數。

如果你需要給 header，它會是這樣的：

axios.post("books/books/add", formData, {
    headers: {
        "Content-Type": "application/json"
    },
})
// ...

...但你不知道， jonrsharpe 告訴我，默認情況下axios將字符串化 object 並發送適當的 header，所以：

axios.post("books/books/add", formData)
// ...

---

您還應該在.catch之后有一個.then來處理錯誤，因為您沒有從 .then 返回.then 。

Answer 2

axios.post("books/books/add", formData, {
    headers: {
        "Content-Type": "application/json"
    },
})