Редактирование записи в БД на NodeJS
Давайте теперь реализуем редактирование
данных об юзере. Для этого нам понадобится страница
edit.hbs
, на которой будет размещаться
форма для редактирования.
Для начала на странице edit.hbs
сделаем
форму:
<form action="" method="POST">
{{#each results}}
name <input name="name" value="{{ name }}">
age <input name="age" value="{{ age }}">
salary <input name="salary" value="{{ salary }}">
{{/each}}
</form>
В эту форму будут загружаться текущие данные
юзера из БД. Пусть id
юзера
для редактирования передается в
параметре GET маршрута:
app.get('/edit/:id', async function(req, res) {
let id = req.params.id;
let query = `SELECT name, age, salary FROM users WHERE id=${id}`;
let [results, fields] = await connection.query(query);
res.render('edit', {results: results});
});
В файле представления выведем
данные об юзере, указав из в атрибуте
value
каждого инпута:
<form action="" method="POST">
{{#each results}}
name: <input name="name" value="{{ name }}">
age: <input name="age" value="{{ age }}">
salary: <input name="salary" value="{{ salary }}">
{{/each}}
<input type="submit">
</form>
Теперь создадим POST маршрут для обработки формы.
Все данные об имени, возрасте и зарплате
юзера разложим по соответствующим переменным.
А в SQL запросе введем эти переменные
для редактирования записи. После отправки
данных пусть POST запрос редиректится на ту же
страницу, где редактировали
данные юзера. Для этого передадим в строку запроса
переменную id
:
app.post('/edit/:id', async function(req, res) {
let id = req.params.id;
let name = req.body.name;
let age = Number(req.body.age);
let salary = Number(req.body.salary);
let query = `UPDATE users SET name='${name}', age=${age}, salary=${salary} WHERE id=${id}`;
let [results, fields] = await connection.query(query);
res.redirect(`/edit/${id}`);
});
Реализуйте страницу edit.hbs
для редактирования
юзера.
На странице index.hbs
выведите на
экран список юзеров так, чтобы для каждого
юзера была ссылка для его редактирования:
<ul>
<li>user1 <a href="/edit/1">edit</a></li>
<li>user2 <a href="/edit/2">edit</a></li>
<li>user3 <a href="/edit/3">edit</a></li>
</ul>