АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗ndSqDPDE 41 of 41 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Редактирование записи в БД на 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>