Слияние кода завершено, страница обновится автоматически
Инструмент на основе Express. Он позволяет быстро создавать API и генерировать данные, готов к использованию сразу после установки и удобен для развертывания.
npm i -g mockm
mm --config
Все уже сделано, вы создали свой собственный API, который имеет возможность работы с перекрестными доменами, функцию записи интерфейсов и функцию повторного воспроизведения.
Чтобы быстрее ознакомиться с этим инструментом, обратитесь к простому примеру конфигурации, созданному с помощью параметра --config mm.config.js. Вы можете просмотреть его, чтобы узнать больше информации!
Чтобы проверить результат, используйте браузер для доступа к http://127.0.0.1:9000/api/1.
Чтобы просмотреть детали запроса, используйте браузер для доступа к http://127.0.0.1:9005/#/get/api/1.
Для получения более подробной информации о других функциях продолжите чтение.
Изменено с: http://192.168.1.18:8080/api/
Изменено на: http://127.0.0.1:9000/api/
При совпадении с API backend будет использоваться свойДавайте создадим API самым простым способом:
module.exports = {
api: {
'/my/api': {
msg: 'Мой API',
},
},
};
API создано, перейдите по адресу http://127.0.0.1:9000/my/api чтобы проверить его работу.
Подробную информацию можно найти в разделе config.api, а также создавать API прямо через браузер, см. редактирование API.
Когда нам требуется вернуть различные данные в зависимости от значений, переданных API, это легко сделать:
module.exports = {
api: {
'/my/value': (req, res) => {
// req.params — параметры пути в URL
// req.query — параметры запроса в URL
// req.body — параметры в теле запроса
res.json({
desc: 'Вы передали значение',
data: req.query,
});
},
},
};
Теперь попробуйте отправить несколько параметров URL и протестируйте http://localhost:9000/my/value?city=上海, результат будет следующим:
{
"desc": "Вы передали значение",
"data": {
"city": "上海"
}
}
Предположим, что мне нужно создать список статей блога и реализовать такие функции как добавление статьи, поиск, пагинация, поиск по ключевому слову, удаление, редактирование и так далее. Для этого достаточно добавить следующий код:
module.exports = {
db: {
blogs: [
{
id: 1,
content: 'Mockm — удобный и гибкий инструмент для создания API. Выглядит неплохо!',
title: 'Первый день знакомства с Mockm',
},
],
},
};
```Теперь все указанные выше API уже созданы. В этом примере я использую HTTPie как инструмент для отправки запросов, но вы можете использовать любой другой инструмент, который вам нравится.
```sh
# Получить детали записи с ID 1
http :9000/blogs/1
# Создать запись о коллеге
http POST :9000/blogs title='День коллеги' content='Его жизнь сегодня так же мучительна'
# Получить все записи
http :9000/blogs
# Найти все записи содержащие слово 'мучительна'
http :9000/blogs?q=мучительна
# Получить детали записи с ID 1
http :9000/blogs/1
# Создать запись о коллеге
http POST :9000/blogs title='День коллеги' content='Его жизнь сегодня так же мучительна'
http post :9000/blogs
post :9000/blogs?q=горечь
Все сгенерированные интерфейсы следует проверять в соответствии с [config.db](https://hongqiye.com/doc/mockm/config/option.html#config-db).
### Как генерировать реалистичные данные
[mockjs](https://wll8.github.io/mockjs-examples/) — это отличный инструмент для генерации данных, который по умолчанию используется в mockm. Ниже приведён пример использования этого инструмента для создания набора данных пользователей.```js
module.exports = (util) => {
return {
db: {
users: util.libObj.mockjs.mock({
"data|15-23": [
// Генерация случайного количества данных от 15 до 23
{
"id|+1": 1, // id начинается с 1 и увеличивается
name: `@cname`, // Генерация случайного имени на кириллице
"sex|1": ["мужской", "женский", "не указано"], // Пол выбирается случайно из этих трёх вариантов
},
],
}).data,
},
};
};
```Теперь при обращении к http://localhost:9000/users можно будет видеть множество реалистичных данных пользователей.
### Как изменить данные, возвращаемые сервером
> Часто изменения данных на стороне сервера затруднены из-за сложной логики, поэтому лучше всего сделать это непосредственно в коде.
Предположим, что запрос GET к интерфейсу `http://192.168.1.18:8080/api/user` возвращает следующие данные:
```js
{
"code": 200,
"data": {
"books": [
{
"page": 52,
"type": "css"
},
{
"page": 26,
"type": "js"
}
],
"name": "Иванов"
},
"success": true
}
Если требуется заменить тип книги с индексом 1 на html, конфигурация может выглядеть так:
module.exports = {
proxy: {
"/": `http://192.168.1.18:8080`,
"/api/user": [`data.books[1].type`, `html`], // Первый аргумент указывает путь к полю, которое нужно изменить, второй — новое значение поля
},
};
Если требуется полностью заменить весь ответ на html, можно использовать такой подход:
module.exports = {
proxy: {
"/": `http://192.168.1.18:8080`,
"/api/user": [`html`], // Если передан один аргумент, он заменяет весь ответ
},
};
Дополнительные способы работы с этим можно найти в разделе config.proxy
Пример задержки времени ответа для интерфейса http://192.168.1.18:8080/api/user на 5 секунд:
module.exports = {
proxy: {
"/": `http://192.168.1.18:8080`,
"/api/user": {
mid(req, res, next) {
setTimeout(next, 5000);
},
},
},
};
module.exports = {
api: {
'/file'(req, res, next) {
res.download(`укажите здесь путь до файла для скачивания`);
},
},
};
Реализуйте интерфейс WebSocket по адресу ws://127.0.0.1:9000/wsecho, который при успешном соединении отправляет сообщение "соединение установлено" и возвращает обратно клиенту любое полученное от него сообщение.
api: {
'ws /wsecho' (ws, req) {
ws.send(`соединение установлено`)
ws.on('message', (msg) => {
ws.send(msg)
})
}
},
Клиентский код для подключения, можно использовать консоль браузера для тестирования:
function startWs(wsLink) {
window.ws = new WebSocket(wsLink);
ws.onopen = (evt) => {
ws.send(`сообщение от клиента`);
};
ws.onmessage = (evt) => {
console.log(`сообщение от сервера`, evt.data);
};
ws.onclose = (evt) => {
// повторное подключение
setTimeout(() => startWs(wsLink), 1000);
};
}
startWs(`ws://127.0.0.1:9000/wsecho`);
// ws.send(`отправка нового сообщения`)
Реализуйте интерфейс по адресу http://127.0.0.1:9000/status/code, где code — это динамический параметр, и интерфейс возвращает этот параметр.
module.exports = {
api: {
'/status/:code'(req, res, next) {
const { params, query, body } = req;
res.json({ statusCode: params.code });
},
},
};
Прощай, скриншоты! Прощай, вопросы и ответы! Прощай, слишком много параметров для копирования!
Прощай, скриншоты! Прощай, вопросы и ответы! Прощай, слишком много параметров для копирования!По умолчанию каждый запрос генерирует ссылку в заголовке x-test-api, которую можно передать backend.
Метод 1 Можно увидеть прямо в командной строке при запуске mockm.
Метод 2 В списке на странице http://127.0.0.1:9005.
Метод 3 Если вы используете Chrome DevTools, найдите запрос в разделе Network, а затем заголовок x-test-api в разделе Response Headers.
Установите параметр config.remote как true, чтобы иметь доступ к интерфейсу через доменное имя и сертификат HTTPS, что позволит использовать его в WeChat Public Account или отправлять другим пользователям.
В консоли будет отображаться информация о "удалённом сервисе", а также будут сгенерированы соответствующие ссылки для удалённого доступа для x-test-api и интерфейсов.
Если какой-то API был рабочим ранее, но сломался из-за некоторых проблем, а backend ещё не успел его отремонтировать, что делать?
Для этого можно выбрать в истории запросов ту запись, которая была успешной, на странице http://127.0.0.1:9005, затем нажать webApi => использовать эту запись.
http://127.0.0.1:9001, чтобы использовать данные, которые были получены ранее.## Операция с использованием MockM через UIВы также можете создавать API или управлять историей запросов через пользовательский интерфейс. Ниже приведены некоторые скриншоты, полная документация доступна по ссылке интерфейс.
Детали записи запроса
История запросов для конкретного API
Создание API через UI
| Инструмент | Краткое описание | Примечания |
|---|---|---|
| mockjs | Интерцепт запросов xhr на стороне клиента, генерирует данные | Нельзя видеть запросы в консоли браузера |
| json-server | Создает RESTful API на основе JSON | Отсутствует возможность создания данных |
| yapi/rap2 | Управление документацией API, генерация API и данных | Сложная установка, трудно синхронизировать с проектом фронтенда |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------| | taroify | Taroify — это версия компонентов Vant для Taro, они основаны на одном дизайнерском стандарте и предоставляют одинаковый API для быстрого создания мобильных приложений. | | wot-design-uni | Это набор компонентов для uni-app, разработанный на Vue3 + TS, который предоставляет более 70 высококачественных компонентов, поддерживающих темную тему, интернационализацию и пользовательскую настройку. |
Copyright (c) 2017—настоящее время, xw
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )