首页分享Vue正文
mockjs安装与使用
日期:2020-8-11 14:01:28 人气:8
mockjs的官网:http://mockjs.com/
mockjs是一个模拟json数据的测试工具
安装mockjs
npm install mockjs --save-dev
新建mork.js
可以建一个文件夹里面放index.js文件。
import Mock from 'mockjs';
//Mock 是别名随意起
Mock.mock(‘/api/news’,“get”,{ //路径随便起
'data|10’:[ //
{
'id|+1':1,
'title|+1':Mock.Random.cword(8,20),
'image|+1':Mock.Random.image('200x100', Mock.Random.color()),
'date|+1':Mock.Random.date('yyyy-MM-dd')
}
]
});
});
app.vue 引入mockjs
import “.....” //mock js 的路径
<script>
import "./mock";
export default {
name: 'app',
data(){
return {
news:[], //默认空数组
}
},
components: {
},
created(){
//
$.get("/api/news", (res)=> {
let jsonRes=JSON.parse(res); //转json格式 现在默认是字符串
this.news=jsonRes.data; //他下面有个data
});
//
}
}
</script>
<tr style="font-size:14px;" v-for="(item,index) in news" :key="index">
<td height="40" align="center">{{item.id}}</td>
<td align="center">{{item.title}}</td>
<td align="center"><img :src="item.image" /></td>
<td align="center">{{item.date}}</td>
</tr>