在前后端分离的项目中,前后端约定好接口以后,就开始进入各自的开发阶段了,这时候我们前端不可避免的就需要进行数据模拟,那么怎么进行数据模拟呢?我觉得有两种:
- 在 客户端 模拟数据,也就是在我们的前端项目中,使用js手写或者使用mockjs。使用这种方式的时候,不管怎么分离,代码中都会存在多余的东西,如独立开发时使用模拟数据,而前后台联调时就要注释掉之前的模拟数据,这样来回的切换,开发体验真的是很不爽有没有?
- 在 服务器端 模拟数据,我私以为这种应该是更好的方式吧?独立开发时,将ajax库的baseurl设置为本机服务器端的url,而前后端联调时只需将baseurl改为相应的url即可。这样只需要简单的修改baseurl就可以随意切换所需要的数据了,其他的东西都无需更改,很方便有没有?
下面就来个小小的demo吧。
假设前后端的接口约定如下: baseurl: http://test.com
获取用户列表:
- 接口地址: /index/getUserList
- 所需参数(GET):无
- 输出参数说明 | 参数 | 类型 | 参数名说明 | | :-------------: |:-------------:| :-----:| | id| Number| 用户id | | username | String | 用户名 | | realname | String | 真实姓名|
接下来就可以进行后台搭建了。
既然是前端,无疑是选择nodejs作为后台语言了,框架的话express,koa,thinkjs就随意了,我就偷下懒用 thinkjs 给大家说一说了。
$ npm install -g think-cli
$ thinkjs new demo;
$ cd demo;
$ npm i;
$ npm i mockjs --save;
$ npm start
如此一来,后台服务器就已经启动了。
因为浏览器的跨域问题,后台服务器还需要设置CORS。在app/controller/base.js中添加以下代码:
__before() {this.setCORS();const isOption = this.isMethod('options');if (isOption) {this.ctx.json();return false;}}setCORS() {this.header('Access-Control-Allow-Origin', this.header('origin') || '*');this.header('Access-Control-Allow-Headers', 'x-requested-with,token');this.header('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT,DELETE');this.header('Access-Control-Allow-Credentials', true);}
接下来就是根据接口编写相应的函数对应接口了,
index/getUserList接口对应的函数为app/controller/index.js文件中的getUserListAction,
getUserListAction() {var data = Mock.mock({'arr|3-9': [{'id| 1': 1,'username': '@email','realname': '@name',}]});return this.ctx.success(data.arr);}
注:thinkjs单模块路由默认最大支持三级路由,多模块路由默认最大支持四级路由。单模块时,两级路由A/B对应的函数为controller/A.js的BAction函数,三级路由A/B/C对应的函数为controller/A/B.js的CAction函数;多模块可类比。若修改后thinkjs访问接口报错,可能是thinkjs未加载修改后的文件,重新启动试试。
今天就介绍到这里了,有问题的欢迎下方进行评论。