前后端分离使用mock.js模拟假数据

前言

作为前端工程师,在这个前后端分离的时代,前后台数据的处理尤其重要,作为前端,想要脱离后端独立自己模拟虚假数据,这个非常重要。 而我,在前一阵子时间,在使用angular.js进行开发小项目的时候,需要去模拟一下数据,渲染一下数据,结果发现要使用dom原始操作来进行数据的渲染,要使用document.getelemnetbyid(‘’).appendchild()在需要显示的特定的元素下面,而且还要自己手动编辑信息,比较复杂。 然后呢,在学习vue.js的时候,刚好使用了node.js来作为js的编译环境,而且作为后端处理,在这里我是使用axios来大体jquery的$ajax来作为数据传输的接口,然后还是要手动自己写json数据……虽然这样可以模拟后端真实配给前端的链接,但是如果一对上,还需要更换链接,但是如果链接太多,数据太多的话,手动起来还是挺麻烦的。 最后,开始介绍一下前端数据模拟神器——mock.js; mock.js是国内的前端工程师写的,下面是他的个人博客:http://nuysoft.com/ 下面是mock.js的自个真实教程。

什么是mock.js

Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求,生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

下面是官网的具体介绍:

安装mock.js

安装mock.js可以使用npm,可以使用bower来安装;
我是 使用node中的npm 安装命令:npm install mockjs –save-dev
然后是编写一个简单实例:

运行命令:node <文件名>
上图是运行命令和结果展示。
基本的教程是上面所写。
mock其他具体的教程可以参照https://github.com/nuysoft/Mock/wiki/Getting-Started
官网教程已经很详细了。
mock.js用法很简单,希望好好加油。