Выводим список записей
В прошлом уроке мы создали таблицу и ввели в нее первые записи. Теперь выведем их на экран.
Отредактируем функцию, возвращающую HTML. Добавим в нее первую строчку, считывающую данные из нашей таблицы в массив объектов
Считываем записи из таблицы. Для этого используем метод findAll, нашей таблицы. Обратите внимание, что перед вызовом этого метода мы должны поставить ключевое слово await, так как это обращение к базе данных; код должен подождать пока метод findAll сходит за данными и вернет результат.
// строка 13
app.html('/', async(ctx,req) => {
const items = await catalogTable.findAll(ctx)
return <html>
///...
После этого, переходим к редактированию HTML-кода. Добавим такие строчки в HTML под заголовок h1:
// ...
{items.map( item =>
<div class="card">
<img src={item.image?.getThumbnailUrl(500,300)}/>
<div class='card-body p-2'>
<h3>{item.title}</h3>
<div>{item.material}</div>
<div>{item.dimensions}</div>
</div>
</div>
)}
// ...
Итоговый код
import {jsx} from '@app/html-jsx'
import {Heap} from '@app/heap'
const catalogTable = Heap.Table('pictures', {
title: Heap.String(), // название. строка
image: Heap.ImageFile(), // изображение. обязательный
material: Heap.Optional( Heap.String() ), // материал. необязательный. строка.
dimensions: Heap.Optional( Heap.String() ), // размеры. необязательный. строка.
price: Heap.NonRequired( Heap.Number(),0 ), // цена. число. по умолчанию 0
})
app.html('/', async(ctx,req) => {
const items = await catalogTable.findAll(ctx)
return <html>
<head>
<title>Каталог картин</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
</head>
<body>
<div class="container p-3 col-md-6 col-12">
<h1 class={"fs-1 fs-header fs-bold"}>Каталог картин</h1>
{items.map( item =>
<div class="card">
<img src={item.image?.getThumbnailUrl(500,300)}/>
<div class='card-body p-2'>
<h3>{item.title}</h3>
<div>{item.material}</div>
<div>{item.dimensions}</div>
</div>
</div>
)}
</div>
</body>
</html>
})
