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

Просмотр данных из БД в NodeJS

Давайте сделаем страницу show.hbs для просмотра информации о конкретном юзере, которая будет оформлена в следующей верстке:

<div> <h1>user1</h1> <p> age: <span class="age">23</span>, salary: <span class="salary">400</span> </p> </div>

Пусть id нужного юзера передается через параметр маршрута. Получим его и запишем в переменную id:

app.get('/show/:id', async function(req, res) { let id = req.params.id; res.render('show'); });

Сформируем запрос на получение этого юзера:

app.get('/show/:id', async function(req, res) { let id = req.params.id; let query = `SELECT * FROM users WHERE id = ${id}`; let [results, fields] = await connection.query(query); console.log(results); res.render('show'); });

В переменной results будет храниться массив, состоящий только из одного объекта, поскольку из БД выбирается один юзер:

[ {id: 1, name: 'user1', age: 23, salary: 400} ]

Для удобства объявим переменную result, в которую передадим первый и единственный объект из массива:

app.get('/show/: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); let result = results[0]; res.render('show', {result: result}); });

Далее передадим переменную result в представление show.hbs, при этом ключи объекта запишем через точку:

<div> <h1>{{ result.name }}</h1> <p> age: <span class="age">{{ result.age }}</span>, salary: <span class="salary">{{ result.salary }}</span> </p> </div>

Реализуйте просмотр юзера с помощью следующей верстки:

<div> <p> имя: <span class="name">user1</span> </p> <p> возраст: <span class="age">23</span>, зарплата: <span class="salary">400$</span>, </p> </div>

На странице index.hbs реализуйте вывод ссылок на просмотр каждого из юзеров:

<a href="/show/1">user1</a> <a href="/show/2">user2</a> <a href="/show/3">user3</a>