一个前端写的接口mock平台

前言

如今不少公司都讲求先后端分离开发。 这可能会存在一个问题， 后端接口还没写好， 我们🐂🐂的前端同窗已经把前端写完了， 急等接口调试。为了解决这个问题， 写了个前端接口mock的平台， 项目开发时间不长，思路也不尽清晰，大佬轻喷。

线上体验地址： 接口mock平台

源码地址： git源码

思路

一个接口请求包含了请求行， 请求头， 请求内容。 那咱们就能够经过node解析一个请求而后对这个接口的内容进行匹配， 将符合接口请求的条件的数据返回去， 这样就像一个faker。 伪造了一个真正的接口会返回的数据， 从而达到和真正的接口同样的效果。

实现

实现的功能：

1. 登陆注册
2. 增删项目工程
3. 增删接口
4. 接口mock
复制代码

技术栈： nextjs + koa + sqlite + sequelize

本项目整体不算复杂， 也能够给想学习上面技术的同窗提供一个demo。

项目总体架构

项目基于服务端渲染， 有两个页面： 首页和项目详情页。 我把node起的接口服务和服务端渲染框架nexjs起的服务放在了同一个端口。 也能够分开， 这里主要是不想再起一个服务了。

数据库使用的sqlite3， 它的好处是嵌入式，零配置， 超轻量级，数据以文件的形式存储， 不须要额外配置数据库了。 说白了， 就是方便， 固然也很好用。

数据库链接是经过ORM框架sequelize： (Object Relational Mapping)框架采用元数据来描述对象一关系映射细节， 这是个好东西啊， 对于不太懂SQL语言的前端同窗简直是福音， 经过它咱们就能够不用写SQL语句了， 只须要像js操做对象那样就能操做数据库了。

路由设计也很简单， 主要分为三种路由：

1. 处理服务端页面渲染的路由，
2. 处理页面请求的路由，
3. 处理接口mock的路由。

//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是接口mock请求， 别的是next页面渲染请求。 经过判断请求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， method， headers， body， data）

->

本地项目代理接口的域名

->

对建立的接口发起请求（ http://host/mock/project_id/xxxxxx）

->

koa解析请求获取参数（url， method， body， headers）

->

经过路由判断请求参数匹配对应的接口

->

根据project_id去接口数据表里查找对应的数据并返回给本地项目

项目使用

目前项目接口mock只支持返回json数据， 后续想添加返回数组，布尔值等其余数据格式。

使用：

1. 能够经过线上地址建立本身的项目， 配置接口， 经过postman便可测试接口是否能使用。
2. 能够经过clone源码本地跑服务， 一样能够经过postman或其余工具进行测试， 只须要将服务域名改为本地便可。

后话

本项目为我的项目， 彻底开源， 也是为了解决开发实际存在的痛点。

项目刚启动， 还没有投入真正的使用， 确定存在不少问题， 和不合理的地方。若有问题， 欢迎留言。

若有感兴趣的道友能够在这里找到个人联系方式， 一块儿参与进来将这个项目持续作下去。