electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据
引入
造数据是很麻烦的事情,我们可以把造数据的流程交给mockjs去做
mock.js官网
demo项目地址
1.引入依赖
# 安装mockjs的依赖
npm install mockjs
# 安装声明文件
npm i --save-dev @types/mockjs
2.提取一个返回组件
我们写demo时有多个地方需要返回上一页,所以干脆咱们直接写一个goback组件:
- src\\components\\demo\\GoBack.vue
<!-- 封装按钮,点击返回上一级页面 -->
<template><el-button @click="goBack" type="success"><slot>返回</slot></el-button>
</template><script lang="ts" setup>
import { useRouter } from 'vue-router';
let router = useRouter();
/// 返回上一页
const goBack = () => {router.back();
};
</script><style scoped></style>
3.使用mockjs制造数
1.首先我们补充一个demo页,专门用来练习mockjs
- src\\components\\demo\\MockDemo.vue
<template><div class="mockDemo"><GoBack></GoBack><h1>数据模拟demo页</h1><el-button @click="refreshPage">刷新数据</el-button><ul><li><span class="title">模拟1-10颗星星:</span><span style="color: pink"> {{ starts }}</span></li><li><span class="title">模拟3个用户:</span><ul v-for="item in persons" :key="item.id" class="persion"><li>ID:{{ item.id }}</li><li>NAME:{{ item.name }}</li><li>AGE:{{ item.age }}</li><li>EMAIL:{{ item.email }}</li></ul></li><li></li></ul></div>
</template><script setup lang="ts">
import { ElButton } from 'element-plus';
import Mock from 'mockjs';// 刷新页面
function refreshPage() {location.reload()
}
// 随机1-10颗星星
const starts: string = Mock.mock({'starts|1-10': '★'
}).starts;
// 随机3个用户
const persons: [any] = Mock.mock({'array|3': [{id: '@id', // 随机idname: '@cname', // 随机中文名称'age|18-35': 18, // 随机年龄 18-35email: '@email' // 随机邮箱}]
}).array;</script><style scoped>
ul {list-style: none;
}.mockDemo .title {font-weight: bold;
}.mockDemo .persion {border-bottom: 1px solid #ccc;
}
</style>
2.我们在router中补充路由,demo页补充一个路由跳转
4.演示效果
可以看到我们随机模拟了 1-10个星星,3个用户: