vue+vuecli+webpack中使用mockjs模拟后端数据的示例


Posted in Javascript onOctober 24, 2017

前言

使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。

其主要功能是:

  1. 基于数据模板生成模拟数据。
  2. 基于HTML模板生成模拟数据。
  3. 拦截并模拟 ajax 请求。

语法规范

Mock.js 的语法规范包括两部分:

1.数据模板定义规范(Data Template Definition,DTD)
2.数据占位符定义规范(Data Placeholder Definition,DPD)

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

// 属性名  name
// 生成规则 rule
// 属性值  value
'name|rule': value

注意:

  1. 属性名 和 生成规则之间 用竖线 | 分隔。
  2. 生成规则 是可选的。
  3. 生成规则 有 7 种格式:
    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value
  4. 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  5. 属性值 中可以含有 @占位符。
  6. 属性值 还指定了最终值的初始值和类型。

例1:

Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10': 1,
  'number3|123.3': 1,
  'number4|123.10': 1.123
})
// =>
{
  "number1": 12.92,
  "number2": 123.51,
  "number3": 123.777,
  "number4": 123.1231091814
}

例2:根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串:

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\w\W\s\S\d\D/,
  'regexp3': /\d{5,10}/
})
// =>
{
  "regexp1": "pJ7",
  "regexp2": "F)\fp1G",
  "regexp3": "561659409"
}

例3:

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
 "string|3": "★"
})

结果:

//星星数量为3
{
  "string": "★★★"
}

例4:

// num为属性名
// 生成一个大于等于1,小于等于100 的整数,属性值100只是用来确定类型
Mock.mock({
 "num|1-100": 100
})

结果:

{
  "number": 8
}

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。

占位符 的格式为:

@占位符
@占位符(参数 [, 参数])

注意:

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径 和 绝对路径。
Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last'
  }
})
// =>
{
  "name": {
    "first": "Charles",
    "middle": "Brenda",
    "last": "Lopez",
    "full": "Charles Brenda Lopez"
  }
}

通过jQuery ajax请求假数据例子

1.首先,引入mockjs,引入jquery(此处用jq封装好的ajax发送请求)

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

2.使用mock生成数据模板

//这里的第一个参数http://api.cn 就是下面ajax请求的url,mock对该url进行拦截'
//这里的第二个参数就是template数据模板,mock会返回模板生成的数据
   Mock.mock('http://api.cn', {
    'name': '@name',
    'age|1-100': 100,
    'city': '@city'
  });

3.ajax发送请求与结果

$.ajax({
  url: 'http://api.cn',
  dataType: 'json'
}).done(function(data, status, xhr) {
  console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
});

vuecli中使用mockjs

首先安装

npm install mockjs

我的项目src下的结构如下:

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

我在scripts中新建了一个mockdata.js

里面的内容如下:

import Mock from 'mockjs';
const data = Mock.mock({
 // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
 'foods|10-50': [{
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-20.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-50": 1
 }],
 "sales|10-50": [{
  // 属性 id 是一个自增数,起始值为 1,每次增 1
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-100.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-100": 1
 }]
});

export default {
 data
}

接下来,在需要用到的mock数据的vue组件页面中,这样写

import mockdata from "@/scripts/mockdata.js";

引用数据,在你methods里面 直接引用刚刚的mockdata即可。例如:

new Promise((resolve, reject) => {
  that.foods =mockdata.data.foods; //直接点出你生成的假数据对象即可
  that.foodsListLen = that.foods.length;
 }).catch(err=>{
   console.log(err)
 })

参考

官网地址:https://github.com/nuysoft/Mock/wiki

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

Javascript 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 #Javascript
React Native验证码倒计时工具类分享
Oct 24 #Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 #Javascript
React Native实现地址挑选器功能
Oct 24 #Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 #Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 #Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 #Javascript
You might like
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js opener的使用详解
2014/01/11 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python多进程原理与用法分析
2018/08/21 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
使用python3构建文件传输的方法
2019/02/13 Python
python实现超级玛丽游戏
2020/03/18 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
python 制作简单的音乐播放器
2020/11/25 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
公务员平时考核实施方案
2014/03/11 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
大学生支教感言
2015/08/01 职场文书
创业计划书之酒店
2019/08/30 职场文书
详解Python中的进程和线程
2021/06/23 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL