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

Posted 2023-03-11

【中文标题】如何在 html 页面中显示 MongoDB 数据

【英文标题】：How to display MongoDB data in html page

【发布时间】：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)
    
);

【参考方案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>