Как отобразить данные пользователя из базы данных mongodb на странице, отредактировать данные и снова сохранить

#javascript #html #node.js #ajax #mongodb

Вопрос:

У меня есть сайт, где вы можете зарегистрироваться в качестве пользователя и войти в систему. Сейчас я пытаюсь создать страницу профиля, на которой вы можете изменить свое имя пользователя, адрес электронной почты и пароль. Я могу получить данные только от первого пользователя из таблицы пользователей в базе данных. Как получить пользователя, который в данный момент вошел в систему?

Здесь я создаю пользователя и сохраняю его в БД. Это прекрасно работает:

 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. Очевидно, что это только get получает первую запись в базе данных. Я пробовал разные вещи с помощью 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);
    }
})();
 

Это выглядит так
Это выглядит так:

А вот и текст:

 <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, вот так:
json

Любая помощь была бы очень признательна

Ответ №1:

Я полагаю, что вы ищете express-session , что позволило бы вам предоставить клиенту файл cookie в качестве ключа к объекту с переменными на вашем сервере. Таким образом, когда они войдут в систему, вы сможете получить доступ к их _id данным, как это происходит в вашей базе данных, и разрешить им редактировать свой конкретный документ.