使用mock模拟数据

一，随机生产10个字符串

1.创建一个vue3项目

 2.下载mock

        npm install mockjs

3.在src里面创建一个mock目录  index.js文件

4.在index.js文件

//引入  mock是函数   Random是对象
import { mock, Random } from "mockjs"

mock("/user/list", "get", function () {
     let sku = []
     for (let i = 0; i < 10; i++) {
         //将随机字符串用Random.string()
         let ski = Random.string()
         sku.push(ski)
    }
    return sku
})

5.在main.js  引入

import "./mock/index"

6.在AboutView.vue页面使用

• 在写这个之前需要下载axios 
• npm i axios

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getshow">随机生产10个字符串</button>
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
let list = ref([])

function getshow() {
  axios.get("/user/list").then(res=>{
    let {data} = res
    list.value = data
    console.log(data,list)
  })
}
</script>

7.效果

二，随机生产表格数据

（上面的创建以及下载等，就在重复了）

1.在mock文件的index.js文件：

// mock是函数   Random是对象
import { mock, Random } from "mockjs"

// 在主页使用  第一种方式
mock("/user/list", "get", function () {
    let sku = []
    for (let i = 0; i < 10; i++) {
        // 将随机生产id
        let id = Random.id()
        //将随机生产姓名
        let name = Random.cname()
        // 将随机生产图片
        let ski = Random.dataImage('35x35', "Hello")
        // 随机生产性别
        let sex = mock({ "array|1": ['男', '女'] }).array
        // 随机生产年月日
        let birthday = Random.date("yyyy-MM-dd")
        // 随机生产地址
        let add = Random.city(true)
        // 随机生产邮箱
        let mailbox = Random.email()
        // 随机生产手机号
        let phone = mock({"regwxp":/^1[3456789]\d{9}$/})

        sku.push({id,name,ski,sex,birthday,add,mailbox,phone})
    }
    return sku
})



//第二种方式
 let arr = []
    for (let i = 0; i < 10; i++) {
        let list = {}
        list.id = Random.id()
        list.name = Random.cname()
        list.ski = Random.dataImage("40x40")
        list.sex = mock({ "array|1": ["男", "女"] }).array
        list.birthday = Random.date("yyyy年MM月dd日")
        list.add = Random.city(true)
        list.mailbox = Random.email()
        list.phone = mock({ "regwxp": /^1[3456789]\d{9}$/ })
        arr.push(list)
    }
   return arr

2.在main.js  引入

import "./mock/index"

3. 在Home.vue使用：

<template>
    <div>
        <table border="" cellspacing="5" cellpadding="10">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>头像</th>
                <th>性别</th>
                <th>生日</th>
                <th>地址</th>
                <th>邮箱</th>
                <th>手机号</th>
            </tr>
            <tr  v-for="item in list" :key="item.id">
                <td>{{ item.id}}</td>
                <td>{{ item.name}}</td>
                <td>
                    <img :src="item.ski" alt="">
                </td>
                <td>{{ item.sex }}</td>
                <td>{{ item.birthday}}</td>
                <td>{{ item.add }}</td>
                <td>{{ item.mailbox }}</td>
                <td>{{ item.phone.regwxp}}</td>
            </tr>
        </table>
    </div>
</template>

<script setup>
import axios from "axios"
import {reactive} from "vue"
let list = reactive([])
axios.get("/user/list").then(res => {
    let {data} = res
    console.log(res.data)
    list.length = 0
    list.push(...data)
})
</script>

<style lang="scss" scoped></style>

4.效果