Usando o json-server

Em um projeto na qual o back-end ainda não está pronto, porém você precisa ou deseja iniciar o desenvolvimento do front-end, o json-server é veio pra resolver esse problema. Outro cenário seria você estar programando em back-end porém precisa simular dados advindos de uma API por exemplo.

Dependências

Instalação

npm install -g json-server

Criando o ‘Banco’

Vamos criar nosso arquivo json que será nossa ‘base de dados’. Em nosso exemplo o nome do arquivo será db.json mas poderia ser qualquer outro.

{
  "users": [
    {"id": 1, "nome": "Eder Taveira", "Data de Nascimento": "1983-02-28"},
    {"id": 2, "nome": "Maria Helena", "Data de Nascimento": "2013-06-05"}
  ], 
  "settings": { "color" : "#efefef", "margin" : "10px", "systems": { "linux": true, "windows": false}} 
}

Rodando o Servidor

json-server --watch db.json

Você pode realizar um teste no browser usando: http://localhost:3000/users, irá retornar algo como:

[
    {"id": 1, "name": "Eder Taveira", "birthdate": "1983-02-28"},
    {"id": 2, "name": "Maria Helena", "birthdate": "2013-06-05"}
]

Rotas

O ‘:id’ indica uma variável que deve ser um id existente.

Listas:

  • GET – /users
  • GET – /users/:id (Detalhando um usuário)
  • POST – /users (Usado para criar dados, incluir)
  • PUT – /users/:id (Usado para atualizar dados)
  • PATCH – /users/:id (Usado para atualizar dados porém apenas uma parte dele)
  • DELETE – /users/:id (Usado para deletar um item)

Objeto json Simples:

  • GET – /settings
  • POST – /settings
  • PUT – /settings
  • PATCH – /settings

Filtrar resultados

  • GET – /users?nome=json-server&birthdate=2013-06-05
  • GET /users?id=1&id=2
  • GET /comments?author.name=typicode

Existem outras funcionalidades como Paginação, Ordenação que você pode ver da documentação completa.

Deixe um comentário