Mock.js demoのインストールと使用
Mock.js demoのインストールと使用
Mock.js公式サイト:トップページ:http://mockjs.com/
1、Mock.jsダウンロードインストール mockをダウンロードします.jsファイル npmインストールmockモジュールプロジェクトパスで実行コマンド: 2.1、Mock.js使用demo(方式1)ファイル構造、例えば図:
以下はファイルコード: index.html
mock-1.js
Mock.js公式サイト:トップページ:http://mockjs.com/
1、Mock.jsダウンロードインストール
npm install mock 
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="jquery-1.11.1.js">script>
<script src="require.js">script>
<script src="mock-1.js">script>
body>
html>mock-1.js
// Mock
require.config({
paths: {
mock: 'mock'
}
});
// Mock
require(['mock'], function(Mock) {
/* */
/* */
// Mock.mock( template )
//
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
// body
$(''
).text(JSON.stringify(data, null, 4)).appendTo('body');
/* 2 */
//Mock.mock(rurl, template)
Mock.mock(/.json/,{//マッチング.jsonファイル
'list|1-10':[{//データテンプレート
'id|+1': 1,
'email': '@EMAIL',
'regexp3':/\d{5,10}/
}]
});
$.ajax({
url: 'hello.json',//jsonファイルへのアクセスを し、helloをブロックします.jsonのリクエストは、mockデータテンプレートのデータを します.
dataType: 'json'
}).done(function(data, status, jqXHR) {
//mockデータテンプレートのデータを し、bodyに する
$(' '
).text(JSON.stringify(data, null, 4)).appendTo('body');
})
});
2.2、Mock.js demo( 2)ファイル 、 : はファイルコード:index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script src="mock.js">script>
<script src="mock-2.js">script>
body>
html>
mock-2.js Mock.mock(/\.json/, { // .json ，
'list|1-10': [{ //
'id|+1': 1,
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
function sendData(url) {
$.ajax({
url: url,
dataType: 'json'
}).done(function(data, status, jqXHR) {
// mock ， body
$(''
).text(JSON.stringify(data, null, 4)).appendTo('body');
})
}
sendData("hello.json");
3、indexを する.html
のスクリーンショット:
: mock.jsの はjquery,zeptoなどのライブラリのリクエストファイル を することである.コードの が され、リクエストに を える がある があります. はjsのリクエストは されませんでした. gulp-mockプラグイン: は されるがブロックされ、コードの の に しない.
