uin-app+mockjs实现本地数据模拟


Posted in Javascript onAugust 26, 2020

最近在开发项目的时候,需要用到mockjs这个包来实现前端本地数据的模拟,下面我就来说一下具体步骤:

前言

uni-app将自己的配置融合到了vue.config.js中,所以需要自己配置,需要在package.json的同级目录下新建一个vue.config.js;ajax请求的路由,因为这个路由我们希望拿到模拟数据,所以用webpack的devserve来拦截。拦截之后通过mockjs,由它来生成模拟数据,然后返回模拟值。

步骤

在vue.config.js中加入下面代码:

const Mock = require('./mock/index.js');
module.exports = {
 chainWebpack: (config) => {  
  config.resolve.alias
  .set( '@',resolve(__dirname, '/'))//设置@为src目录的别名)
 },
 css: {
  ....
  }

 },
 devServer: {
  contentBase: path.join(__dirname, 'mock'),
  compress: true,
  port: 8080,
  overlay: {
   warnings: false,
   errors: true
  },
  before(app){
   Mock(app)
  }
}
};

devserver的配置中的before配置项是拦截路由请求。我们把全部交给Mock(app)处理;然后打开mock/index.js写入如下代码:

const addressesMock = require('./addresses');
const attendanceMock = require('./attendance');
const attendanceListMock = require('./attendance-list');
....
function Mock(app) {
 addressesMock(app)
 attendanceMock(app)
 attendanceListMock(app)
 .....
}

module.exports = Mock;

打开addresses写入你需要mock的数据就ok啦

var Mockjs = require('mockjs')
const { Random }= Mockjs;
const phonePrefix = ['132', '135', '189']
const index = Math.floor(Math.random() * phonePrefix.length)
var phone = phonePrefix[index] + Mockjs.mock(/\d{8}/)
const addressesMock = function (app) {
  app.get('/api3/addresses', function(req, res) {
   var data = Mockjs.mock({
    // 属性 list 的值是一个数组,其中元素的数量从 1 到 10 个都有可能,随机
    'list|1-10': [{
     'id|+1': 0,
     "accept_name": Random.cname(),
     "mobile": phone,
     "province_name": Random.province(),
     "area": Mockjs.mock(/\d{6}/),
     "city": Mockjs.mock(/\d{6}/),
     "sex": parseInt(Random.boolean()),
     "district": {
      "districts": Random.province()+Random.city()+Random.county(),
      "area": Random.county(),
      "city": Random.city(),
      "province": Random.province()
     },
     "street": "有一间公寓八栋",
     "inner": false,
     "lat": "",
     "door_number": "AB1234",
     "is_default": parseInt(Random.boolean()),
     "province": Mockjs.mock(/\d{6}/),
     "area_name":Random.county(),
     "city_name": Random.city(),
     "poiname": ""
    }]
   })
   res.json(data);
  })
 }
 
module.exports = addressesMock;

在需要接口的地方之间用 就能得到相应数据了

this.$ajax.get('/api3/addresses').then(res => { // 调用接口
      })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
AJAX学习笔记
May 18 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 #Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 #Javascript
prettier自动格式化去换行的实现代码
Aug 25 #Javascript
Vue中 axios delete请求参数操作
Aug 25 #Javascript
React实现轮播效果
Aug 25 #Javascript
React实现全选功能
Aug 25 #Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
You might like
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python迭代器实例简析
2014/09/25 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
入股协议书范本
2014/04/14 职场文书
大班幼儿评语大全
2014/04/30 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
护士节活动总结
2014/08/29 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
公司董事任命书
2015/09/21 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技