Cursos / Informática para Internet / Desenvolvimento Backend / Aula

arrow_back Aula 11 - implementando interface em EJS

Listando postagens


Nesse momento, os dados já estão tratados e prontos para serem exibidos. Acompanhe a aula e organize a forma como essas informações serão exibidas.

Criando o layout com os dados recebidos

Inicialmente, remova as pastas alunos e cursos da pasta view, pois elas não serão mais usadas. Após isso, abra o arquivo 'posts.ejs' para implementação da listagem de posts.

<%- contentFor('body') %>

<h1 class="mb-4">
  <small>Posts Recentes</small>
</h1>

<hr />

<% posts.forEach(function (post) { %>

<div class="card mb-4">
  <img
    class="card-img-top"
    src="<%=post.foto%>"
    alt="Imagem de capa do card"
  />

  <div class="card-body">
    <h5 class="card-title"><%=post.titulo%></h5>
    <p class="card-text">
      <%-post.texto.substr(0,200)%>...
    </p>
    <a href="/post/<%=post.id%>" class="btn btn-primary">Leia mais</a>
  </div>
  <div class="card-footer text-muted">
    Postado por <a href="#"><%=post.Usuario.email%></a> <%=post.postadoEm%>
  </div>
</div>

<% }) %>

Versão 5.3 - Todos os Direitos reservados