vue快速构建/搭建mock、mockjs。npm/cdn都涉及到

本文主要是介绍vue快速构建/搭建mock、mockjs。npm/cdn都涉及到，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本人github地址

我的mock日记

本人github地址
mock
- mock的作用
- mock 安装
- - 基本语法
  - 通过cdn安装
  - npm安装
  - - 设置 post、带参数的请求
    - - 通过 post 请求
      - 通过 post 带参数请求
  - 可以关注一下

mock

写在最前面

如果是想学mock请移步移步官网mock，本文章只是我自己学习的笔记

工作需要，被动学习。

mock的作用

Mock.js是一个模拟数据生成器，可以帮助前端开发和原型分离后端进度，并减少一些单调，特别是在编写自动化测试时。

mock 安装

基本语法

rurl: url (可选)
rtype: 请求类型(get/post) (可选)
template|function( options ): 模板/方法 (可选)

Mock.mock( rurl?, rtype?, template|function( options ))

通过cdn安装

<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
// Mock.mock( template )
// 官网文档扣下来的模板var template = {'title': 'Syntax Demo','string1|1-10': '★','string2|3': 'value','number1|+1': 100,'number2|1-100': 100,'number3|1-100.1-10': 1,'number4|123.1-10': 1,'number5|123.3': 1,'number6|123.10': 1.123,'boolean1|1': true,'boolean2|1-2': true,'object1|2-4': {'110000': '北京市','120000': '天津市','130000': '河北省','140000': '山西省'},'object2|2': {'310000': '上海市','320000': '江苏省','330000': '浙江省','340000': '安徽省'},'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],'array2|1-10': ['Mock.js'],'array3|3': ['Mock.js'],'function': function() {return this.title}
}
var data = Mock.mock(template)$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body')
</script>

npm安装

const Mock = require('mockjs');
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};// Mock响应模板
Mock.Mock(/\.json/, {"user|1-3": [{   // 随机生成1到3个数组元素'name': '@cname',  // 中文名称'id|+1': 88,    // 属性值自动加 1，初始值为88'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型'birthday': '@date("yyyy-MM-dd")',  // 日期'city': '@city(true)',   // 中国城市'color': '@color',  // 16进制颜色'isMale|1': true,  // 布尔值'isFat|1-2': true,  // true的概率是1/3'fromObj|2': obj,  // 从obj对象中随机获取2个属性'fromObj2|1-3': obj,  // 从obj对象中随机获取1至3个属性'brother|1': ['jack', 'jim'], // 随机选取 1 个元素'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组},{'gf': '@cname'}]
});

通过 get 请求

打印出对应数据

$.ajax({url: /\.json/,type: 'get',dataType: 'json'
})
.then(res =>{ssconsole.log(res);
})

设置 post、带参数的请求

响应时也可以是使用 function, 如:

const Mock = require('mockjs');
Mock.mock(/\.json/, 'post', function(options) {return options.type
})

通过 post 请求

$.ajax({url: 'hello.json',type: 'post',dataType: 'json'
})
.then(res()=>{console.log(res);
})

通过 post 带参数请求

$.ajax({url: 'hello.json',type: 'post',dataType: 'json'data: {account: 888,pwd: 'abc123'}
})
.then(res()=>{console.log(res);
})const Mock = require('mockjs');
Mock.mock(/\.json/, 'post', function(options) {console.log(options);// 打印出 {url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}return Mock.mock({// .....});
});