前后台分离之数据模拟

ma125120
3,067 阅读2分钟

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

  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未加载修改后的文件，重新启动试试。

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

avatar
文章
阅读
粉丝