<!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. MariaDB xtrabackup物理备份与还原

    xtrabackup物理备份 1.1 安装xtraback 安装依赖: [root@localhost ~]# yum install -y perl-DBD-MySQL perl-DBI perl- ...

  2. leetcode 二进制求和 python

    class Solution: def addBinary(self, a, b): """ :type a: str :type b: str :rtype: str ...

  3. ntfs读写工具Paragon NTFS 15无限使用教程

    Paragon NTFS mac版是Mac OS平台上最受欢迎的ntfs读写工具,专门开发用来弥补Windows和Mac OS X之间的不兼容性,通过在Mac OS X系统下提供对任何版本的NTFS文 ...

  4. Java链接MySQL数据库的配置文件

    文件名:db.properties(随便) driver = com.mysql.jdbc.Driver  //MySQL数据库驱动名url = jdbc:mysql://localhost:3306 ...

  5. NPOI 的使用姿势

    NPOI 正确的使用姿势 主要是需要注意公式和日期类型的单元格的读取. /// <summary> /// 打开指定 Excel 文件 /// </summary> /// & ...

  6. linux新手记录;可执行文件直接运行

    下载meshlab $sudo apt-get install meshlab 查看meshlab位置 $ whereis meshlab\meshlab: /usr/bin/meshlab /usr ...

  7. Vue-admin工作整理（一）：项目搭建

    1.首先要安装vue-cli 3.0以上版本,和git 该版本可以支持页面化快速创建: sudo npm install -g @vue/cli 安装完毕后查看vue版本信息:vue -V 2.安装好 ...

  8. Pandas 基础(13) - Crosstab 交叉列表取值

    这小节的题目看起来还挺晦涩的, crosstab 是 pandas 的一个函数, 作用还蛮强大的, 一起来看一下吧~~~ 首先还是先引入一个例子文件: import pandas as pd df = ...

  9. glup简单应用---gulpfile.js

    //npm install gulp -g (global环境) //npm install gulp --save-dev (项目环境) //在项目中install需要的gulp插件,一般只压缩的话 ...

  10. Android人脸识别Demo竖屏YUV方向调整和图片保存

    本博客包含三个常用方法,用于盛开Android版人脸识别Demo中竖屏使用时送入yuv数据,但一直无法识别的情况. 1.首先可以尝试顺时针旋转90°或270°,然后送入识别SDK. 2.旋转方向后依然 ...