mock-service
Version:
167 lines (159 loc) • 7.4 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mock Service</title>
<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="../bower_components/codemirror/lib/codemirror.css" rel="stylesheet">
<link href="../bower_components/codemirror/theme/neat.css" rel="stylesheet">
<link href="/stylesheets/editor.css" rel="stylesheet">
</head>
<body>
<div class="header">
<!-- -->
<div class="brand">
<div class="logo">
<img src="/images/mockjs.png">
</div>
<div class="name">Mock.js</div>
</div>
<!-- -->
<ul class="nav navbar-right">
<li><a href="#help" class="help"><i class="glyphicon glyphicon-question-sign"></i> Help</a>
</li>
<li><a href="#about" class="about"><i class="glyphicon glyphicon-info-sign"></i> About</a>
</li>
<li><a href="#account" class="account"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a>
</li>
</ul>
<!-- -->
<ul class="nav">
<li><a class="save" href="javascript:;"><i class="glyphicon glyphicon-floppy-save"></i> Save</a>
</li>
<!-- <li><a class="update" href="javascript:;">Update</a></li> -->
<li><a class="tidy" href="javascript:;"><i class="glyphicon glyphicon-eye-open"></i> Tidy</a>
</li>
<!-- <li><a class="share" href="javascript:;"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li> -->
</ul>
</div>
<div class="viewport">
<div class="box template pull-left">
<textarea name="tpl"></textarea>
</div>
<div class="box result pull-left">
<textarea name="data"></textarea>
<span class="badge"></span>
</div>
<div class="sidebar pull-left">
<div class="help">
<div class="content">
<h3>Demo</h3>
<p><a href="javascript:;" class="demo">demo</a>
</p>
<h3>Syntax</h3>
<ul>
<li>
<code>'data|1-10':[{}]</code>构造一个数组，含有 1-10 个元素</li>
<li>
<code>'data|1':[item, item, item]</code>从数组中随机挑选一个元素做为属性值</li>
<li>
<code>'id|+1': 1</code>属性 id 值自动加一，初始值为 1</li>
<li>
<code>'grade|1-100': 1</code>生成一个 1-100 之间的整数</li>
<li>
<code>'float|1-10.1-10': 1</code>生成一个浮点数，整数部分的范围是 1-10，保留小数点后 1-10 位小数</li>
<li>
<code>'star|1-10': '★'</code>生成一个字符串，重复 1-10 次
<code>'★'</code>
</li>
<li>
<code>'repeat|10': 'A'</code>生成一个字符串，重复 10 次
<code>'A'</code>
</li>
<li>
<code>'published|1-2': false</code>随机生成一个布尔值，值为 false 的概率是 1/3，值为 true 的概率是 2/3</li>
<li>
<code>'email': '@EMAIL'</code>随即生成一个 Email</li>
<li>
<code>'date': '@DATE'</code>随即生成一段日期字符串，默认格式为
<code>yyyy-MM-dd</code>
</li>
<li>
<code>'time': '@TIME'</code>随机生成一段时间字符串，默认格式为
<code>HH:mm:ss</code>
</li>
<li>
<code>'datetime': '@DATETIME'</code>随机生成一段时间字符串，默认格式为
<code>yyyy-MM-dd HH:mm:ss</code>
</li>
</ul>
<h3>Placeholder</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Method</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basics</td>
<td>boolean, natural, integer, float, character, string, range, date, time, datetime</td>
</tr>
<tr>
<td>Image</td>
<td>image, dataImage</td>
</tr>
<tr>
<td>Color</td>
<td>color</td>
</tr>
<tr>
<td>Text</td>
<td>paragraph, sentence, word, title</td>
</tr>
<tr>
<td>Name</td>
<td>first, last, name</td>
</tr>
<tr>
<td>Web</td>
<td>url, domain, email, ip, tld</td>
</tr>
<tr>
<td>Address</td>
<td>area, region</td>
</tr>
<tr>
<td>Helpers</td>
<td>capitalize, upper, lower, pick, shuffle</td>
</tr>
<tr>
<td>Miscellaneous</td>
<td>guid, id</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="about">
<div class="content">
<h3>About</h3>
<p>TODO</p>
</div>
</div>
<div class="account">
<div class="content">
<h3>Account</h3>
<p>TODO</p>
</div>
</div>
</div>
</div>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/mockjs/dist/mock.js"></script>
<script src="../bower_components/codemirror/lib/codemirror.js"></script>
<script src="../bower_components/codemirror/mode/javascript/javascript.js"></script>
<script src="/javascripts/editor.js"></script>
</body>
</html>