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

Оформление вывода записей из базы данных в NodeJs

Для работы с данными важно не только уметь их получать из БД, но и выводить в HTML-разметку. Как правило, это делается с помощью шаблонизатора. Для примера возьмем Handlebars.

Итак, давайте выведем записи нашей тестовой таблицы users в следующем виде:

<p> <b>user1</b> <b>23</b> <b>400</b> </p> <p> <b>user2</b> <b>24</b> <b>500</b> </p> <p> <b>user3</b> <b>25</b> <b>600</b> </p>

Для начала в файле app.js пропишем маршрут, который будет рендерить файл шаблонизатора Handlebars. В нем будет представлена информация обо всех юзерами, поэтому назовем его users.hbs. Далее в маршруте объявим переменную query, в которой будет храниться SQL запрос для вывода всех юзеров из таблицы. Затем распакуем результат запроса в две переменные: results и fields. А в файл представления users.hbs передадим переменную results:

app.get('/', async function(req, res) { let query = "SELECT * FROM users"; let [results, fields] = await connection.query(query); res.render('users', {results: results}); });

В переменной results хранится массив из объектов:

[ {id: 1, name: 'user1', age: 23, salary: 400}, {id: 2, name: 'user2', age: 24, salary: 500}, {id: 3, name: 'user3', age: 25, salary: 600} ]

Поскольку results является массивом, все его объекты можно вывести в представление с помощью цикла. Для этого в двойных фигурных скобках прописывается специальная команда #each. Чтобы получить значения каждого объекта, в теле цикла нужно указать соответствующие ключи:

<p> {{#each results}} <br>name: <b>{{ name }}</b> <br>age: <b>{{ age }}</b> <br>salary: <b>{{ salary }}</b> {{/each}} </p>

Выведите записи нашей таблицы в следующем виде:

<div> <h2>user1</h2> <p> 23 years, <b>400$</b> </p> </div> <div> <h2>user2</h2> <p> 24 years, <b>500$</b> </p> </div> <div> <h2>user3</h2> <p> 25 years, <b>600$</b> </p> </div>

Выведите записи нашей таблицы в следующем виде:

<table> <tr> <th>id</th> <th>name</th> <th>age</th> <th>salary</th> </tr> <tr> <td>1</td> <td>user1</td> <td>23</td> <td>400</td> </tr> <tr> <td>2</td> <td>user2</td> <td>25</td> <td>500</td> </tr> <tr> <td>3</td> <td>user3</td> <td>23</td> <td>500</td> </tr> </table>

Выведите записи нашей таблицы в следующем виде:

<ul> <li>user1</li> <li>user2</li> <li>user3</li> </ul>