<!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>

mock js使用方法简单记录的更多相关文章

  1. jquery方法简单记录

      append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 firs ...

  2. 对JS 的classList 简单记录

    一 对classList整体感觉 浏览器支持参考(http://www.runoob.com/jsref/prop-element-classlist.html) classList 是一个对象 ,返 ...

  3. 创建ajax对象并兼容多个浏览器方法简单记录

    这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下<script> function createAjax(){ var request=false; //win ...

  4. js实用方法记录-简单cookie操作

    js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...

  5. .net mvc 站点自带简易SSL加密传输 Word报告自动生成（例如 导出数据库结构） 微信小程序：动画（Animation） SignalR 设计理念(一) ASP.NET -- WebForm -- ViewState ASP.NET -- 一般处理程序ashx 常用到的一些js方法，记录一下 CryptoJS与C#AES加解密互转

    .net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net ...

  6. swfobject.js 2.2简单使用方法

    swfobject.js 2.2简单使用方法 官方网址介绍http://code.google.com/p/swfobject/wiki/documentation 用法:html部分<div ...

  7. 分享几个日常调试方法让js调试更简单

    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...

  8. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

  9. js实用方法记录-指不定哪天就会用到的js方法

    js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码:isWeiXin()==false /** * 是否在微信中 */ function isWeix ...

随机推荐

  1. HTML5 本地缓存 window.localStorage

    简单运用 html <div onclick="storage('invoice')"></div> js 设置  与 获取 function storag ...

  2. redis使用总结(一)(redis客户端使用)

    NoSQL 摘自百度百科 NoSQL,泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得 ...

  3. nginx 配置反向代理

    之前的前端是8123端口,使用此端口让nginx的反向代理. vim /etc/nginx/conf.d/80-fr.conf upstream cats{ server 127.0.0.1:8123 ...

  4. Python3 tkinter基础 Text window 文本框中插入按钮

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. [luaj]在安卓用使用luaj

    luaj与安卓 什么是luaj luaj是一个Java的一个lua语言引擎,他可以让你在java上运行Lua代码. 在安卓中使用lua干嘛 lua代码可以用来书写布局,或者一些业务逻辑. 为什么要在安 ...

  6. 數據監控与診斷－－環形緩沖區(RING BUFFER)

    1.  環形緩沖區 動態管理視圖: sys.dm_os_ring_buffers 查看ring_buffers: Select distinct ring_buffer_type from sys.d ...

  7. js打印html指定元素，解决动态获取的图片无法打印问题

    用js来调用浏览器的打印接口很容易,一两行代码就能搞定,但是有些数据是通过动态生成的,例如一些动态生成的二维码,有时候调用打印接口图片会无法显示 为了解决这个问题,建议使用下面这个库 下载:https ...

  8. C#socket编程之实现一个简单的TCP通信

    TCP(TransmissionControl Protocol)传输控制协议. 是一种可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TC ...

  9. 闽南师范大学·大英A3复习专题

    精读<新视野·读写教程A3> U2: words: TEXT A   TEXT B appraise vt.评定 | abort vt.(因困难或危险)使(活动)终止 paralyze v ...

  10. Devexpress中文语言包汉化

    1.下载对应版本的dev语音包 将语言包解压,放到如下文件夹,编译时会自动复制到bin目录下的. C:\Program Files (x86)\DevExpress 17.2\Components\B ...