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', // 随机id
      name: '@cname', // 随机中文名称
      'age|18-35': 18, // 随机年龄 18-35
      email: '@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个用户：