如何在页面上显示来自 mongodb 数据库的用户数据，编辑数据并再次保存

Posted 2023-03-05

【中文标题】如何在页面上显示来自 mongodb 数据库的用户数据，编辑数据并再次保存

【英文标题】：How to show userdata from a mongodb database on a page, edit the data and save again

【发布时间】：2021-12-18 11:51:03

【问题描述】：

我有一个网站，您可以在其中注册为用户并登录。现在我正在尝试创建一个个人资料页面，您可以在其中更改您的用户名、电子邮件和密码。 我只能从数据库中的用户表中获取第一个用户的数据。如何获取当前登录的用户？

在这里我创建一个用户并保存到数据库。这工作正常：

router.post("/users", async (req, res) => 
    const user = new User(req.body)
    try 
        await user.save()
        const token = await user.generateAuthToken()
        console.log(user, token)
        res.status(201).redirect("/")
     catch (e) 
        res.status(400).send(e)
    
)

然后我登录该用户。这也可以按预期工作。

router.post("/users/login", async (req, res) => 
    try 
        const user = await User.findByCredentials(req.body.email, req.body.password)
        const token = await user.generateAuthToken()
        console.log(user, token)
        res.cookie('auth_token', token,  maxAge: 21600000 )
        res.redirect("/frontpage")
     catch (e) 
        res.status(400).send(`<div style="background-color: red; text-align: center"><h1> Wrong credentials - Did you register...?</h1> <a href='/'><h2 style="color: black"> Try again please </h2></a> <a href='/register'><h2 style="color: black"> Register </h2></a><p> $e </p></div>`)
    
)

然后我尝试使用此路由和 AJAX 获取数据。显然，这只会获取数据库中的第一个条目。我用 findById 尝试了不同的方法，但无法检索任何数据。我做错了什么？

router.get("/users/me", async (req, res) => 
    try 
        const user = await User.findOne()

        if (!user) 
            return res.status(404).send()
        
            console.log(user.id, user.name, user.email)
            res.send(user)
         catch (e) 
            res.status(500).send()
    

AJAX 调用：

(async function getProfile() 
    try 
        $.ajax(
            method: "GET",
            url: "/users/me",
            dataType: "json"
        ).done(function (user) 
            $("#addData")
                .append($("<tr>"))
                .append($("<input>").val(user.name))
                .append($("<tr>"))
                .append($("<input>").val(user.email))
                .append($("<tr>"))
                .append($("<input>").val(user.password))
                ;
        )
     catch (error) 
        console.log(error);
    
)();

看起来像这样

这里是html：

<div class="centered">
        <h2>Profile page</h2>
        <form action="/users/me" method="GET">

            <table id="profile">
                <thead></thead>
                <tbody id="addData">

                </tbody>

            </table>
            <button type="submit" class="btn btn-primary">Update account</button>
            <a href="/login"><button class="btn btn-danger" id="btn-profile" onclick="deleteUser()">Delete
                    account</button></a>
        </form>

然后我希望能够编辑姓名和电子邮件并再次保存。以下是发帖路线：

router.post("/users/me", async (req, res) => 
    const updates = Object.keys(req.body)
    console.log("Updates1" + updates)
    const allowedUpdates = ["name", "email", "password", "age"]
    const isValidOperation = updates.every((update) => allowedUpdates.includes(update))

    if (!isValidOperation) 
        return res.status(400).send( error: "Invalid updates!" )
    

    try 
        updates.forEach((update) => req.user[update] = req.body[update])
        await req.user.save()
        console.log(updates)
        res.send(req.user)
        res.redirect("/profile");
     catch (e) 
        res.status(400).send(e)
    
)

以及对路由的 AJAX 调用：

(async function editProfile() 
    try 
        $.ajax(
            method: "POST",
            url: "/users/me",
            dataType: "json"
        ).done(function (user) 
            $("#addData")
                .append($("<tr>"))
                .append($("<input>").val(user.name))
                .append($("<tr>"))
                .append($("<input>").val(user.email))
                .append($("<tr>"))
                .append($("<input>").val(user.password))
                ;
        )
     catch (error) 
        console.log(error);
    
)();

当我单击更新 btn 时，我得到一个带有未编辑 json 的页面，如下所示：

任何帮助将不胜感激

【参考方案1】：

我相信您正在寻找express-session，它允许您向客户端提供一个cookie，作为服务器上具有变量的对象的键。这样，当他们登录时，您就可以访问他们在您的数据库中出现的_id，并允许他们编辑他们的特定文档。