在vue中使用mock模拟数据
==文末福利==#安装
npm install mockjs
1.创建mock文件夹，index.js
import Mock from 'mockjs'const Random = Mock.Random;Mock.setup({timeout: '300-600' //设置300-600ms延时请求数据})function getData(){let datalist= [];for (let i = 0; i < 5; i++) {let newData = {id: Random.id(), //生成ideamil:Random.email(), //邮箱uuid: Random.guid(), //uuid'level|1-5': "★", // 随机生成1-5个★isVip: Random.boolean(), //布尔值desc: Random.csentence(5, 30), // Random.csentence( min, max ) 生成随机一段文字img: Random.dataImage('10x10', '演示头像'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码author: ame(), // ame() 随机生成一个常见的中文姓名date: Random.datetime('yyyy-MM-dd A HH:mm:ss') // Random.datetime()时间日期,可指定返回格式}datalist.push(newData)}return {data: datalist}}//更多生成可查看 /examples.htmlconst data = Mock.mock('/vue-element-admin/record/list',Mock.mock(getData))export default {data};
2.main.js引入
import mockdata from './mock'new Vue({mockdata,render: h => h(App)}).$mount('#app')
3.vue页面请求数据
import axios from 'axios'axios.get('/vue-element-admin/record/list').then(res=>{console.log(res.data.data)})
4.mock生成的数据
注意
'level|1-5': "★", // 随机生成1-5个★使用该种写法外层需包裹 Mock.mock({'level|1-5': "★"}),否则不会解析
链接: js点击按钮分别实现全屏以及退出全屏的方法.
文末福利
戳一戳去查看： 我的省钱攻略
