Искал в инете что может быть не так с моим кодом, но ничего не смог найти. Что именно я не так делаю? Может быть дело в том, что я неправильно передаю данные в .hbs
файл?
Страница представляет из себя самый минимальный по своему устройству блог. Постишь заголовок и текст - вот оно и появилось на главной странице. Вот так выглядит модель типичной записи:
const { Schema, model } = require('mongoose')
const schema = new Schema({
title: { // ЗАГОЛОВОК
type: String,
required: true
},
content: { // ТЕКСТ СТАТЬИ
type: String,
require: true
}
})
module.exports = model('Article', schema)
Далее я хочу использовать эти данные на своих страницах и пишу в роутах следующее:
const { Router } = require('express')
const articles = require('../models/articles')
const router = Router()
router.get('/', (req, res) => {
res.render('index', {data: articles}) // СЮДА КИДАЮ ДАННЫЕ
})
router.get('/post', (req, res) => {
res.render('post', {isPost: true})
})
router.post('/post', async (req, res) => {
const article = new articles({
title: req.body.title,
content: req.body.content
})
await article.save()
res.redirect('/')
})
module.exports = router
Как видно выше, тут всего три роутов. Первый - это главная страница, куда я и кидаю записи из базы данных. Вторая просто формочка, куда я захожу, чтобы написать статейку. На переменную IsPost
забейте, она нужен для кнопки в шапке, а там тоже всё слажено работает. Третий роут идёт после того, как мы подтверждаем данные и они закидываются в БД. Заглядываю в MongoDB и вижу, что всё хорошо. Данные реально сохраняются, форма работает, я доволен.
Теперь осталось вывести данные. Вот тут и начинается проблема. Вот таким образом я вывожу данные на страницу (она с Bootstrap, если что):
// ЗДЕСЬ ВАЖНЫЙ КУСОК КОДА
{{#if data.length}}
<div style="max-width: 1240px" class="d-flex justify-content-center mx-auto">
<div class="d-flex mt-5">
<div class="d-flex row flex-wrap justify-content-center">
{{#each data}}
<div class="rounded border bg-light custom-item p-3 m-1">
<h4>{{this.title}}</h4>
<p class="text">{{this.content}}</p>
</div>
{{/each}}
</div>
</div>
</div>
// ЗДЕСЬ КОНЧАЕТСЯ ВАЖНЫЙ КУСОК КОДА
<style>
.custom-item{
width: 240px;
height: 240px;
}
.text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 7;
line-clamp: 7;
-webkit-box-orient: vertical;
}
</style>
{{else}}
<div class="mt-5 d-flex align-items-center justify-content-center flex-column">
<h1 class="text-black-50 text-center font-weight-bold">No articles</h1>
<h4 class="text-muted text-center">Write your first post</h2>
</div>
{{/if}}
Вместо того, чтобы вывести блоки с заголовками и их полным текстом, выводится это:
Обратите внимание. Выводится только два блока с тегами h4
и p
, но они пустые. Выводится именно два блока, хотя в записей в базе данных всего три. Когда я меняю их количество, то блоков на странице по-прежнему всегда будет два.
И вот итоговый вопрос. Как работает мой код и почему он выводит именно два блока? Как мне исправить код так, чтобы вывести каждую запись из БД? Пишите, если забыл что-то ещё дополнить.
UPD: Код с роутом на главную страницу изменён и теперь выводится ровно столько же блоков, сколько и записей. Уже продвижение, но теперь проблема в том, что Handlebars не выводит текст.
router.get('/', async (req, res) => {
const data = await articles.find().exec()
res.render('index', {data})
})