mockjs学習まとめ(先端アナログデータの便利性、開発効率の向上)
23655 ワード
基本紹介:
私たちのフロントエンドの開発では、しばしばこのようなことがありますが、インターフェースは、静的なページだけを書くことができますが、どのように簡単な方法でバックエンドのデータをシミュレートすることができますか?mockjsはこの仕事をしました.しかもよくやりました.
以下は初心者としての経験をまとめて、仲間と交流しながら上達したいと思います.
実現する機能は、データテンプレートに基づいてアナログデータを生成することです. 2、htmlテンプレートに基づいてデータを生成する 3、ブロックしてajax要求を模擬する
インストール:
一、据え付け(nodejsをインストールする必要があります.)
node:
npm install mockjs
bower:
npm install-g bower
bower install--save mockjs
二、mockjs体験
<span style="color:#008000;">//<span style="color:#008000;">
<span style="color:#0000ff;">var data =<span style="color:#000000;"> Mock.mock({
"list|2-3":23<span style="color:#000000;">,
"name|1":"@name"<span style="color:#000000;">, "age|1-88":100<span style="color:#000000;"> }) console.info(JSON.stringify(data,<span style="color:#0000ff;">null,4<span style="color:#000000;">)) <span style="color:#008000;">//<span style="color:#008000;"> ajax <span style="color:#0000ff;">var data1 = Mock.mock("http://rich.cn"<span style="color:#000000;">,{ "name":"@name"<span style="color:#000000;">, "isTrue|1":<span style="color:#0000ff;">true<span style="color:#000000;">, "color":"@color"<span style="color:#000000;"> }) $.ajax({ url:'http://rich.cn'<span style="color:#000000;">, success:<span style="color:#0000ff;">function<span style="color:#000000;">(e){ console.info(e) } }) <span style="color:#008000;"><span style="color:#008000;">console.info(JSON.stringify(data1,null,4)) データテンプレート定義(DMD)
基本構造:属性名|生成規則:値
1、‘name me me me|min-max’:value
2、'name𞓜count':value
3、‘name me me|min-max.dmin-dmax’:value
4、'name me me|ミニ-max.dcount':value
5、‘name|count.dmin-dmax’:value
6、'name|count.dcount':value
7、'name 124+count':value
データプレースホルダ定義(DPD)
基本構造:属性名:プレースホルダ
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="node_modules/mockjs/dist/mock.js">script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js">script>
head>
<body>
<script>
// string
var data1 = Mock.mock({
"name1|2-3":"nihao",// nihao， 2， 3
"name2|3":"*",// *， 3
})
console.info("string",JSON.stringify(data1,null,4))
// boolean
var data2 = Mock.mock({
'name3|1':true, //"1" ， ， ， true false
'name4|1-9':true// true 1/（1+9），false 9/（1+9）
})
console.info("boolean",JSON.stringify(data2,null,4))
// number
var data3 = Mock.mock({
'name5|+1':2,// 1？？ 2，
'name6|12':3,//
'name7|1-100':3,// 1 100 ，3 ，
'name8|1-100.2-3':2,// 1 100 ， 2 3 。2 ，
'name9|123.2':2// 123，
})
console.info("number",JSON.stringify(data3,null,4))
// array
var data4 = Mock.mock({
'name10|1':[1,2,3],//
'name11|3':[5,6,7],// 3
'name12|1-3':[12,13,15,16],// 1-3
'name13|2-3':[
{
'name4|1-9':true,
'name7|1-100':3,
'name9|123.2':2,
},{
"name1|2-3":"nihao",
"name2|3":"*",
},{
"name1|2-3":"nihao",
"name2|3":"*",
},{
'name5|+1':2,
'name6|12':3,
'name7|1-100':3,
}
]
})
console.info("array",JSON.stringify(data4,null,4))
// object
var data5 = Mock.mock({
'name14|1':{
id:"23",
class:" ",
price:"1234"
},
'name15|2-3':{
id:"34",
class:" ",
price:"156",
size:"xxl"
}
})
console.info("object",JSON.stringify(data5,null,4))
// function
var data6 = Mock.mock({
'fun':function(){
console.info("123")
}
})
console.info("function",JSON.stringify(data6,null,4))
// RegExp
var data7 = Mock.mock({
'regexp1':/[a-z][A-Z]/,
'regexp2':/\d{2,8}/,
'regexp3':/\w[0-9]/
})//
console.info("RegExp",JSON.stringify(data7,null,4))
// ajax
// ：Mock.mock( rurl?, rtype?, template|function(options) )
var data8 = Mock.mock("http://rich.cn","get",{
"name":"@name",
"isTrue|1":true,
"color":"@color"
})
$.ajax({
url:'http://rich.cn',
method:"get",
success:function(e){
console.info(e)
}
})
//
// :
var data9 = Mock.mock({
first:'@FIRST',
email:'@email',
sent:'@sentence',
color:'@color',
name:"@name"
})
console.info(JSON.stringify(data9,null,4))
script>
body>
html>mockjs公式サイト:
http://mockjs.com/ホームページは最高の学習資料です.
転載先:https://www.cnblogs.com/rich23/p/6121438.html