Практика и кастомная настройка json-сервера

внешний интерфейс сервер JSON JavaScript

задний план

Не использовал его в предыдущих проектахmockДля сервисов подождите, пока бэкенд оставит место для поля интерфейса или фронтенда, но проект новой компании нужно построитьmockсервис, я хотел поставить старый проектjson-serverСюда можно переместиться, но я обнаружил, что добавление фиктивного API слишком сложно.mockСервис должен быть простым, поэтому я решил написать его сам (я подумал, что было бы неплохо написать файл json...).

упреждающий дизайн

по моемуmockЧтобы понять сервис, вам нужно только определить URL-адрес в спокойном стиле и вернуть соответствующие данные, а затем просто прочитать его.Пример документации

1. Создатьdb.json

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

2. Старт

$ json-server --watch db.json

3. Доступhttp://localhost:3000/posts/1

{ "id": 1, "title": "json-server", "author": "typicode" }

вау не так простокопаться в себе), затем просто преобразуйте данные в форму маршрутизации

// db.js
module.expors = {
    '/posts': require('./data/posts.json'),
    '/user/login': require('./data/user/login.json'),
    '/user/logout': require('./data/user/logout.json')
}

Структура каталогов

mock
|
└───data
|   |
|   └───posts.json
|   └───user
|       |
|       └───login.json
|       └───logout.json
|
└───db.js
└───server.js // 预期通过 node server.js 执行

практика один

написать server.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// 获取db数据
const db = require('./db.js')

// Use router
server.use(jsonServer.router(db))

server.listen(3000, () => {
  console.log('JSON Server is running on 3000')
})

Сообщается об ошибке после выполнения node server.js

/ aren't supported, if you want to tweak default routes, see
https://github.com/typicode/json-server/#add-custom-routes

вроде не поддерживаетстиль маршрутизацииизdbданные, эта попытка будетdbИзмените данные навложение объектоврежим, хотя он недостаточно интуитивно понятен, чтобы увидеть адрес интерфейса, в любом случае это просто файл json

// db.js
module.expors = {
    'posts': require('./data/posts.json'),
    'user': {
        'login': require('./data/user/login.json'),
        'logout': require('./data/user/logout.json')
    }
}

Теперь работает, откройhttp://localhost:3000/user/loginа как же это пустой объект{}, журнал показываетGET /user/login 404 4.161 ms - 2;Открытьhttp://localhost:3000/user, может отображать данные входа и выхода, похоже, это рассматривается как/userинтерфейс, как возвращает json-сервер/user/loginДанные? Даже если стиль роутинга не поддерживается, даже это нельзя прочитать...

практика два

смjsonServer.rewriterметод, мы можем переписать его сноваdb.jsа такжеserver.js

// db.js
module.expors = {
    'posts': require('./data/posts.json'),
    'user_login': require('./data/user/login.json'),
    'user_logout': require('./data/user/logout.json')
}

// server.js
... 省略部分代码

// 需要加在 server.use(router) 前
server.use(jsonServer.rewriter({
  '/user/login': '/user_login',
  '/user/logout': '/user_logout'
}))
// Use router
server.use(jsonServer.router(db))

server.listen(3000, () => {
  console.log('JSON Server is running on 3000')
})

Наконец-то это работаетmockслужил, хотя это немного некрасиво, да и сам json-сервер поддерживает только/posts/:id(выбирается по указанному атрибуту id элемента), не поддерживается/posts/:id/xxxЭтот способ записи (нужно добавить вручнуюjsonServer.rewriter)

Полный

Когда файлов становится все больше и больше, вручную добавляйтеdb.jsа такжеjsonServer.rewriterэто своего рода проблема, поэтому он должен быть автоматически сгенерирован в соответствии с каталогом файловdbа такжеjsonServer.rewriter, чтобы мы добавили апи просто добавьте файл json по соответствующему пути (адрес будет прикреплен в конце кода)

путать

используется как передняя частьmockСлужбе, по сути, нужно только решить пробел в данных запроса на получение во время разработки и избежать необходимости изменять совместную отладку, вызванную первым заполнением данных на странице; другой - написать достаточно интуитивно понятный и достаточно простой, я думаю, что json-сервер еще не сделал этого. очень хорошо (Надеюсь, я не понял, как использовать json-сервер), интерфейс маршрутизации нельзя увидеть интуитивно, а API для отдыха не может быть хорошо представлен (необходимо добавитьjsonServer.rewriter).

Если я напишуmockуслуга, я мог бы использоватьkoaа такжеkoa-router, просто напишите интерфейс получения маршрута

// router.js
router.get('/posts', () => require('./data/posts.json'))
router.get('/posts/:id', () => require('./data/posts/id.json'))
router.get('/user/login', () => require('./data/user/login.json'))
router.get('/user/logout', () => require('./data/user/logout.json'))

ps: я знаю, что json-сервер также имеетserver.getметод, но это, кажется, то же самое, что иdb.jsonконфликт файлов

Я напишу json-файл для каждого интерфейса, который по крайней мере выглядит интуитивно понятным и достаточно простым для написания, а моя ручная реализация restful гораздо понятнее, чем неполная поддержка json-server;

Суммировать

Первый раз практикуюсь в сборке json-сервера.Может использование и понимание не правильное.Надеюсь укажете на какие проблемы,ставлюmockУслуги, инкапсулированные в их собственномvue-cli templateвверх, вы можете пройтиvue init masongzhi/vue-template-webpack my-projectУстановить,mockслужба в/mockпод папку.

пс:

Статьи по Теме:Настроить шаблон/веб-пакет vue-cli

Категории