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 相关文章推荐
js中复制行和删除行的操作实例
Jun 25 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
$.extend 的一个小问题
Jun 18 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 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的AES加密算法完整实例
2016/07/20 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery实用基础超详细介绍
2013/04/11 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
python双向链表实现实例代码
2013/11/21 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
小学毕业感言50字
2014/02/16 职场文书
党员入党表决心的话
2014/03/11 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
关于教师节的广播稿
2014/09/10 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书