mock.js 使用方法

mock.js 使用方法

在使用mock.js之前，我们得了解mock是干什么的。
mock.js 作用：可以帮助前端独立于后端完成开发
前端如何使用mock.js呢
1: 首先要根据业务需求，以及服务端真实接口返回的数据结构
mock,js 去创建虚拟的数据
2：通过拦截AJAX 帮前端是完成项目的交互
3: 最后；等真实接口出来后；用真实数据替换Mock数据。完成项目测试

// 使用 Mock 生成假数据
     var Mock = require('mockjs')
     var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
     list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1
 }]
 })
// 输出结果
console.log(JSON.stringify(data, null, 4))

mock 使用流程

<script>
/** mock 使用流程
* 1：引入mock.js 三种方式
* （1）：引入远程文件
* （2）: mock.js 下载到本地被打引入
* （3）：通过require 引入Mockjs模块
* 2；使用Mock
* （1）：Mock.mock() 创建虚拟数据（mock数据）
* （2）:将虚拟数据转化为json格式的数据
* 3：数据渲染
*/
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
// 保存mock 生成的模拟数据u非jsom 格式
var data =JSON.stringify(data,null,4)
// 将其它格式的数据转化为JSOn格式
var dataJson = JSON.parse(data)
for(var i =0,len= dataJson.list.length;i<len;i++){
var node = document.createElement('p')
node.innerHTML = dataJson.list[i].id
box.appendChild(node)
}
</script>