JSON-server. Тестируем front-end без back-end
Рубрика: JavaScript -> Программирование
Метки: angular.js | JavaScript | json | npm | инструменты | полезности | примеры | программирование | советы
Просмотров: 28885
В последние время по вечерам частенько играюсь с JavaScript и фреймворком angular.js. Сидишь себе, что-нибудь изобретаешь, и постоянно упираешься в одну и ту же проблему – чтобы нормально потестить новоиспеченное приложение необходимо принимать какие-нибудь данные с сервера.
Например, хочется мне сделать телефонный справочник. Не проблема, накидываю структуру, пишу JS и все бы хорошо, но ведь в реале телефоны должны храниться на сервере. Пока сервера нет – создаю заглушки, но это удобно далеко не всегда. Как было бы хорошо иметь какую-нибудь тулзу, которой можно скормить файл в json формате и получить готовое API для проведения тестов.
Json-сервер. Строим велосипед
Сначала мне было лень что-то искать, и я решил проблему по-нашему, по-программерски. Написал небольшой скриптик, который отдавал подготовленный набор данных в формате json. Все дешево и сердито. Вроде данные возвращает, но нет возможности генерировать нормальную структуру пути (например, users/1/comments). Вдоволь поигравшись со своим велосипедом и получив ломку в виде «мне не хватает гибкости», мне пришлось выбросить свое творение и отправиться на GiHub в поиске чего-то более продвинутого.
Json-server – решение всех моих проблем
Поиск по ключевым словам “json server” сразу вывел меня на проект «json-server». На момент поиска проект насчитывал больше 7000 звездочек, а это один из признаков качества и популярности решения. Бегло прочитав описание, понял, что это то что мне и нужно, даже больше.
JSON-server позволяет решить сразу несколько проблем:
[ul]
{
"posts": [
{ "id": 1, "title": "this is first post", "body": "Текст поста", "author": "Игорь Антонов"},
{ "id": 1, "title": "this is first post", "body": "Текст поста", "author": "Игорь Антонов"},
{ "id": 1, "title": "this is first post", "body": "Текст поста", "author": "Игорь Антонов"}
],
}
Скармливаем подготовленный файл json-server и сразу получаем поднятый web-сервер с готовым API: http://localhost:3000/posts/1. Поскольку определенный функционал повторяется от проекта к проекту, я сразу себе сделал несколько заготовок и теперь постоянно их использую.
Простой пример динамического формирования данных:
module.exports = function() {
var data = { users: [] }
for (var i = 0; i < 1000; i++) {
data.users.push( { id: i, name: 'userok' + i, age: i } )
}
return data;
}
Пример использования json-server
Я понимаю, что все примеры можно посмотреть в документации, но раз уж взялся за описание, то приведу сразу небольшой рабочий кейс.
[ol]
npm install -g json-server
mkdir test-project touch data.json
Содержимое файла data.json:
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"id": 2,
"title": "test!",
"author": "Spider_NET"
},
{
"id": 3,
"title": "test!",
"author": "lord=of-fear"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
]
}
json-server data.json –w
Берем на заметку
Посмотреть полную документацию и внести при желании свою лепту в развитие проекта всегда можно через репозиторий на git hub.