Платформа макета интерфейса с написанным интерфейсом

JavaScript

предисловие

Многие компании сейчас делают акцент на разделении front-end и back-end разработки. Возможна проблема. Back-end интерфейс еще не написан. Наши 🐂🐂 front-end студенты уже написали front-end, ждем отладку интерфейса. Для решения этой проблемы я написал мок-платформу интерфейсного интерфейса, сроки разработки проекта невелики, а идеи недостаточно ясны.

Адрес онлайн-опыта:Платформа макета интерфейса

Адрес источника:исходный код git

идеи

Запрос интерфейса содержит строку запроса, заголовок запроса и содержимое запроса. Затем мы можем разобрать запрос через узел, а затем сопоставить содержимое этого интерфейса и вернуть данные, соответствующие условиям запроса интерфейса, как фейкер. Данные, которые возвращает реальный интерфейс, подделываются, чтобы добиться того же эффекта, что и реальный интерфейс.

выполнить

Реализованные функции:

1. 登录注册
2. 增删项目工程
3. 增删接口
4. 接口mock

Стек технологий: nextjs + koa + sqlite + sequenceize

Общий проект не сложен, и для студентов, которые хотят изучить вышеуказанные методы, также может быть предоставлена ​​демонстрация.

Общая структура проекта

Проект основан на рендеринге на стороне сервера и имеет две страницы: домашнюю страницу и страницу сведений о проекте. Я поместил службу интерфейса из узла и службу из серверной среды рендеринга nexjs на один и тот же порт. Его также можно отделить, основная причина здесь в том, что мы не хотим запускать еще один сервис.

База данных использует sqlite3, ее преимущества встроены, нулевая настройка, сверхлегкий вес, данные хранятся в виде файлов, дополнительная настройка базы данных не требуется. Прямо скажем, удобно и, конечно, очень полезно.

Соединение с базой данных продолжается через инфраструктуру ORM: (объектно-реляционное сопоставление) Платформа использует метаданные для описания деталей объектно-реляционного сопоставления. Это хорошо. Это благо для студентов, которые не знают многого. о языке SQL После написания оператора SQL вам нужно только управлять базой данных, как js работает с объектом.

Схема маршрутизации также очень проста и в основном разделена на три маршрута:

  1. Маршруты, которые обрабатывают рендеринг страницы на стороне сервера,
  2. Маршруты, обрабатывающие запросы страниц,
  3. Обрабатывает маршрутизацию макетов интерфейса.
//next页面api接口
router.post('/api/:page', async ctx => {
    await routePost({ params: ctx.params.page, query: ctx.request.body }).then((res, err) => {
        response(res, err, ctx)
    })
})

router.get('/api/:page', async ctx => {
    await routeGet({ params: ctx.params.page, query: ctx.request.query }).then((res, err) => {
        response(res, err, ctx)
    })
})

router.delete('/api/:page', async ctx => {
    await routeDelete({ params: ctx.params.page, query: ctx.request.body }).then((res, err) => {
        response(res, err, ctx)
    })
})

//mock数据接口
router.all('/mock/:project_id/*', async ctx => {
    const { method, body, url, header } = ctx.request
    await routeMock({ params: ctx.params, body, method, url, header }).then((res, err) => {
        response(res, err, ctx)
    })
})

//next页面接口
app.prepare()
    .then(() => {

        // 首页
        router.get('/', async ctx => {
            await app.render(ctx.req, ctx.res, '/', ctx.query)
            ctx.respond = false
        })
        // 项目
        router.get('/project', async ctx => {
            await app.render(ctx.req, ctx.res, `/project`, ctx.query)
            ctx.respond = false
        })

        // 如果没有配置nginx做静态文件服务，下面代码请务必开启
        router.get('*', async ctx => {
            await handle(ctx.req, ctx.res)
            ctx.respond = false
        })
        // 防止出现控制台报404错误
        server.use(async (ctx, next) => {
            ctx.res.statusCode = 200
            await next()
        })
        server.use(router.routes()).use(router.allowedMethods())
        server.listen(port, () => {
            console.log(`> Ready on http://localhost:${port}`)
        })
    })

Используйте url как различие: api — это запрос страницы, mock — запрос имитации интерфейса, а другой — запрос рендеринга следующей страницы. Различная обработка выполняется путем оценки URL-адреса запроса:

routeDelete: async ({ params, query }) => {
        const { id } = query
        switch (params) {
            case 'project':
                await api.deleteApi(id)                     //删除项目的同时清空对应的api接口
                return await project.deleteOne(id).then(res => response(0, res)).catch(error => response(1, error.message))
            case 'interface':
                return await api.deleteOneApi(id).then(res => response(0, res)).catch(error => response(1, error.message))
            default:
                return '接口请求出错'
        }
    },

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

Общий процесс проекта

Новый проект (project_id)

->

Новый интерфейс (url, метод, заголовки, тело, данные)

->

Доменное имя локального прокси-интерфейса проекта

->

Сделать запрос к созданному интерфейсу (http://host/mock/project_id/xxxxxx)

->

koa анализирует запрос для получения параметров (url, метод, тело, заголовки)

->

Определите, соответствует ли параметр запроса соответствующему интерфейсу путем маршрутизации

->

По project_id переходим в таблицу данных интерфейса, чтобы найти соответствующие данные и вернуть их в локальный проект

Использование проекта

В настоящее время макет интерфейса проекта поддерживает только возврат данных json.В будущем я хотел бы добавить другие форматы данных, такие как возвращаемые массивы и логические значения.

использовать:

  1. в состоянии пройтионлайн-адресСоздайте свой собственный проект, настройте интерфейс и проверьте, можно ли использовать интерфейс через postman.
  2. Можно клонироватьисходный кодЛокальный запуск службы также можно протестировать с помощью почтальона или других инструментов, просто измените доменное имя службы на локальное.

позже

Этот проект является личным проектом с полностью открытым исходным кодом, а также для решения актуальных проблем разработки.

Проект только стартовал и еще не запущен в реальную эксплуатацию, должно быть много проблем и необоснованных мест. Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение.

Если вам интересно, вы можете найти мой здесьКонтакты, участвовать вместе, чтобы продолжить этот проект.

Категории