UNPKG

mockjs/demo/mock.html

Version:

1<!DOCTYPE HTML>
2<html>
3<head>
  <meta charset="utf-8">
  <title>Mock</title>
  <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
  <link href="../node_modules/codemirror/lib/codemirror.css" rel="stylesheet">
  <link href="../node_modules/codemirror/theme/neat.css" rel="stylesheet">
  <link href="assets/mock.css" rel="stylesheet">
10</head>
11<body>
  <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
          <a class="navbar-brand" href="http://mockjs.com">Mock.js</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
              <li class="active"><a href="./mock.html">Data</a></li>
              <li class=""><a href="./mock4tpl.html">Handlebars &amp; Mustache</a></li>
              <li class=""><a href="./mock4xtpl.html">KISS XTemplate</a></li>
              <li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>
              <li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>
              <li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>
              <li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>
          </ul>
      </div>
  </nav>
31
  <div class="sidebar"></div>
  <div class="content clearfix">
      <div class="window float-left">
          <textarea id="editor">
36{
  "origArray": [
      {
          "foo": "foo"
      },
      {
          "bar": "bar"
      },
      {
          "foobar": "foobar"
      }
  ],
  "origArrayWithHolder": [
      {
          "foo|+1": "1"
      },
      {
          "bar": "@EMAIL"
      },
      {
          "foobar": "foobar"
      }
  ],
  "data|1-10": [
      {
          "id|+1": 1,
          "grade1|1-100": 1,
          "grade2|90-100": 1,
          "float1|.1-10": 10,
          "float2|1-100.1-10": 1,
          "float3|999.1-10": 1,
          "float4|.3-10": 123.123,
          "star|1-5": "★",
          "cn|1-5": "汉字",
          "repeat|10": "A",
          "published|1": false,
          "email": "@EMAIL",
          "date": "@DATE",
          "time": "@TIME",
          "datetime": "@DATETIME",
          "method|1": [
              "GET",
              "POST",
              "HEAD",
              "DELETE"
          ],
          "size": "@AD_SIZE",
          "img1": "@IMG(200x200)",
          "img2": "@IMG",
          "img3": "@IMG(@size)",
          "img4": "@IMG(@AD_SIZE)",
          "dummyimage": {
              "size": "@AD_SIZE",
              "background": "@COLOR",
              "foreground": "@COLOR",
              "format|1": [
                  "png",
                  "gif",
                  "jpg"
              ],
              "text": "@WORD",
              "url": "http://dummyimage.com/@size/@background/@foreground.@format&text=@text"
          },
          "param": "abc=123",
          "url1": "@img3?@param",
          "url2": "@img4?@ID&id=@id",
          'dataImage':'@DATAIMAGE'
      }
  ]
105}</textarea>
      </div>
      <div class="handler" id="handler_vertical" style="left: 50%;"></div>
      <div class="window float-right">
          <textarea id="result"></textarea>
      </div>
  </div>
112
  <script src="../node_modules/jquery/tmp/jquery.js"></script>
  <script src="assets/bootstrap/js/bootstrap.js"></script>
  <script src="../node_modules/codemirror/lib/codemirror.js"></script>
  <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
  <script src="../dist/mock.js"></script>
