mock js使用方法简单记录
2023-09-14 08:58:56 时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
<div>
<h1 id="mockjs">mockjs</h1>
</div>
<script type="text/javascript">
//调用mock方法模拟数据
Mock.mock(
'http://mockjs', {
"userName" : '@name', //模拟名称
"age|1-100":100, //模拟年龄(1-100)
"color" : "@color", //模拟色值
"date" : "@date('yyyy-MM-dd')", //模拟时间
"url" : "@url()", //模拟url
"content" : "@cparagraph()", //模拟文本
"image":"@image()",
"images":"@image('200x100', '#00405d', '#FFF', 'Mock.js')",
"dataImage":"@dataImage",
dataImage:"@dataImage('200x100')",
dataImage:"@dataImage('200x100', 'Hello Mock.js!')"
}
);
//ajax请求
$("#mockjs").click(function(){
$.ajax({
url : "http://mockjs", //请求的url地址
dataType : "json", //返回格式为json
async : true, //请求是否异步,默认为异步,这也是ajax重要特性
data : {}, //参数值
type : "GET", //请求方式
beforeSend : function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
console.log(req);
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
});
var M=Mock.mock;
var R=R = window.Mock.Random;
console.log(R.email())
// basic:https://github.com/nuysoft/Mock/wiki/Basic
console.log(M({boolean:'@boolean'}))
console.log(M({natural:'@natural'}))
console.log(M({integer:'@integer'}))
console.log(M({float:'@float'}))
console.log(M({character:'@character'}))
console.log(M({range:'@range'}))
// date:https://github.com/nuysoft/Mock/wiki/Date
console.log(M({date:'@date'}))
console.log(M({time:'@time'}))
console.log(M({datetime:'@datetime'}))
console.log(M({now:'@now'}))
// Image:https://github.com/nuysoft/Mock/wiki/Image
console.log(M({image:"@image()"}))
console.log(M({image:"@image(60x60)"}))
console.log(M({image:"@image(60x60,#000000)"}))
console.log(M({image:"@image('200x100', '#00405d', '#FFF', 'Mock.js')"}))
console.log(M({dataImage:'@dataImage'}))
console.log(M({dataImage:"@dataImage('200x100')"}))
console.log(M({dataImage:"@dataImage('200x100', 'Hello Mock.js!')"}))
// color : https://github.com/nuysoft/Mock/wiki/Color
console.log(M({color:'@color'}))
console.log(M({hex:'@hex'}))
console.log(M({rgb:'@rgb'}))
console.log(M({rgba:'@rgba'}))
console.log(M({hsl:'@hsl'}))
// text : https://github.com/nuysoft/Mock/wiki/Text
console.log(M({paragraph:'@paragraph'}))
console.log(M({sentence:'@sentence'}))
console.log(M({title:'@title'}))
console.log(M({cparagraph:'@cparagraph'}))
console.log(M({csentence:'@csentence'}))
console.log(M({cword:'@cword'}))
console.log(M({ctitle:'@ctitle'}))
// name : https://github.com/nuysoft/Mock/wiki/Name
console.log(M({first:'@first'}))
console.log(M({last:'@last'}))
console.log(M({name:'@name'}))
console.log(M({cfirst:'@cfirst'}))
console.log(M({clast:'@clast'}))
console.log(M({cname:'@cname'}))
// Web : https://github.com/nuysoft/Mock/wiki/Name
console.log(M({url:'@url'}))
console.log(M({domain:'@domain'}))
console.log(M({email:'@email'}))
console.log(M({ip:'@ip'}))
console.log(M({tld:'@tld'}))
// address: https://github.com/nuysoft/Mock/wiki/Name
console.log(M({region:'@region'}))
console.log(M({province:'@province'}))
console.log(M({city:'@city'}))
console.log(M({county:'@county'}))
console.log(M({zip:'@zip'}))
// helper Methods : https://github.com/nuysoft/Mock/wiki/Helper
console.log(M({capitalize:'@capitalize(`hello`)'}))
console.log(M({upper:'@upper(`hello`)'}))
console.log(M({lower:'@lower(`HELLO`)'}))
console.log(M({pick:"@pick(['a', 'e', 'i', 'o', 'u'])"}))
console.log(M({shuffle:"@shuffle(['a', 'e', 'i', 'o', 'u'])"}))
// Miscellaneous: https://github.com/nuysoft/Mock/wiki/Miscellaneous
console.log(M({guid:'@guid'}))
console.log(M({id:'@id'}))
console.log(M({increment:'@increment'}))
</script>
</body>
</html>
相关文章
- rails应用ajax之一:使用纯js方法
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)绚丽的3D星空动画
- JS - 递归实现无限分类
- three.js之元素周期表
- 原生JS实现JQuery的addClass和removeClass
- js/jquery/插件表单验证
- Yii2的View中JS代码添加
- Node.js 中使用 ES6 中的 import / export 的方法大全
- Atitit 业务流程执行引擎的实现 目录 1.1. 引擎实现语言java js php等1 1.2. 流程语言 xml sql js等 业务流程定义语言规范总结1 1.3. 实体方法定义2
- 华为OD机试 - 服务中心选址(Java & JS & Python)
- js非空验证+判断输入框是否输入的全是空格
- Node.js 连接 MongoDB增删查改crud案例集
- javascript(js) Uint8Array转普通数组(int数组)数组拼接concat Uint8Array没有concat()方法
- js 年份左右点击加减
- js对象判断方法
- 手写实现js中的instanceof
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- JS-原型和原型链以及继承和instaceof实现
- JS工具方法 3 js客户端与php服务器通信加密之AES