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

Question

我正在做一个项目，需要在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)
}
});

Answer 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。

Answer 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>