Pular para o conteúdo

Programando Soluções

Programando Soluções

Menu

Como utilizar API Rest Fake com VueJS – ToDo List parte 3

  • por
api rest fake

Introdução

Utilizar uma API Rest Fake pode trazer benefícios para o projeto, é possível simular requisições reais, colocar comportamentos mais reais no frontend, deixar preparado para receber um backend por API Rest e muito mais.

Para fazer a implementação dessa API Rest Fake, vou utilizar o projeto ToDo List, é uma continuidade do projeto, e vai ser bom para exemplificar.

Caso você queira você pode ver o código fonte e os tutoriais do projeto.

Para implementar, vou utilizar a biblioteca json-server, para criar a API Rest Fake, o Axios para fazer as requisições HTTP e o vue-api-query para construir consultas e trabalhar com modelos.

Json-server

O json-server é uma biblioteca própria para criar API Rest Fake e de forma rápida. Ideal para quem precisa de um backend rápido e fácil.

É uma biblioteca grande e no momento que escrevo este artigo conta com mais de 155 mil downloads semanais.

Axios + vue-api-query

O Axios é utilizado para fazer requisições a HTTP, a API Rest Fake vai disponibilizar uma rota para que seja feita requisição, e para isso precisaremos do Axios para requisitar os dados.

O vue-api-query ajuda a construir as consultas HTTP de forma fácil e com um código mais simples, facilitando assim o desenvolvimento e a leitura do código.

Essa biblioteca também trabalha com modelos, com ela poderemos criar um modelo base, para fazer as configurações de URL de busca, e também modelos adicionais, que no caso será o modelo de Tarefas.

Basicamente um esquema de como a aplicação fica é assim:

api rest fake

Instalação e configuração das bibliotecas

Primeiramente é necessário realizar a instalação das bibliotecas, para isso vou utilizar o comando:

npm install json-server axios vue-api-query
ou
yarn add json-server axios vue-api-query

Depois de instalado, vou configurar o banco de dados fake da aplicação.

Para essa configuração, na raiz do projeto vou criar um arquivo chamado db.json e dentro dele vou colocar o seguinte código:

{
  "tasks": [
    {
      "id": 1,
      "subject": "teste json-server",
      "description": "teste json-server"
    }
  ]
}

Para executar esse arquivo e fazer a biblioteca do json-server criar as rotas para requisição, é necessário ir no terminal e executar o comando:

json-server --watch db.json

Porém vou criar um script no npm, para em vez de ter que rodar esse comando toda vez, rodar um comando mais tranquilo de executar, na parte de scripts, adicionei o seguinte código:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "backend": "json-server --watch db.json" //script para rodar o json-server
  },

E agora para rodar é só utilizar o comando

npm run backend
ou
yarn run backend

Rodando ele, a saída no terminal deve ser parecida com essa:

Dessa forma, a biblioteca json-server já subiu uma rota no localhost:3000 para que seja possível fazer requisições e buscar os dados.

Se acessar o endereço http://localhost:3000/tasks no navegador, deve retornar o json que está no arquivo db.json.

Depois disso vou configurar no arquivo main.js, o axios em conjunto com o vue-api-query, o arquivo completo fica assim:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

import Vuelidate from "vuelidate";
Vue.use(Vuelidate);

//importação do axios e configuração do vue-api-query com o axios
import axios from "axios";
import { Model } from "vue-api-query";
Model.$http = axios;

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Agora, vou fazer a criação do modelo base do vue-api-query, que vai servir para configurar a url base de acesso da API fake.

E com essa configuração, caso você passe a utilizar uma API Rest real, pode trocar apenas a url neste arquivo.

Dentro do src, criei um diretório chamado models, e dentro o arquivo Model.js com o seguinte conteúdo:

import { Model as BaseModel } from "vue-api-query";

export default class Model extends BaseModel {
    baseURL() {
        return "http://localhost:3000"; //configura a url
    }

    request(config) {
        return this.$http.request(config);
    } 
}

Com essa configuração, vou criar outro modelo dentro do models, chamado TasksModel.js que vai estender o modelo:

import Model from "./Model";

export default class Tasks extends Model {
    resource() {
        return "tasks";
    }
}

Basicamente, o modelo base, cria a primeira parte da URL para fazer a requisição, que é o localhost:3000, já esse modelo cria a outra parte da URL, que é o /tasks.

Listagem dos dados

Neste ponto, toda a configuração necessária da API Rest fake está pronta.

Agora, vou atualizar todos os locais que fazem alguma referência ao localStorage, para acessar a API Rest Fake.

