TA的每日心情 | 擦汗 3 天前 |
---|
签到天数: 1027 天 连续签到: 2 天 [LV.10]测试总司令
|
前言
现在很多公司都讲求前后端分离开发。 这可能会存在一个问题, 后端接口还没写好, 咱们前端同学已经把前端写完了,急等接口调试。为了解决这个问题,写了个前端接口[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的路由。
- //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即可[url=]测试[/url]接口是否能使用。
2.可以通过clone源码本地跑服务, 同样可以通过postman或其他工具进行测试, 只需要将服务域名改成本地即可。
后话
本项目为个人项目, 完全开源, 也是为了解决开发实际存在的痛点。
项目刚启动, 尚未投入真正的使用, 肯定存在很多问题, 和不合理的地方。如有问题, 欢迎留言。
|
|