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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
VBScript版代码高亮
2006/06/26 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
代码分析Python地图坐标转换
2018/02/08 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
int和Integer有什么区别
2013/05/25 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
档案室主任岗位职责
2014/02/12 职场文书
秋季运动会广播稿
2014/02/22 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书