Adonis 3.2

Aparência

Listando Postagens de Blog ​

Neste tutorial, continuaremos o tópico de Modelos de Banco de Dados usando-os dentro do PostController. Certifique-se de que seu servidor esteja instalado e funcionando em http://localhost:3333.

Buscando Postagens de Blog ​

Abra rapidamente o arquivo PostController e cole o seguinte snippet nele.

js
// app/Http/Controllers/PostController.js

'use strict'

const Post = use('App/Model/Post') <1>

class PostController {

  * index (request, response) {
    const posts = yield Post.all() <2>
    yield response.sendView('home', { posts: posts.toJSON() }) <3>
  }

}

module.exports = PostController

Fizemos algumas alterações no arquivo do controlador existente.

  1. Aqui importamos o modelo Post criado anteriormente.
  2. Em seguida, chamamos o método all no modelo para buscar todas as postagens.
  3. Finalmente, passamos as postagens para nossa visualização inicial.

Substitua tudo dentro da sua visualização pelo snippet de código abaixo.

twig
<!-- resources/views/home.njk -->

{% extends 'master' %}

{% block content %}
  <div class="posts-wrapper">
    {% for post in posts %} <1>
      <div class="post">
        <h2><a href=""> {{ post.title }} </a></h2> <2>
        <p> {{ post.content }} </p>
      </div>
    {% endfor %}
  </div>
{% endblock %}
  1. Usamos o mecanismo de template for loop para iterar sobre a lista de posts.
  2. Aqui exibimos o título e o conteúdo do post.

Se você atualizar a página, não verá nada na tela, pois não há nenhum post dentro do nosso banco de dados. Antes de adicioná-los, vamos mostrar uma mensagem na página da web se não houver posts.

Logo antes da tag {% endfor %} adicione o snippet abaixo.

twig
<!-- resources/views/home.njk -->

{% else %}
  <h2> No posts found </h2>

Então será

twig
{% for post in posts %}
    .....
{% else %}
  <h2> No posts found </h2>
{% endfor %}

Seeds And Factories ​

Antes de implementarmos a lógica de adicionar novos posts, precisamos de alguns posts fictícios. Você pode criar novos posts executando consultas SQL dentro da interface do seu banco de dados, mas isso anulará todo o propósito de desenvolvimento rápido e reutilização.

Há muitos casos de uso para Database Factories e Seeds, mas por enquanto, vamos usá-los para criar algumas postagens de blog fictícias.

js
// database/factory.js
'use strict'

const Factory = use('Factory')

Factory.blueprint('App/Model/Post', (fake) => {
  return {
    title: fake.sentence(),
    content: fake.paragraph()
  }
})

As fábricas permitem que você defina blueprints para seus modelos. Cada blueprint usa o nome do modelo como o primeiro parâmetro e um retorno de chamada como o segundo parâmetro. O retorno de chamada obtém acesso à instância chancejs, que é usada para gerar dados aleatórios.

Em seguida, precisamos usar o blueprint definido dentro do arquivo database/seeds/Database.js.

js
// database/seeds/Database.js
'use strict'

const Factory = use('Factory')

class DatabaseSeeder {

  * run () {
    yield Factory.model('App/Model/Post').create(5) <1>
  }

}

module.exports = DatabaseSeeder
  1. Aqui usamos o blueprint e criamos cinco posts usando o método create.

Finalmente, precisamos semear esse arquivo executando um comando ace.

bash
./ace db:seed
bash
# Saída
✔ seeded database successfully

Melhorias finais ​

Agora atualize o navegador e você verá todos os posts recém-criados. Por fim, faremos algumas melhorias na lista de posts.

twig
<!-- resources/views/home.njk -->
{{ post.content | truncate(150) }} <1>
  1. Aqui usamos o filtro truncate no conteúdo do post limitando a contagem de caracteres para 150.
css
/* public/style.css */

.post {
  margin-top: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

Visualização da lista de posts ​

imagem