使用 NodeJs 实现本地接口系统,解决前后端合作开发最后一公里
无数据库的情况下,实现数据持久化,通过api url
返回json
数据,提高前端开发效率!
项目地址 :
local-ajax-api
下载完成安装依赖就可使用
实现功能
- 完整的操作页面
- 首页展示所有保存的接口列表
- 创建的接口保存到本地
- 支持重新编辑
- 编辑过程实时预览和错误提示
- 根据接口名称或者url进行检索
- 提供url跨域调用
背景
前端开发工作中一个重头戏就是和后台实现数据交互。很多前端入门不久的同学(譬如我)在涉及到和后台交互的时候,都需要等待后端开发做好,给了数据才可以继续,就是所谓的串行开发。 但是实际上我们并不需要等后台开发完成,只要一开始的时候双方约定好数据格式,前端自己模拟一些数据就可以投入工作,这样就可以并行开发,效率可以显著提高
###方案
- 直接代码里面js本地造数据
var data = {...} //这种方案适合小型结构的数据,一旦数据过于庞大,不适合放在js文件里面,不利于维护 //不能很好的模拟ajax $.ajax({ url:'..'//这个时候ajax接口不存在,调不通 }) //不能重复利用,上生产肯定要删掉 \n```
- 使用mockjs,这个网上有丰富的介绍,这里就不说了,可以直接百度
实现本地化接口服务
本文介绍了一个简单的平台化方案,创建一个本地化的服务系统,这样得到数据格式之后,本地生成一个可用的 url
用于ajax
请求,而且还可以让数据持久化,如果放在局域网内,接口还可以共享给小伙伴。
说到持久化,那么必须涉及到数据的存储,用于存储的数据库有很多,我以前用过mongodb
结合nodejs
使用,也是蛮好的,但是数据库安装也蛮麻烦的,我们这里有一个更简便的,硬盘本身就是一个“数据库”
,所以我们可以使用nodejs
的fs
模块直接创建json
文件,读取json
文件。这样创建的每一个json
文件都对于一个接口服务,只要不删除,就可以一直重复利用。
使用方法介绍
github
下载源码,并执行npm install
安装- 启动node服务,
node app.js
。 (建议使用supervisor app.js
可以自行重启服务,通过npm install supervisor -g
安装模块) - 打开首页 http://localhost:3000/
- 点击创建接口,
API
名称用来描述接口左右,API url
用来调用数据,都是必填。如图,我们创建一个接口testapi
可以实时预览格式化json数据,错误提示也可以定位,长数据折叠。不过功能不丰富,建议使用网上更完整的工具预览,可以快速定位格式错误。 创建完成点击最下面的保存按钮,提示保存成功就完成了接口的创建! - 使用接口,根据刚刚创建的
url:testapi
生成一个链接 http://localhost:3000/getjson/testapi 可以在控制台调用一下这个url
可以看出就是我们刚刚存储的json
数据。 - 搜索功能:在搜索框输入接口中文描述名称或者
apiurl
的名称即可。 - 二次编辑功能:创建完成接口之后,首页或者搜索结果会显示二次编辑入口,点击就会显示上次保存的数据和格式
- 注意:
ajaxapilist.json
存着一张关系表,对应所有的接口描述名称和url
,用于查询,建议不要修改,
总结
本文是我对前后端合作开发过程中的一些问题的反思! 以上仅是个人看法,如果有误,感谢指导! local-ajax-api
Mark From Noder
提个意见 真的不好用 json并没有一个自动生成的编辑器 最坑爹的是 哥你没有解决跨越问题 本机玩都不行 以上纯个人意见 用词不对 还请原谅
来自酷炫的 CNodeMD
@sc-yuns 你说得对,跨域确实是个问题,而且不能光后端解决,前端也要配合才可以,既然初衷是为了提高效率,我建议直接在chrome浏览器加上 --disable-web-security ,一劳永逸解决跨域。 ps:服务端跨域功能已新增
有mock.js啊
@kliuj --disable-web-security 不优,继续改进一下,🆙🆙🆙
@SilenceDN 嗯嗯,我提到了mock.js 。
@fiftyk 好的,已添加服务端跨域,图为safari浏览器下测试情况
赞
@o6875461 多谢
@DaisyHao 多谢
@kliuj 赞 我现在遇到一个很肯爹的问题 就是我生成josn的时候 里面有大量的html标记 有p img a video audio 每次都要自己去转义双引号特别坑爹 如果能在添加json哪里做一个 小工具 自动解决转移问题 引入大段图文 或者 上一个简单的编辑器 来做就完美了 这样在模拟数据 怎么逮着新闻网站拷贝 然后就自动转义好了标准的json串 岂不美哉 思路 左边弄个【 + / - 】点 + 弹出一个框 上面一个输入key 下面弄成 一个tabs选项卡 数值 真 假 文本 富文本 (哎 我是不是太过分了 居然提这种要求!我真的是懒到极致了,不过作为一个初学者真的很容易特别容易在json串这里出问题。纯手机码字,格式混乱还请见谅!)
来自酷炫的 CNodeMD
@sc-yuns 感谢使用和建议,不过我目前还没想好怎么怎么把key和value怎么定位层级关系,还有一些富文本的标签处理。如果我想好了加上去会在这里 @ 你 。不过我刚刚增加了实时预览,错误定位提示和长json折叠功能。这样如果字符串格式不对,可以直接定位,特别长的文本也可以更友好的预览。希望能够有一点点帮助,谢谢!