Node.js中Axios发送POST请求至MongoDB失败问题求助

我第一次编写POST请求函数，使用Axios时遇到功能实现问题。我制作了一个HTML页面，可在「English」和「Japanese」列输入词汇，点击「Save Them」按钮本应将数据保存至MongoDB，但目前HTML输入标签的值无法发送到MongoDB。以下是相关代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Your Words!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Add Your New Words!</h1>
    <div class="transtable">
        <table class="table" id="ENJP" border="1">
            <tr>
              <th scope="col">English</th>
              <th scope="col">Japanese</th>
            </tr>
            <tr>
                <td ><input type="text" name="English"/>
                </td>
                <td><input type="text" name="Japanese"/>
                </td>
                <td><input class="closeBtn" type="button" value="X" onclick="DelRow(event)"/>
                </td>
            </tr>
        </table>
      </div>
      <div class="opt_1">
        <input type="button" value="Add a Row" onclick="AddRow()"/>
        <input type="button" value="Save Them" onclick="SaveToDB()"/>
      </div>
    
    <script src="script.js"></script>
</body>
</html>

前端JavaScript代码（重点为SaveToDB函数） #

// Send requests to a server to receive MongoDB data
let table = document.getElementById("ENJP");

const AddRow = () => {
    //Add a new row
    let newRow = table.insertRow(-1);
    //Make cells and insert a row with them
    let cel_EN = newRow.insertCell(-1);
    let cel_JP = newRow.insertCell(-1);
    let cel_DeleteButton = newRow.insertCell(-1);
    let rowContentEN = '<input type="text" name="English"/>';
    let rowContentJP = '<input type="text" name="Japanese"/>';
    let rowDeleteButton = '<input class="closeBtn" type="button" value="X" onclick="DelRow(event)"/>';
    cel_EN.innerHTML = rowContentEN;
    cel_JP.innerHTML = rowContentJP;
    cel_DeleteButton.innerHTML = rowDeleteButton;
}

// Delete a row you choose to click X button
const DelRow = (event) =>{
   event.target.closest('tr').remove();
}

const SaveToDB = () => {
// An array to have each row's values at the last phase
    let data = [];
    let tbl_tr = table.querySelectorAll('tr');
    let tdData = ""
 //Process each row
    tbl_tr.forEach(function(tr){
         console.log(tr.innerText)
     //Get <td> tags and skip the first row
        let cells = tr.querySelectorAll('td');
        if (cells.length!=0){
         // This variable has data of rows
         let d = []
         cells.forEach(function(td){
            if(td.innerHTML.indexOf('input') !== -1) {
                tdData = td.querySelector('input').value;
                d.push(tdData);
            }
            else if(td.textContent !== ""){
                tdData = td.innerText;
                d.push(tdData);
            }
            else{
                d.push("NoData");
            }
         });
         data.push(d);
         

         let outcomeData = axios.post("/word/addwords", data);
         console.log(outcomeData);       
        }
    });
}

后端Node.js代码（基于Express和Mongoose） #

// expressとmongoose使用宣言
const express = require('express');
const mongoose = require('mongoose');
// DBをwordsに代入
const words = require('./models/words');
// expressのインスタンス作成
const app = express();
// publicフォルダ内を使用する処理。
app.use(express.static("public"));
app.use(express.json());
const port = 3000;
console.log("hello!!");


mongoose.connect("mongodb+srv:// (I omitted this part)    /testdb"
).then(()=>console.log("Connecting"))
app.get('/', (req,res) => res.send('Hello World!'));

// DBに登録用関数 ここにAdd画面からのリストを受け取る。
function registerData(){
    let bkData = new words({
        english: "Mary Barton",
        japanese: "Elizabeth Gaskell"
    })
    bkData.save()
}
function add_NewWords(){
  console.log("DID IT!")
}

// ローカルホストに/book追加で入力すると作動する。
app.get("/word", async (req,res) => {
    // 全部取得
    try {
        // 全データをbksで取得して、resに乗せて引き渡し。
        const bks = await words.find({});
        res.status(200).json(bks);
        console.log(bks)
      } catch (err) {
        console.log(err);
      }
  });

//データ追加
app.post("/word/addwords", async(req, res)=>{
  try {
    let bkData = new words({
      english: req[0],
      japanese: req[1]
    })
  } catch (err) {
    console.log(err);
  }

  console.log("Save it");
  
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

前端问题修复 #

1. 缺失Axios库引入：浏览器无法识别axios对象，需在HTML的script.js引入前添加Axios CDN：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. POST请求时机错误：原代码遍历每行就发送一次请求，应收集完所有数据后一次性发送。修改SaveToDB函数：

const SaveToDB = () => {
    let data = [];
    let tbl_tr = table.querySelectorAll('tr');
    
    tbl_tr.forEach(function(tr){
        let cells = tr.querySelectorAll('td');
        if (cells.length !== 0){
            let d = {};
            // 仅获取English和Japanese列的输入值，跳过删除按钮列
            const enInput = cells[0].querySelector('input');
            const jpInput = cells[1].querySelector('input');
            if (enInput && jpInput) {
                d.english = enInput.value.trim();
                d.japanese = jpInput.value.trim();
                // 仅添加非空数据
                if (d.english || d.japanese) {
                    data.push(d);
                }
            }
        }
    });

    // 收集完成后统一发送请求
    if (data.length > 0) {
        axios.post("/word/addwords", data)
            .then(response => {
                console.log("保存成功", response);
                alert("数据已保存");
            })
            .catch(error => {
                console.error("保存失败", error);
            });
    } else {
        alert("请输入有效数据");
    }
}

后端问题修复 #

1. 请求数据获取错误：Express中POST的JSON数据存储在req.body，而非直接通过req[0]获取。修改POST接口：

app.post("/word/addwords", async(req, res)=>{
  try {
    const wordList = req.body;
    // 批量插入数据，效率优于单条保存
    const result = await words.insertMany(wordList);
    res.status(201).json({message: "数据保存成功", data: result});
    console.log("数据已保存");
  } catch (err) {
    console.error("保存失败", err);
    res.status(500).json({message: "保存失败", error: err.message});
  }
})

2. 补充Mongoose模型字段匹配：确保./models/words.js的模型字段与前端传入的english、japanese一致，示例模型：

const mongoose = require('mongoose');

const wordSchema = new mongoose.Schema({
    english: { type: String, required: true },
    japanese: { type: String, required: true }
});

module.exports = mongoose.model('Word', wordSchema);

3. 完善数据库连接错误处理：原连接代码未捕获错误，补充后便于排查问题：

mongoose.connect("mongodb+srv://(你的完整连接地址)/testdb")
    .then(()=>console.log("数据库连接成功"))
    .catch(err => console.error("数据库连接失败", err));

内容的提问来源于stack exchange，提问作者th168