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 相关文章推荐
非常好的js代码
Jun 27 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
javascript时间差插件分享
2016/07/18 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
详谈js模块化规范
2017/07/07 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python文件操作的简单方法总结
2019/11/07 Python
python中如何使用insert函数
2020/01/09 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
举例讲解Python装饰器
2020/12/24 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
优秀求职信范文分享
2014/01/26 职场文书
机关作风建设心得体会
2014/10/22 职场文书
欠款起诉书范文
2015/05/19 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python