一个前端写的接口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操作对象那样就能操作数据库了。

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

处理服务端页面渲染的路由，
处理页面请求的路由，
处理接口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数据，后续想添加返回数组，布尔值等其他数据格式。

使用：

可以通过线上地址创建自己的项目，配置接口，通过postman即可测试接口是否能使用。
可以通过clone源码本地跑服务，同样可以通过postman或其他工具进行测试，只需要将服务域名改成本地即可。

后话

本项目为个人项目，完全开源，也是为了解决开发实际存在的痛点。

项目刚启动，尚未投入真正的使用，肯定存在很多问题，和不合理的地方。如有问题，欢迎留言。

如有感兴趣的道友可以在这里找到我的联系方式，一起参与进来将这个项目持续做下去。