<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ foo }}</p>
<button @click ="getFun">getFun</button>
<button @click ="postFun">postFun</button>
{{user.name}}
{{user.id}}
<div v-for="item in fakeData">
{{item.id}}
<img :src="item.img" alt="">
</div>
</div>
<script src="./js/mock.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
Mock.mock('/get', function(options) {
console.log("-----------------------");
return Mock.mock({
"user": {
'name': '@cname',
'id|+1': 88
}
});
})
Mock.mock('/post', function(options) {
console.log("-----------------------");
console.log(JSON.parse(options.body).firstName);
return Mock.mock({
"user": {
'name': '@cname',
'id|+1': 88
}
});
})
// Mock.setup({ timeout: 1000 });
new Vue({
el: '#app',
data: {
foo: "ddd",
fakeData: '',
user: ''
},
created: function (){
this.getFake()
},
methods: {
getFake: function(){
this.fakeData = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'guid': '@guid',
'foo': 'Hello',
// 属性 name 产生数量在最小最大之间min-max
'age|1-5': '*',
'email': '@email',
'cname': '@cname',
//整数1-10之间，小数1-10位
"number|1-10.1-10": 1,
"boolean|1-2": true,
"obj|2-3": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"array|1-10": [
"AMD",
"CMD",
"UMD"
],
'fun': function() {
return this.name
},
'regexp': /\d{5,10}/,
//Absolute Path
"absolutePath": "@foo /@foo",
'date': '@date("yyyy-MM-dd")',
'datetime': '@datetime("y-MM-dd HH:mm:ss")',
//image( size, background, foreground, format, text )
'img': "@dataImage('200x100', 'Hello Mock.js!')",
'color': '@color',
'rgba': '@rgba()',
'text': '@paragraph(1, 3)',
'sentence': '@sentence(3, 5)',
'cparagraph': '@cparagraph(1, 3)'
}]
}).list
},
getFun: function(){
axios.get('/get')
.then( (response)=>{
console.log(response.data);
this.user = response.data.user
})
.catch( (error) => {
console.log(error);
});
},
postFun: function(){
axios.post('/post',{
firstName: 'Fred',
lastName: 'Flintstone'
})
.then( (response)=>{
console.log(response.data);
})
.catch( (error) => {
console.log(error);
});
}
}
})
</script>
</body>
</html>