一个前端写的接口mock平台

lsekfe

　前言
　　现在很多公司都讲求前后端分离开发。 这可能会存在一个问题， 后端接口还没写好， 咱们前端同学已经把前端写完了，急等接口调试。为了解决这个问题，写了个前端接口[url=]mock[/url]的平台，项目开发时间不长，思路也不尽清晰，大佬轻喷。
　　思路
　　一个接口请求包含了请求行， 请求头， 请求内容。 那我们就可以通过node解析一个请求然后对这个接口的内容进行匹配， 将符合接口请求的条件的数据返回去， 这样就像一个faker。 伪造了一个真正的接口会返回的数据， 从而达到和真正的接口一样的效果。
　　实现
　　实现的功能：
　　1. 登录注册
　　2. 增删项目工程
　　3. 增删接口
　　4. 接口mock
　　[url=]技术[/url]栈：nextjs + koa + sqlite + sequelize
　　本项目总体不算复杂， 也可以给想学习上面技术的同学提供一个demo。
　　项目整体架构
　　项目基于服务端渲染， 有两个页面： 首页和项目详情页。 我把node起的接口服务和服务端渲染框架nexjs起的服务放在了同一个端口。 也可以分开， 这里主要是不想再起一个服务了。
　　[url=]数据库[/url]使用的sqlite3， 它的好处是嵌入式，零配置， 超轻量级，数据以文件的形式存储， 不需要额外配置数据库了。 说白了， 就是方便， 当然也很好用。
　　数据库连接是通过ORM框架sequelize： (Object Relational Mapping)框架采用元数据来描述对象一关系映射细节， 这是个好东西啊， 对于不太懂[url=]SQL[/url]语言的前端同学简直是福音， 通过它我们就可以不用写SQL语句了， 只需要像js操作对象那样就能操作数据库了。
　　路由设计也很简单， 主要分为三种路由：
　　处理服务端页面渲染的路由，
　　处理页面请求的路由，
　　处理接口mock的路由。

1. //next页面api接口
   
2. 　　router.post('/api/:page', async ctx => {
   
3. 　　    await routePost({ params: ctx.params.page, query: ctx.request.body }).then((res, err) => {
   
4. 　　        response(res, err, ctx)
   
5. 　　    })
   
6. 　　})
   
7. 　　router.get('/api/:page', async ctx => {
   
8. 　　    await routeGet({ params: ctx.params.page, query: ctx.request.query }).then((res, err) => {
   
9. 　　        response(res, err, ctx)
   
10. 　　    })
    
11. 　　})
    
12. 　　router.delete('/api/:page', async ctx => {
    
13. 　　    await routeDelete({ params: ctx.params.page, query: ctx.request.body }).then((res, err) => {
    
14. 　　        response(res, err, ctx)
    
15. 　　    })
    
16. 　　})
    
17. 　　//mock数据接口
    
18. 　　router.all('/mock/:project_id/*', async ctx => {
    
19. 　　    const { method, body, url, header } = ctx.request
    
20. 　　    await routeMock({ params: ctx.params, body, method, url, header }).then((res, err) => {
    
21. 　　        response(res, err, ctx)
    
22. 　　    })
    
23. 　　})
    
24. 　　//next页面接口
    
25. 　　app.prepare()
    
26. 　　    .then(() => {
    
27. 　　        // 首页
    
28. 　　        router.get('/', async ctx => {
    
29. 　　            await app.render(ctx.req, ctx.res, '/', ctx.query)
    
30. 　　            ctx.respond = false
    
31. 　　        })
    
32. 　　        // 项目
    
33. 　　        router.get('/project', async ctx => {
    
34. 　　            await app.render(ctx.req, ctx.res, `/project`, ctx.query)
    
35. 　　            ctx.respond = false
    
36. 　　        })
    
37. 　　        // 如果没有配置nginx做静态文件服务，下面代码请务必开启
    
38. 　　        router.get('*', async ctx => {
    
39. 　　            await handle(ctx.req, ctx.res)
    
40. 　　            ctx.respond = false
    
41. 　　        })
    
42. 　　        // 防止出现控制台报404错误
    
43. 　　        server.use(async (ctx, next) => {
    
44. 　　            ctx.res.statusCode = 200
    
45. 　　            await next()
    
46. 　　        })
    
47. 　　        server.use(router.routes()).use(router.allowedMethods())
    
48. 　　        server.listen(port, () => {
    
49. 　　            console.log(`> Ready on http://localhost:${port}`)
    
50. 　　        })
    
51. 　　    })

复制代码

以url作为区分： api是页面请求， mock是接口mock请求， 别的是next页面渲染请求。 通过判断请求url进行不同的处理：

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

复制代码

类似于上面这样， 具体的请参考源码。
　　项目整体流程
　　新建项目（project_id）
　　->
　　新建接口（url， method， headers， body， data）
　　->
　　本地项目代理接口的域名
　　->
　　对创建的接口发起请求（ http://host/mock/project_id/xxxxxx）
　　->
　　koa解析请求获取参数（url， method， body， headers）
　　->
　　通过路由判断请求参数匹配对应的接口
　　->
　　根据project_id去接口数据表里查找对应的数据并返回给本地项目
　　项目使用
　　目前项目接口mock只支持返回json数据， 后续想添加返回数组，布尔值等其他数据格式。
　　使用：
　　1.可以通过线上地址创建自己的项目， 配置接口， 通过postman即可[url=]测试[/url]接口是否能使用。
　　2.可以通过clone源码本地跑服务， 同样可以通过postman或其他工具进行测试， 只需要将服务域名改成本地即可。
　　后话
　　本项目为个人项目， 完全开源， 也是为了解决开发实际存在的痛点。
　　项目刚启动， 尚未投入真正的使用， 肯定存在很多问题， 和不合理的地方。如有问题， 欢迎留言。