如何在html中显示mongoose记录？

Question

我是 Javascript、Nodejs 等方面的新手，所以请耐心等待。 我的目标是建立一个显示一堆按钮的网页。例如，有一个按钮称为“POST”，并且按其指示执行操作。它将信息从网页发送到nodejs，最后发送到Mongoose。 那是有效的。在第二步中，我想在 HTML 中准确显示该记录。那对我不起作用。 但是，我的浏览器在响应选项卡中向我显示了该对象。

我使用 NodeJS、Javascript、Promises（异步/等待）、HTML（无视图）。

控制器

const addBook = async(req,res)=>{
    try {
        const addedBook = await Book.create({...req.body});
        res.status(200).json(addedBook)
        
    } catch (error) {
        console.log(error);
    }
}

客户端 JS：

const btn_POSTDOM = document.getElementById("btn_POST");
btn_POSTDOM.addEventListener("click", addBook);

async function addBook(e){
    try {
        e.preventDefault();
        const data = await fetch(baseURL, {
            method:"POST",
            headers:{"Content-Type":"application/JSON"},
            body: JSON.stringify({
                bookTitle : bookTitleIDDOM.value,
                publishDate: publishDateIDDOM.value,
                author: authorIDDOM.value
            })
        })
    } catch (error) {
        console.log(error);
    }
}

我收到各种承诺、对象对象等，但从未收到文件中的实际值。

Answer 1

这里有很多需要修复的地方。

首先，您的

Book.create({...req.body});

不 工作。您正在集合中创建文档，是的，但属性没有值，例如

bookTitle

、

publishDate

、

author

均为空或

null

。您不能使用 spread 语法，因为

req.body

是一个对象，而扩展语法要求 ...iterable[Symbol.iterator] 是对象没有的函数。

其次，您需要在控制器中解析

req.body

。这可以通过将以下内容添加到您的主 server/index/app.js 或您的应用程序初始化的任何文件中来完成：

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

现在，当您发布到您的

addBook

控制器时，只需像这样解构您的

req.body

即可：

try {
   const {bookTitle, publishDate, author} = req.body;
   const addedBook = await Book.create({bookTitle, publishDate, author});
   res.status(200).json(addedBook)    
}

最后，在您的

async function addBook(e)

客户端函数中，您需要将响应从

fetch

转换为 JSON，以准备使用。像这样更新：

try {
   e.preventDefault();
   const data = await fetch(baseURL, {
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body: JSON.stringify({
         bookTitle : bookTitleIDDOM.value,
         publishDate: publishDateIDDOM.value,
         author: authorIDDOM.value
        })
    });
   const newBook = await data.json(); //< Add this
   console.log(newBook); //< See JSON in console
}

您现在可以使用

newBook

JSON 循环遍历它并向页面添加 DOM 元素，直到您满意为止。