Mockjs请求及Url取参

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

创作不易，能看到这儿的请支持一下谢谢大家