118
  <script type="text/javascript">
      var mode = 'javascript';
  </script>
  <script src="./assets/editor.js"></script>
  <script type="text/javascript">
      $(function(){
          function handle(instance, changeObj) {
              var tpl;
              try {
                  tpl = instance.getValue()
                  tpl = tpl.replace(/^([\r\n]*)/i, '')
                      .replace(/([\r\n]*$)/i, '')
                  if (/^\s*[\[\{\(]/.test(tpl)) {
                      tpl = new Function('return ' + instance.getValue());
                      tpl = tpl()
                  }
              } catch (error) {
                  console.error(error.stack);
                  tpl = error.toString()
              }
              var data = Mock.mock(tpl)
              data = JSON.stringify(data, null, 4)
              result.setValue(data);
              return handle
          }
144
          editor.on('change', handle(editor));
146
          $('#save').on('click', function(event) {
              $.ajax({
                  url: 'http://localhost:3000/save',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      tpl: editor.getValue()
                  }
              })
          })
      });
  </script>
  
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
165
    ga('create', 'UA-27059428-2', 'mockjs.com');
    ga('send', 'pageview');
  </script>
169</body>
170</html>

1	`<!DOCTYPE HTML>`
2	`<html>`
3	`<head>`
4	`<meta charset="utf-8">`
5	`<title>Mock</title>`
6	`<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">`
7	`<link href="../node_modules/codemirror/lib/codemirror.css" rel="stylesheet">`
8	`<link href="../node_modules/codemirror/theme/neat.css" rel="stylesheet">`
9	`<link href="assets/mock.css" rel="stylesheet">`
10	`</head>`
11	`<body>`
12	`<nav class="navbar navbar-default" role="navigation">`
13	`<div class="navbar-header">`
14	`<a class="navbar-brand" href="http://mockjs.com">Mock.js</a>`
15	`</div>`
16	`<div class="collapse navbar-collapse navbar-ex1-collapse">`
17	`<ul class="nav navbar-nav">`
18	`<li class="active"><a href="./mock.html">Data</a></li>`
19	`<li class=""><a href="./mock4tpl.html">Handlebars & Mustache</a></li>`
20	`<li class=""><a href="./mock4xtpl.html">KISS XTemplate</a></li>`
21	`<li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>`
22	`</ul>`
23	`<ul class="nav navbar-nav navbar-right">`
24	`<li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>`
25	`<li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>`
26	`<li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>`
27	`<li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>`
28	`</ul>`
29	`</div>`
30	`</nav>`
31
32	`<div class="sidebar"></div>`
33	`<div class="content clearfix">`
34	`<div class="window float-left">`
35	`<textarea id="editor">`
36	`{`
37	`"origArray": [`
38	`{`
39	`"foo": "foo"`
40	`},`
41	`{`
42	`"bar": "bar"`
43	`},`
44	`{`
45	`"foobar": "foobar"`
46	`}`
47	`],`
48	`"origArrayWithHolder": [`
49	`{`
50	`"foo\|+1": "1"`
51	`},`
52	`{`
53	`"bar": "@EMAIL"`
54	`},`
55	`{`
56	`"foobar": "foobar"`
57	`}`
58	`],`
59	`"data\|1-10": [`
60	`{`
61	`"id\|+1": 1,`
62	`"grade1\|1-100": 1,`
63	`"grade2\|90-100": 1,`
64	`"float1\|.1-10": 10,`
65	`"float2\|1-100.1-10": 1,`
66	`"float3\|999.1-10": 1,`
67	`"float4\|.3-10": 123.123,`
68	`"star\|1-5": "★",`
69	`"cn\|1-5": "汉字",`
70	`"repeat\|10": "A",`
71	`"published\|1": false,`
72	`"email": "@EMAIL",`
73	`"date": "@DATE",`
74	`"time": "@TIME",`
75	`"datetime": "@DATETIME",`
76	`"method\|1": [`
77	`"GET",`
78	`"POST",`
79	`"HEAD",`
80	`"DELETE"`
81	`],`
82	`"size": "@AD_SIZE",`
83	`"img1": "@IMG(200x200)",`
84	`"img2": "@IMG",`
85	`"img3": "@IMG(@size)",`
86	`"img4": "@IMG(@AD_SIZE)",`
87	`"dummyimage": {`
88	`"size": "@AD_SIZE",`
89	`"background": "@COLOR",`
90	`"foreground": "@COLOR",`
91	`"format\|1": [`
92	`"png",`
93	`"gif",`
94	`"jpg"`
95	`],`
96	`"text": "@WORD",`
97	`"url": "http://dummyimage.com/@size/@background/@foreground.@format&text=@text"`
98	`},`
99	`"param": "abc=123",`
100	`"url1": "@img3?@param",`
101	`"url2": "@img4?@ID&id=@id",`
102	`'dataImage':'@DATAIMAGE'`
103	`}`
104	`]`
105	`}</textarea>`
106	`</div>`
107	`<div class="handler" id="handler_vertical" style="left: 50%;"></div>`
108	`<div class="window float-right">`
109	`<textarea id="result"></textarea>`
110	`</div>`
111	`</div>`
112
113	`<script src="../node_modules/jquery/tmp/jquery.js"></script>`
114	`<script src="assets/bootstrap/js/bootstrap.js"></script>`
115	`<script src="../node_modules/codemirror/lib/codemirror.js"></script>`
116	`<script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>`
117	`<script src="../dist/mock.js"></script>`
118
119	`<script type="text/javascript">`
120	`var mode = 'javascript';`
121	`</script>`
122	`<script src="./assets/editor.js"></script>`
123	`<script type="text/javascript">`
124	`$(function(){`
125	`function handle(instance, changeObj) {`
126	`var tpl;`
127	`try {`
128	`tpl = instance.getValue()`
129	`tpl = tpl.replace(/^([\r\n]*)/i, '')`
130	`.replace(/([\r\n]*$)/i, '')`
131	`if (/^\s*[\[\{\(]/.test(tpl)) {`
132	`tpl = new Function('return ' + instance.getValue());`
133	`tpl = tpl()`
134	`}`
135	`} catch (error) {`
136	`console.error(error.stack);`
137	`tpl = error.toString()`
138	`}`
139	`var data = Mock.mock(tpl)`
140	`data = JSON.stringify(data, null, 4)`
141	`result.setValue(data);`
142	`return handle`
143	`}`
144
145	`editor.on('change', handle(editor));`
146
147	`$('#save').on('click', function(event) {`
148	`$.ajax({`
149	`url: 'http://localhost:3000/save',`
150	`type: 'post',`
151	`dataType: 'json',`
152	`data: {`
153	`tpl: editor.getValue()`
154	`}`
155	`})`
156	`})`
157	`});`
158	`</script>`
159
160	`<script>`
161	`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){`
162	`(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),`
163	`m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)`
164	`})(window,document,'script','//www.google-analytics.com/analytics.js','ga');`
165
166	`ga('create', 'UA-27059428-2', 'mockjs.com');`
167	`ga('send', 'pageview');`
168	`</script>`
169	`</body>`
170	`</html>`