如何在 html 页面中显示 MongoDB 数据答案

【问题标题】：How to display MongoDB data in html page如何在 html 页面中显示 MongoDB 数据
【发布时间】：2020-12-18 06:32:00
【问题描述】：

我正在做一个项目，我需要将用户数据显示到 HTML 网页中。为此，我已经为 API 创建了 POST 和 GET 方法。我不知道如何在网页上显示数据。
PS：我不允许使用 angular 或 react 之类的框架。我必须用 MEN 堆栈来做。

POST方法：

router.post('/adduserdata', (req, res) => {
    bcrypt.hash(req.body.password, 10, (err, hash) => {
        if (err) {
            res.json({
                error: err
            });
        }
        else {
            const user = new userdata({
                name: req.body.name,
                email: req.body.email,
                password: hash,
                mobile_no: req.body.mobile_no,
                data_of_birth: req.body.data_of_birth
            })
            try {
                user.save()
                res.json({
                    message: "User Created.."
                });
            }
            catch (err) {
                res.send('Error');
            }
        }
    });
});

GET方法：

router.get('/getuserdata', async (req, res) => {
    try {
        const user = await userdata.find().select("name email mobile_no data_of_birth")
        res.json(user)
    }
    catch (err) {
        res.send('Error ', err)
    }
});

【问题讨论】：

标签： node.js mongodb api express mongoose

【解决方案1】：

您基本上需要进行一些 DOM 处理和 Ajax 请求。

在纯 JS 中：

const htmlElement = document.getElementById("YourElement");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
    if (req.readyState == 4 && req.status == 200) {
         const data = req.response;
         console.log(data) // Shows the returning data, that will probably be a JSON OBJECT.
         htmlElement.inneText = data.name;
    }
};
xhttp.open("GET", "/getuserdata");
xhttp.send();

代码分解：

htmlElement：创建一个包含具有所提供 ID 的 HTML 元素的常量变量。
req：创建一个 HTTP 请求客户端。
其余的代码都是关于这两个变量的。名为req 的HTTP 客户端向服务器发送一个REQUEST，检查请求是否已加载（readyState 4）并验证请求是否成功（HTTP status 200）。如果满足这些条件，则程序将使用从请求返回的 DATA 创建一个变量，并使用该数据填充 HTML 网页。

Ps：您也可以使用req.responseText 将json 对象直接转换为DOMString。

【讨论】：

【解决方案2】：

您需要在 HTML 中为用户数据添加一个占位符：

<h1 id="name"></h1>

然后在页面的 javascript 中，您需要向 /getuserdata 端点发出请求，然后使用 API 调用的结果修改 DOM：

<script>
  fetch('http://example.com/getuserdata')
    .then(response => response.json())
    .then(user => {
       document.getElementById("name").innerHTML = user.name; 
    });
<script>

【讨论】：