nodejs+mockjs分页数据模拟实践

以前还未有前后端分离的时候，前端都是静态页布局，现在有了前后端分离开发模式，测试的时候经常是写死的json数据测试。最近发现一款特别好用的数据模拟插件，完全满足前端自己开发测试调试了。
首先，大致说下mockjs的几个常用用法。
1、Mock.mock
根据数据模板生成模拟数据。
最常见的用法是：
Mock.mock({
‘list|1-10’: [
{
‘id|+1’: 1000,//|+1标示自增长 具体的几种规则请看文档
‘name|string’: ‘@name’,//@name根据name命令生成随机名称，具体看文档
}
]
})
2、Mock.Random()
他是一个工具类，用于生成各种随机数据。
2-1、Ranndom.now( format ) Random.date(format)
now()是根据format格式返回当前时间 date()是根据format格式随机的一个时间

2-2、Random.image( size, background, text )
生成一个随机的图片地址。参数都可选
size格式：’宽x高’
background格式：#000000
text：指示图片上的文字。默认值为参数 size。

2-3、Random.cparagraph( min?, max? )
随机生成一段中文文本。
min~max指生成文本的句子区间个数

2-4、Random.ctitle( min?, max? )
随机生成一句中文标题。
min~max指示单词中字符的区间个数。
还有一个是@占位符的使用方式，这个具体直接查看官方文档吧。大致就是@结合mock提供的一些语法命令的单词来使用
以上，是生成数据模拟的一些常用命令。

接下来我用express-generator生成器生成的项目，在结合mockjs插件写了一个分页的demo。前端偷懒，直接使用小程序调试测试了。
后端API代码接口：
roters/book.js：：

var express=require('express');
var router=express.Router();
var Mock=require('mockjs');

var MockRandom=Mock.Random;
var pageCount=MockRandom.integer(1, 10);
var haseMore=true;//是否结束分页
var ids=10000;//自增长id
var bookListTemplate={};//数据模板

router.get('/index', function(req, res, next){
  var currPage=parseInt(req.query.currPage || 1);
  console.log('当前请求page页：'+currPage)
  ids=currPage * 10000;
  if(currPage === pageCount){
    haseMore=false;
    bookListTemplate={
      'hasMore': false,
      'totalPage': pageCount,
      'list|1-10': [//最后一页的数据在1-10的区间产生
        {
          'id|+1': ids,
          'title': '@ctitle(5, 15)',
          'desc': '@cparagraph(2, 5)',
          'img': MockRandom.image('200x100', '#4A7BF7', '@name book'),//经测试MockRandom.dataImage()无效,看了下源码，是有该函数的 - 下的[email protected]包
          'time': MockRandom.now('yyyy-MM-dd')
        }
      ]
    }
  }else{
    bookListTemplate={
      'hasMore': true,
      'totalPage': pageCount,
      'list|10': [//有分页的时候一页10条数据
        {
          'id|+1': ids,
          'title': '@ctitle(5, 15)',
          'desc': '@cparagraph(2, 5)',
          'img': MockRandom.image('200x100', '#4A7BF7', '@name book'),//经测试MockRandom.dataImage()无效,看了下源码，是有该函数的 - 下的[email protected]包
          'time': MockRandom.now('yyyy-MM-dd')
        }
      ]
    }
  }
  var mockData=Mock.mock(bookListTemplate);
  res.json({
    status: true,
    data: mockData,
    msg: ''
  });
})
module.exports=router;

app.js配置访问路由：：

var book =require('./routes/book.js');
app.use('/book', book);

前端发起请求调试测试：
mockDemo.js：：

const app=getApp();
Page({
  data: {
    loading: false,
    currPage: 1,
    mockData: {
      hasMore: true,
      list: []
    }
  },
  onLoad: function (options) {
    this.getData();
  },
  //mock测试
  getData() {
    let that=this;
    let mockData=that.data.mockData;
    if(mockData.hasMore&&!that.data.loadind){
      that.setData({ loading: true});
      setTimeout(()=>{
        wx.request({
          url: app.globalData.baseUri + '/book/index',
          data: { currPage: that.data.currPage },
          success(res) {
            let wxData = res.data;
            //console.log(wxData)
            mockData.hasMore = wxData.data.hasMore;
            mockData.list = mockData.list.concat(wxData.data.list);
            that.setData({ mockData: mockData, loading: false });
          }
        })
      }, 1000)//为了演示加载中效果，我延迟了1s在发起请求
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (e) {
    //console.log(e);
    let that=this;
    this.setData({ currPage: ++this.data.currPage });
    setTimeout(()=>{
      that.getData();
    })
  }
})

mockDemo.wxml：：

<view class="wrap">
  <view class="flex-h" wx:for="{{mockData.list}}" wx:key="id" style=" width: 100%; padding: 20rpx 0; border-bottom: solid 1px #ccc;">
    <image src="{{item.img}}" mode="aspectFit" style="width: 200rpx; margin-left: 10rpx; margin-right: 20rpx; height: 100rpx;">image>
    <view style="width: 500rpx;">
      <view class="flex-h flex-hsb flex-vc">
      <text>{{item.id}}text>
        <text style="font-size: 36rpx; width: 350rpx; height: 52rpx; overflow:hidden;">{{item.title}}text>
        <text style="font-size: 24rpx; color: #9b9b9b;">{{item.time}}text>
      view>
      <text style="font-size: 26rpx; line-height: 32rpx;">{{item.desc}}text>
    view>
  view>
  <view style="height: 50rpx; line-height: 50rpx; font-size: 32rpx; color: #ccc; text-align: center;" wx:if="{{loading}}">加载中...view>
  <view style="font-size: 48rpx; text-align: center; color: #ccc;" wx:if="{{!mockData.hasMore}}">--END--view>
view>

最终演示效果如下：