O primeiro é a listagem, no arquivo List.vue, há o hook created, que nele faz a busca de todas as tarefas que estão no localStorage.

No created agora vai ficar a requisição para a API Rest, utilizando o model de tasks e o método do vue-api-query.

Na parte de script do List.vue, primeiro faço a importação do TasksModel antes do export default, dessa forma:

import TasksModel from "@/models/TasksModel";

E no created atualizo o método com esse código:

async created() {
    this.tasks = await TasksModel.get();
  },

Com isso, os dados já são buscados na API Rest Fake.

Cadastro de tarefas

Para o cadastro, vou atualizar o Form.vue, primeiro vou fazer a importação da TasksModel igual na listagem.

Nele tem o método saveTask, abaixo do condicional de update, vou deixar:

const task = new TasksModel(this.form);
task.save();

this.showToast("success", "Sucesso!", "Tarefa criada com suceso");
this.$router.push({ name: "list" });

No código acima, crio uma nova instância do TasksModel passando os dados do form como parâmetro.

Com isso, tenho acesso ao método de salvar, e o vue-api-query identifica que é um novo registro pois não tem um id, e faz a criação.

Atualizar tarefa

Para atualizar, preciso fazer alterações nos dois arquivos.

No List.vue, vou alterar a chamada do método edit, passando para ele o id da tarefa a ser atualizada.

Também vou aproveitar para tirar o index do v-for e colocar o id da tarefa como key para o v-for:

<div v-for="(task) in tasks" :key="task.id">
    <b-card :title="task.subject" class="mb-2">
      <b-card-text>{{ task.description }}</b-card-text>
       <b-button
        variant="outline-secondary"
        class="mr-2"
        @click="edit(task.id)"
      >
        Editar
      </b-button>
      <b-button
        variant="outline-danger"
        class="mr-2"
        @click="remove(task.id)"
      >
        Excluir
      </b-button>
    </b-card>

E no edit, vou alterar para essa forma:

edit(taskId) {
    this.$router.push({ name: "form", params: { taskId } });
},

Agora o parâmetro enviado no redirecionamento é o taskId, vou alterar o Form.vue para receber este parâmetro.

Para receber, o Form.vue recebe pelo created, vou tirar a parte que busca no localStorage e deixar assim:

async created() {
  if(this.$route.params.taskId){
    this.methodSave = "update";
    this.form = await TasksModel.find(this.$route.params.taskId);
  }
},

E no método saveTask, vou remover a parte de localStorage dentro do condicional do update para uma linha:

if(this.methodSave === "update"){
    this.form.save();

    this.showToast("success", "Sucesso!", "Tarefa atualizada com suceso");
    this.$router.push({ name: "list" });
    return;
}

O valor do this.form é uma instância de TasksModel, porque no created ele faz a busca de um registro.

Se usar somente o this.form.save() o vue-api-query já faz a atualização do registro.

Excluir Tarefa

Por fim a exclusão, vou atualizar somente o List.vue, primeiramente no botão que chama a função:

<b-button
    variant="outline-danger"
    class="mr-2"
    @click="remove(task.id)"
>
    Excluir
</b-button>

Agora o parâmetro é o id da tarefa, igual no edit.

Os métodos remove e confirmRemoveTask vão ficar assim:

async remove(taskId) {
  this.taskSelected = await TasksModel.find(taskId);
  this.$refs.modalRemove.show();
},

async confirmRemoveTask() {
  this.taskSelected.delete();
  this.tasks = await TasksModel.get();
  this.hideModal();
},

O resultado disso é a exclusão da tarefa na API Rest e a atualização da listagem após a remoção.

Vídeo

Código fonte

O código fonte está no meu CodeSandbox, neste link.

Para ver outros canais onde o posto conteúdo sobre VueJS, veja os Links do Programando Soluções.

Conclusão

Agora utilizando o json-server para criar a API Rest Fake e o axios + vue-api-query para fazer as requisições, tirei toda a complexidade do código do localStorage.

Todas as informações ficam salvas em um arquivo chamado db.json, que é atualizado conforme as operações que vou fazendo.

O código também está mais simples de entender e dar manutenção.

E agora o frontend tem comportamentos mais reais, fazendo requisições e com isso é possível simular mais comportamentos de produção.

Referências

https://www.npmjs.com/package/json-server

https://www.npmjs.com/package/axios

https://www.npmjs.com/package/vue-api-query

https://robsontenorio.github.io/vue-api-query/

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok