Как запустить json server

JSON Server предоставляет возможность создать полнофункциональный REST API за считанные минуты, используя всего один JSON-файл. Для установки достаточно выполнить npm install -g json-server, после чего сервер готов к работе на порту 3000 по умолчанию. Такой подход позволяет быстро тестировать фронтенд-приложения без необходимости настраивать полноценную базу данных.

Создание тестовой базы начинается с файла db.json, где данные можно структурировать как массивы объектов. Например, для списка пользователей можно использовать: {«users»: [{«id»:1,»name»:»Иван»}, {«id»:2,»name»:»Мария»}]}. JSON Server автоматически генерирует маршруты для CRUD-операций, что позволяет выполнять GET, POST, PUT, PATCH и DELETE-запросы без дополнительной настройки.

Сервер легко интегрируется с любыми фронтенд-фреймворками, включая React, Vue и Angular. Для быстрого тестирования достаточно указать URL http://localhost:3000/users в fetch или axios. Также JSON Server поддерживает фильтры и сортировку через параметры запроса, что упрощает отладку и проверку различных сценариев работы приложения с данными.

Установка JSON Server через npm и проверка версии

Для установки JSON Server необходимо иметь установленный Node.js версии 18+ и npm версии 9+. Выполните команду npm install -g json-server для глобальной установки, чтобы сервер был доступен из любой директории системы.

После установки убедитесь, что пакет корректно установлен, вызвав json-server —version. Команда выведет текущую версию, например 0.17.3. Если версия не отображается, проверьте переменную окружения PATH и повторите установку с правами администратора или через sudo на Linux и macOS.

Для локального проекта можно выполнить npm install json-server —save-dev, чтобы сохранить зависимость в package.json. Это позволяет запускать сервер только в рамках проекта через npx json-server, исключая глобальные конфликты версий.

Создание простого файла db.json для тестовой базы

Файл db.json служит источником данных для JSON Server. Он должен быть валидным JSON и содержать объекты с массивами для разных сущностей. Минимальный пример для тестовой базы пользователей и задач выглядит так:

{
"users": [
{"id": 1, "name": "Иван", "email": "ivan@example.com"},
{"id": 2, "name": "Мария", "email": "maria@example.com"}
],
"tasks": [
{"id": 1, "title": "Сделать отчёт", "completed": false},
{"id": 2, "title": "Обновить сайт", "completed": true}
]
}

При создании файла рекомендуется придерживаться следующих правил:

• Использовать уникальные id для каждого объекта.
• Сохранять имена ключей в нижнем регистре без пробелов.
• Разделять разные сущности отдельными массивами для удобства фильтрации.
• Соблюдать правильную структуру JSON, чтобы избежать ошибок при запуске сервера.

Для быстрого расширения базы можно копировать объекты и изменять значения ключей. JSON Server автоматически поддерживает все CRUD-операции с любыми массивами, добавленными в db.json.

Запуск сервера и доступ к данным через локальный адрес

Для запуска JSON Server используйте команду json-server —watch db.json. По умолчанию сервер запускается на http://localhost:3000 и отслеживает изменения в файле db.json в реальном времени. Любые добавленные или изменённые записи становятся сразу доступны через API.

Чтобы указать другой порт, добавьте флаг —port, например: json-server —watch db.json —port 4000. В этом случае URL доступа к данным будет http://localhost:4000.

Каждый массив из db.json становится маршрутом REST API. Например, массив users доступен по http://localhost:3000/users, массив tasks – по http://localhost:3000/tasks. JSON Server автоматически обрабатывает GET-запросы для всех маршрутов, возвращая список объектов в формате JSON.

Для тестирования работы API удобно использовать браузер, Postman или curl. Пример запроса через curl: curl http://localhost:3000/users. Ответ содержит массив пользователей с идентификаторами и полями, заданными в db.json.

Добавление, изменение и удаление записей через HTTP-запросы

JSON Server поддерживает полный набор CRUD-операций. Для взаимодействия с данными используются стандартные HTTP-методы:

Для проверки операций можно использовать curl, Postman или встроенные функции fetch в фронтенде. JSON Server возвращает объект, который отражает изменения, что упрощает автоматическое тестирование данных.

Настройка маршрутов и фильтров для конкретных данных

JSON Server позволяет создавать кастомные маршруты через файл routes.json, чтобы переопределять стандартные пути. Например, для сокращённого доступа к списку пользователей можно прописать: { «/all-users»: «/users» }. После этого GET-запрос к /all-users вернёт те же данные, что и /users.

Фильтрация выполняется через query-параметры. Примеры:

