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实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
移动端界面的适配
Jan 11 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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 SQL之where语句生成器
2009/03/24 PHP
php 字符串函数收集
2010/03/29 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python执行使用shell命令方法分享
2017/11/08 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
私人会所最新创业计划书范文
2014/03/24 职场文书
转让协议书范本
2014/04/15 职场文书
安全生产标语大全
2014/10/06 职场文书
圆明园观后感
2015/06/03 职场文书
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js