mock模拟动态数据
1.1. mockjs介绍
引入：刚刚的数据写死的，数据是不应该写死的。真实情况是我们应该发请求到后端去拿数据的。但是现在是前后端并行开发，现在还没有后端，只有接口的描述。所以前端要去模拟假数据来进行测试
Mock.js （官网Mock.js）是一款数据模拟生成器，旨在帮助前端攻城师独立于后端进行开发，模拟假数据进行测试
1.2. mockjs作用
1. 根据数据模板生成模拟数据
2. 模拟后端接口，响应数据1.3. 快速入门
1.3.1. 安装mockjs
npm install mockjs1.3.2. 新建mockDemo.js
java
//引入mockjs
let Mock=require('mockjs')
let data=Mock.mock({
//规则:值
'list|5':[{
'id':1,
'name':'测试'
}]
})
console.log(JSON.stringify(data))1.3.3. 测试
node mockDemo.js1.3.4. 其他规则
java
//引入mockjs
let Mock=require('mockjs')
let data=Mock.mock({
//规则:值
'list|5':[{
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}]
})
console.log(JSON.stringify(data))2. mock模拟接口
引入：虽然数据出来了，但是数据应该是通过请求调用而产生的
2.1. 接口文件user.js
java
//import Mock from 'mockjs' // 引入mock方式一
let Mock=require('mockjs') // 引入mock方式二
//构建集合数据
var dataList = []
for (var i = 0; i < 53; i++) {
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}))
}
//参数1：当前页 参数2：每页显示的条数 参数3：集合数据
//返回值：当前页的分页数据
function pagination(currentPage, pageSize, list) {
console.log(list);
console.log(currentPage, pageSize);//1 5
//js的slice(开始索引，结束下标)是数组的截取方法，相当于字符串的substring，也是左闭右开的
//例子：[1,2,3,4].slice(1,3) => [2,3]
//假如集合有53条数据，当前页currentPage为1，每页pageSize5条，那么就是list.slice(0,5) - 就是前5条[第一条数据，第6条数据)
//假如集合有53条数据，当前页currentPage为2，每页pageSize5条，那么就是list.slice(5,10) - 就是5-10条，就是第二页
return list.slice((currentPage-1)*pageSize, currentPage*pageSize)
}
// 获取当前页的分页数据
//参数1：发送的请求地址 参数2：发送的请求方式 参数3中opts接收调用时传递的参数
//参数3即为.vue中调用是传递的参数：{"currentPage":1,"pageSize":5}
//返回值为totals【总数量】和 data【当前页的分页数据】
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
var list =dataList;
console.log("=======================user.js=====================");
console.log(opts);//Object { url: "/user/list", type: "POST", body: " {\"currentPage\":1,\"pageSize\":5}" }
console.log(opts.body);//{"currentPage":1,"pageSize":5} - 参数传进来是json格式的字符串
var currentPage = JSON.parse(opts.body).currentPage;//1
var pageSize = JSON.parse(opts.body).pageSize;//5
var totals = list.length;
list = pagination(currentPage, pageSize, list)
return {
'totals': totals,//总条数
'data': list//当前页数据
}
})2.2. 引入user.js
//在main.js中导入该js
import user from '../mock/user.js'3. axios调用接口
上面只是模拟了一个接口，但是这个接口还必须得调用。vue更新到2.0之后，官方推荐使用axios请求服务器数据。axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中
3.1. 安装axios
npm install axios --save3.2. 使用axios调用接口
javascript
//User.vue中使用功能axios调用user.js中模拟的接口
<script>
//引入axios
import axios from "axios";
export default {
name: 'User',
data(){
return {
tableData: [] //一开始是没有数据的
}
},
mounted(){//页面被加载后，等到Vue实例挂载完毕之后再去获取实例，这个方法会自动触发
axios.post("/user/list",{"currentPage":1,"pageSize":5}).then((result)=>{
console.debug(result);
//成功之后给数组赋值
this.tableData = result.data.data;
}).catch((result)=>{
})
}
}
</script>写在最后:mockjs是一个模拟动态数据的工具，在项目开发过程中有所运用。这篇博文给大家介绍了一些基础的知识，希望能够给大家带来帮助。笔者小，中，大厂均有面试经历，目前是一名全栈工程师，坚持分享java全栈知识，希望能够和大家共同进步。