• /users?id=2 – возвращает пользователя с конкретным id.
• /tasks?completed=false – все незавершённые задачи.
• /users?name_like=Мар – поиск пользователей по части имени.

Для сложных условий можно комбинировать фильтры через амперсанд:

/tasks?completed=false&id_gte=3 – задачи с id 3 и выше, которые ещё не выполнены.

Сортировка выполняется с помощью параметров _sort и _order:

• /users?_sort=name&_order=asc – сортировка по имени по возрастанию.
• /tasks?_sort=id&_order=desc – сортировка по идентификатору по убыванию.

Для постоянного применения маршрутов запуск сервера осуществляется командой: json-server —watch db.json —routes routes.json. Это позволяет использовать заранее настроенные эндпоинты без изменения структуры db.json.

Использование JSON Server с фронтенд-приложениями для тестирования

Для интеграции JSON Server с фронтендом укажите базовый URL сервера, например http://localhost:3000, при отправке запросов через fetch или axios. GET-запрос к /users вернёт список пользователей из db.json, который можно сразу отобразить в интерфейсе.

Пример fetch-запроса в React:

fetch(‘http://localhost:3000/users’).then(res => res.json()).then(data => setUsers(data))

POST, PUT и PATCH-запросы позволяют тестировать формы добавления и редактирования данных. Например, для добавления новой задачи: fetch(‘http://localhost:3000/tasks’, { method: ‘POST’, headers: {‘Content-Type’:’application/json’}, body: JSON.stringify({title:’Новая задача’, completed:false}) }).

Для динамических фильтров используйте query-параметры прямо в URL. Пример: http://localhost:3000/tasks?completed=false&_sort=id&_order=asc – вернёт только незавершённые задачи, отсортированные по идентификатору.

JSON Server позволяет работать с локальными данными без настройки бэкенда, что ускоряет отладку компонентов интерфейса и проверку реакций приложения на различные наборы данных.

Вопрос-ответ:

Можно ли использовать JSON Server на одном компьютере для нескольких проектов одновременно?

Да, можно. Для этого каждому проекту следует назначить отдельный порт при запуске сервера, например json-server —watch db.json —port 3001 для одного проекта и —port 3002 для другого. Это позволяет работать с разными базами данных одновременно, не создавая конфликтов между проектами.

Как JSON Server обрабатывает добавление новых записей с уникальным ID?

При добавлении новой записи через POST JSON Server автоматически присваивает полю id значение, которое больше на единицу, чем наибольшее существующее ID в массиве. Если массив пустой, первый объект получает id 1. Такой подход упрощает тестирование, так как не нужно следить за уникальностью идентификаторов вручную.

Какие возможности фильтрации данных предоставляет JSON Server?

JSON Server поддерживает фильтрацию через query-параметры URL. Например, /users?id=2 вернёт пользователя с указанным ID, /tasks?completed=false — все незавершённые задачи, а /users?name_like=Мар — пользователей, у которых имя содержит «Мар». Для сложных запросов можно объединять фильтры через &, например: /tasks?completed=false&id_gte=3.

Можно ли создать собственные маршруты для быстрого доступа к определённым данным?

Да, для этого используется файл routes.json. В нём задаются новые пути, указывающие на существующие маршруты или фильтры. Например, { «/all-users»: «/users», «/active-tasks»: «/tasks?completed=false» }. После запуска сервера с параметром —routes routes.json эти маршруты становятся доступными для запросов.

Как использовать JSON Server вместе с фронтенд-фреймворками для тестирования интерфейсов?

При интеграции с React, Vue или другими фреймворками достаточно указывать базовый URL сервера при отправке запросов fetch или axios. GET-запросы возвращают массив объектов для отображения, POST и PUT позволяют создавать и изменять записи, DELETE удаляет их. Это позволяет проверить работу компонентов и реакцию интерфейса на изменения данных без полноценного бэкенда.

Можно ли использовать JSON Server для тестирования сложных связей между таблицами, например, пользователей и их задач?

Да, JSON Server позволяет моделировать связи между разными массивами данных. Например, если в db.json есть массив users с уникальными ID и массив tasks, каждая задача может содержать поле userId, указывающее на конкретного пользователя. После этого можно фильтровать задачи по пользователю через URL: /tasks?userId=2 вернёт все задачи пользователя с ID 2. Также поддерживаются сложные запросы с фильтрацией и сортировкой, например: /tasks?userId=2&completed=false&_sort=id&_order=asc, что позволяет тестировать интерфейсы с реальными сценариями взаимодействия между таблицами.