招商网站大全,wordpress 实名,具有品牌的网站建设,网站模板可以自己做吗在前后端分离的项目中#xff0c;前后端约定好接口以后#xff0c;就开始进入各自的开发阶段了#xff0c;这时候我们前端不可避免的就需要进行数据模拟#xff0c;那么怎么进行数据模拟呢#xff1f;我觉得有两种#xff1a;
在 客户端 模拟数据#xff0c;也就是在我…在前后端分离的项目中前后端约定好接口以后就开始进入各自的开发阶段了这时候我们前端不可避免的就需要进行数据模拟那么怎么进行数据模拟呢我觉得有两种
在 客户端 模拟数据也就是在我们的前端项目中使用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未加载修改后的文件重新启动试试。
今天就介绍到这里了有问题的欢迎下方进行评论。
