先后台分离之数据模拟

在先后端分离的项目中，先后端约定好接口之后，就开始进入各自的开发阶段了，这时候咱们前端不可避免的就须要进行数据模拟，那么怎么进行数据模拟呢？我以为有两种：

1. 在 客户端 模拟数据，也就是在咱们的前端项目中，使用js手写或者使用mockjs。使用这种方式的时候，无论怎么分离，代码中都会存在多余的东西，如独立开发时使用模拟数据，而先后台联调时就要注释掉以前的模拟数据，这样来回的切换，开发体验真的是很不爽有没有？
2. 在 服务器端 模拟数据，我私觉得这种应该是更好的方式吧？独立开发时，将ajax库的baseurl设置为本机服务器端的url，而先后端联调时只需将baseurl改成相应的url便可。这样只须要简单的修改baseurl就能够随意切换所须要的数据了，其余的东西都无需更改，很方便有没有？

下面就来个小小的demo吧。

假设先后端的接口约定以下： baseurl: http://test.com

获取用户列表:

1. 接口地址： /index/getUserList
2. 所需参数（GET）：无
3. 输出参数说明 | 参数 | 类型 | 参数名说明 | | :-------------: |:-------------:| :-----:| | 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未加载修改后的文件，从新启动试试。

今天就介绍到这里了，有问题的欢迎下方进行评论。