用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真的是解决很多的前后台并行开发的痛点,值得大家花时间学习!