Слияние кода завершено, страница обновится автоматически
Фреймворк, основанный на Express. Он может быстро генерировать API и создавать данные, готовые к развертыванию сразу после установки.
npm i -g mockm в командной строкеmm --config в командной строкеВсе работы завершены, вы создали свой собственный API, который позволяет делать запросы с��越多段落的文本后，可以将其完全翻译成俄文如下所示：
Фреймворк, основанный на Express. Он может быстро генерировать API и создавать данные, готовые к развертыванию сразу после установки.
npm i -g mockm в командной строкеmm --config в командной строкеВсе работы завершены, вы создали свой собственный API, который позволяет делать запросы с кросс-доменной поддержкой, имеет функцию записи запросов и возможность повторного воспроизведения...
Для быстрого понимания, параметр --config создаёт простой пример конфигурационного файла mm.config.js, который можно просмотреть и исследовать его возможности!
Вот несколько примеров конфигураций для различных сценариев, включая различные прокси и перехватчики, API-ы и методы создания данных. Подробнее о конфигурациях, пожалуйста, прочитайте описание опций.### Как включить поддержку CORS для backend API
Не требуется настраивать webpack, изменения со стороны сервера или использование плагинов браузера
Эта функция поддерживается mockm по умолчанию. Вы можете запустить mockm самым простым способом, выполнив следующую команду в командной строке:
mm proxy=http://192.168.1.18:8080
Вы также можете использовать метод конфигурационного файла. Создайте файл mm.config.js и введите следующее содержимое, затем выполните команду mm в командной строке:
module.exports = {
прокси: `http://192.168.1.18:8080`,
};
Затем замените исходный адрес запроса на свой собственный. Например, если ваш IP — Yöntem 127.0.0.1, выполните следующие изменения:
Когда это тот же самый API, что и backend API, будет использоваться ваш собственный API
Давайте создадим API самым простым образом:
module.exports = {
api: {
"/моё/api": {
msg: `Мой API`,
},
},
};
API теперь доступен по адресу http://127.0.0.1:9000/моё/api и вы можете увидеть его работу.
Подробнее см. в разделе конфигурация API. Для удобства работы с коллегами API также можно создавать через веб-интерфейс. Подробнее см. в разделе редактирование интерфейсов.
Когда вам нужно возвращать различные данные в зависимости от значений, переданных в API, это также легко реализовать:
module.exports = {
api: {
"/моё/значение": function(req, res) {
// req.params — это параметры пути в URL
// req.query — это параметры запроса в URL
// req.body — это параметры в теле запроса
res.json({ desc: `Переданное значение`, data: req.query });
},
},
};
```Следующим шагом является обращение к API и передача некоторых параметров URL для тестирования. Например, http://localhost:9000/моё/значение?город=Шанхай вернёт:
```json
{
"desc": "Переданное значение",
"query": {
"город": "Шанхай"
}
}
Предположим, мне нужно создать список статей блога и реализовать различные функциональности для этих API, такие как добавление статей, поиск статей, пагинация, размытое поисковое слово, удаление, модификацию и т.д. Все, что вам нужно сделать, это добавить следующий контент:
module.exports = {
база_данных: {
статьи: [
{
id: 1,
содержание: `mockm — это удобный и гибкий инструмент для создания интерфейсов. Вид красивый~`,
заголовок: `Первый день знакомства с mockm`,
},
],
},
};
Все интерфейсы, которые требуются для реализации выше, уже были созданы. Здесь я использую httpie как инструмент запросов, чтобы кратко продемонстрировать несколько возможностей. Вы можете использовать любой другой предпочитаемый инструмент для отправки запросов.
# Просмотреть детали блога с 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 использует его по умолчанию. Ниже приведён пример кода, который генерирует пакет информации о пользователях с помощью mockjs.
```js
module.exports = (util) => {
return {
db: {
users: util.libObj.mockjs.mock({
"data|15-23": [
// Генерация от 15 до 23 случайных записей
{
"id|+1": 1, // id начинается с 1 и увеличивается на 1
name: `@cname`, // Генерация случайных китайских имён
"sex|1": ["Мужской", "Женский", "Неизвестный"], // Случайный выбор одного из этих трёх полов
},
],
}).data,
},
};
};
Теперь вы можете получить доступ к http://localhost:9000/users чтобы просмотреть большое количество реалистичных данных о пользователях.
В большинстве случаев непросто напрямую менять данные на серверной стороне, так как это требует много логики. Написание этого напрямую в коде на клиентской стороне является трудоёмким и склонным к ошибкам.Предположим, что ответ GET запроса к серверному интерфейсу
http://192.168.1.18:8080/api/userимеет следующий вид:
{
"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);
},
},
},
};
Реализуйте интерфейс для скачивания файла http://127.0.0.1:9000/file и отправьте конкретный файл клиенту.
module.exports = {
api: {
"/file"(req, res, next) {
res.download(`Укажите путь к файлу здесь`);
},
},
};
```### Как создать интерфейс для работы с WebSockets
Реализуйте интерфейс для работы с WebSockets ws://127.0.0.1:9000/wsecho, при установлении соединения отправьте "Подключение успешно", а также отразите сообщение, отправленное клиентом, обратно клиенту.
```js
api: {
'ws /wsecho': function(ws, req) {
ws.send(`Подключение успешно`);
ws.on('message', function(msg) {
ws.send(msg);
});
}
},
Клиентский код подключения, который может быть проверен непосредственно в консоли браузера:
function startWs(wsLink) {
window.ws = new WebSocket(wsLink);
ws.onopen = function(evt) {
ws.send(`Сообщение, отправленное клиентом`);
};
ws.onmessage = function(evt) {
console.log(`Сообщение, полученное от сервера`, evt.data);
};
ws.onclose = function(evt) {
// Перезапуск
setTimeout(function() {
startWs(wsLink);
}, 1000);
};
}
startWs(`ws://127.0.0.1:9000/wsecho`);
// ws.send(`Отправка нового сообщения`)
Реализуйте интерфейс http://127.0.0.1:9000/status/code, где "code" является динамическим параметром в URL, и он возвращает полученный код.
module.exports = {
api: {
'/status/:code': function(req, res, next) {
const { params, query, body } = req;
res.json({ statusCode: params.code });
},
},
};
Больше нет скриншотов, вопросов туда-сюда и невозможности копировать параметры
По умолчанию каждый запрос генерирует ссылку в заголовке ответа как x-test-api. Просто отправьте эту ссылку в бэкенд.
Метод 1 Вы можете видеть её непосредственно на командной строке при запуске mockm.- Метод 2 Найдите её в списке на странице http://127.0.0.1:9005.
Метод 3 Если вы используете Chrome Developer Tools, вы можете найти запрошенный интерфейс в разделе Network и найти x-test-api в заголовках ответа.
Установите config.remote в значение true для создания публичного интерфейса с доменным именем и сертификатом HTTPS. Это позволит вам использовать его на официальных аккаунтах WeChat или делиться им с другими для удалённого использования.
Информация о "удалённом сервисе" будет отображаться в консоли, а также x-test-api и интерфейсы будут генерировать соответствующие ссылки для удалённого доступа.
Если какой-то интерфейс ранее работал, но теперь сломан из-за проблем, которые бэкенд ещё не успел исправить, а фронтенд имеет страницы, зависящие от этого интерфейса, что делать?
На странице http://127.0.0.1:9005 выберите хорошую историю запросов, соответствующую этому интерфейсу, и щёлкните по "webApi => Используйте эту запись".
Содержание, отображаемое на страницах, берётся из данных. Если сервер бэкенда имеет проблемы и все интерфейсы недоступны, можно изменить адрес запроса на http://127.0.0.1:9001, чтобы страницы могли использовать данные, ранее возвращенные сервером.## Управление MockM через UI
Вы также можете создавать интерфейсы или управлять историей запросов через ввод в UI. Ниже приведены некоторые скриншоты, обратитесь к инструкциям UI для подробной документации.
Детали записи запроса
История запросов для определённого API
Создание API через UI
| Инструмент | Описание | Примечания |
|---|---|---|
| mockjs | Интерцепт запросы XHR в фронтенде и генерировать данные | Запрос не виден в консоли сети |
| json-server | Генерация RESTful API с использованием JSON | Нет встроенной возможности генерации данных |
| yapi/rap2 | Управление документацией API и генерация интерфейсов и данных | Сложность установки и синхронизация с проектами фронтенда |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | taroify | Taroify — это версия мобильной библиотеки компонентов Vant для Taro. Оба основаны на одной визуальной спецификации и предоставляют согласованные API-интерфейсы для помощи разработчикам быстро создавать мини-приложения. |## Лицензия
Авторское право © 2017—настоящее время, xw
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )