Оформление вывода записей из базы данных в 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>