用Mockjs实现模拟分页数据，获取列表的接口一般是后台需要接收页码以及每页条数，接着后台会返回总条数之类的信息。
学习mockjs以后觉得get请求十分麻烦，首先是需要处理接口地址由于携带参数而无法与后台匹配的问题，然后是mockjs没有内置的从url取参的方法，而是要自己通过对url不断地判断、截取、以及和参数名进行匹配才能取出参数，而post请求取参就相对很容易。
get请求：
组件内发送get请求获取后台返回的数据，向后台传了页码和每页条数：
//组件内
getList () {
axios.get('/api/get/list',{
params: {
pageindex: this.pageindex,
pagesize: 10
}
}).then(res=>{
this.list = res.data.list
this.pageMax = res.data.totalPage
}).catch(err=>{
console.log('err',err)
})
}解决携带参数的接口地址与后台定义无法匹配的问题：
//mockjs
//url为：/api/get/list?pageindex=1&pagesie=10
//无法与/api/get/list匹配，因此要用到正则
Mock.mock(/\/api\/get\/list/,'get',(options)=>{
console.log(options) //业务代码省略
})定义方法解决mockjs无内置url取参的问题：
// 根据url获取query参数
const getQuery = (url,name)=>{
console.log(url); // /api/get/news?pageindex=1&pagesize=10
const index = url.indexOf('?')
console.log(index); //13
if(index !== -1) {
const queryStrArr = url.substr(index+1).split('&')
console.log(queryStrArr); //['pageindex=1', 'pagesize=10']
//0: "pageindex=1"
//1: "pagesize=10"
for(var i=0;i<queryStrArr.length;i++) {
const itemArr = queryStrArr[i].split('=')
console.log(itemArr) //['pageindex', '1'] //['pagesize', '10']
//0: "pageindex" //0: "pagesize"
//1: "1" //1: "10"
if(itemArr[0] === name) {
return itemArr[1]
}
}
}
return null
}首先定义index为url中？的索引，可以看到输出为13
然后判断是否存在参数也就是index是否存在，如果存在就定义queryStrArr，通过&字符来分割？后携带的参数，得到一个数组里面的两个字符串
通过循环遍历，定义itemArr，通过=号进行分割，将内容分割成字符串数组
最后通过itemArr[0]与name进行匹配，返回itemArr[1]的值，也就是对应的参数
下面我们来看一下（已删除部分业务代码）：
Mock.mock(/\/api\/get\/list/,'get',(options)=>{
// 获取传递的参数pageindex
const pageindex = getQuery(options.url,'pageindex')
// 获取传递的参数pagesize
const pagesize = getQuery(options.url,'pagesize')
return {
status: 200,
message: '获取数据列表成功',
list: list,
total:List.length,
totalPage:totalPage
}
})重点看看getQuery这个方法，传入url与name最终匹配则得到参数
POST请求
比如定义一个添加数据的接口，传入标题和内容，对于post请求mockjs接收很容易
//mockjs
Mock.mock('/api/add/list','post',(options)=>{
const body = JSON.parse(options.body)
List.push(Mock.mock({
"title": body.title,
"content": body.content,
}))
return {
status: 200,
message: '添加成功',
}
})总的来说Mockjs真的是解决很多的前后台并行开发的痛点，值得大家花时间学习！
创作不易，能看到这儿的请支持一下谢谢大家
?
