Exibindo detalhes de uma postagem

Até o momento, já temos a página principal do blog, no entanto, ainda falta fazer o botão "Leia Mais" abrir uma página interna com todo o texto do post.

Limitando o número de posts

A página principal está carregando todos os posts do banco de dados, e isso pode gerar problemas de performance futuramente. Para evitar isso, é importante colocar um limite de posts que devem ser exibidos.

Então, na rota '/' principal do arquivo 'index.rota.ejs', adicione o limite e a ordem de ordenação. Seguindo a aula, a rota deverá ficar como se vê abaixo:

router.get('/', async (req, res) => {
    const posts = await Post.findAll({
        limit: 10,
        order: [['createdAt', 'DESC']],
        include: [{
            model: Usuario
        }], raw: true, nest: true
    })

    const postResult = posts.map((post) => prepararResultado(post))
    res.render('pages/posts', {posts: postResult, layout: 'layouts/layout-blog.ejs'})
})

Buscando um post específico no banco

Para o funcionamento do botão "Leia Mais", é preciso buscar, no banco, somente pelo post que usuário está querendo ver no blog e redirecionar para uma página com as informações completas. Então, ainda no arquivo 'index.rota.ejs', crie uma rota similar a esta que apresento a seguir:

router.get('/post/:id', async (req, res) => {
    const post = await Post.findByPk(req.params.id, 
        {include: [{model: Usuario}], raw: true, nest: true})
    res.render('pages/post', {post:prepararResultado(post), layout: 'layouts/layout-blog.ejs'})
})

Criando a página

Com os dados disponíveis para uso, é necessário criar a página que será exibida. Portanto, na pasta pages, crie um arquivo e o nomeie de 'post.ejs'.

Já com o arquivo criado, preencha-o com o código apresentado a seguir:

 <%- contentFor('body') %>

<h1 class="mb-4">
    <%=post.titulo%>
</h1>
<p class="lead">Postado por <a href="#"><%=post.Usuario.email%></a></p>
<hr>
<p class="text-muted">postado em <%=post.postadoEm%></p>
<hr>
<img class="img-fluid rounded mb-4" src="<%=post.foto%>" alt="Computador">

<%-post.texto%>