松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › MockJS根据参数返回不同的数据

MockJS根据参数返回不同的数据

迦娜王
3年前Vue
3,842 0 1

有时候我们需要让mock的数据也要根据参数动态变化。

如果你还不知道怎么在vue中使用mockjs,请看这篇文章
Vue使用MockJS,从此不再等后端

简单改造

原来的代码可能是这样的:

Mock.mock(baseURL + '/tab_data', 'get', {
  status: 'SUCCEED',
  result: {
    'area_count|100000-800000': 1000,
    'population_count|500000-1000000': 100000,
    'police_count|100-1000': 1000,
    'police_situation_count|100-1000': 1000,
  }
})

现在的代码是这样的:

//用来获取参数的方法
function getQueryString(url,name) {
  let urlObj = new URL(url)
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let r = urlObj.search.substr(1).match(reg);
  if(r!=null)return unescape(r[2]); return null;
}

Mock.mock(RegExp(baseURL + '/tab_data'+'.*'), 'get', (options)=>{
  let id = getQueryString(options.url,id)//id是我们要获取的参数,然后根据id处理下数据再返回即可,这里没有处理直接返回了。
  return Mock.mock({
    status: 'SUCCEED',
    result: {
      'area_count|100000-800000': 1000,
      'population_count|500000-1000000': 100000,
      'police_count|100-1000': 1000,
      'police_situation_count|100-1000': 1000,
    }
  })
})

结语

GET是在url结尾获取参数的,POST是在options.body中获取参数,可以尝试吧options输出观察

1
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
Vue使用MockJS,从此不再等后端
上一篇
Tensorflow手写数字识别
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 简单改造
  • 结语
1
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 1
  • 0
  • Top