看完轻松上手学会mockjs

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能

mockjs可以根据数据模板生成模拟数据

可以模拟Ajax请求，生成并且返回模拟数据

基于HTML模板生成模拟数据

安装moke.js和使用

控制台进入项目里面然后输入

npm i mockjs -D

然后再main.js里面导入

import '@/mock/mock.js'

新建一个mock文件夹然后创建一个mock.js

然后再mock.js里面就可以创建模拟数据了

下面是创建数据的案例

// 导入mockjs
import Mock from 'mockjs';
import qs from 'qs'
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock(/\/api\/random/,function(options){
    // console.log(options,"options");
    var str = options.url.slice(options.url.indexOf("?")+1);
    var elem = qs.parse(str);
    // 获取问号后面内容
    console.log(str);
    return Mock.mock({
        status:0,
        name:elem.name,
        "list|10":[{
            "id|+1":1234,
            "name":"@cname",//随机中文名
            "age|1-200":1,//生成1-200的随机数
            "price|200-500.2-5":1,//生成小数
            "star|1-5":"★",//字符串随机
            "chart|2":"我爱我的祖国",
            "love|1":true,//随机布尔值
            "girl|2":["小红","小黄","小梅","兰姐"],//随机数组（1随机1个,2复制2份）,
            "wife":{"h|150-190":1,"w":45,"weight|85-150":1,"money|1000-9999":1},//对象
            "aprice":function(){return this.price+this.name}, //函数
            "tel":/1\d{10}/,
            "pic":function(){return Mock.Random.dataImage('200x100', this.name)},
            "date":"@date('yyyy/MM/dd')",
            "time":Mock.Random.time(),
            "pdate":"@datetime()",
            "now":"@now()",
            "des":"@cparagraph(1,3)",
            "keyword":"@cword(3,5)",
            "title":"@ctitle(5,12)",
            "url":"@url()",
            "email":/[a-z]{4,12}@\.(126|163|qq)\.(com|cn|org)/,
            "ip":"@ip",
            "add":"@county(true)"
        }]
    })
})

Mock.mock("/api/getData","get",function(){
    return {"name":"mumu","age":18}
})
 
 

然后再views里面创建一个mock.vue 就可以使用模拟数据了

<template>
    <div>
        <h1>mock数据</h1>
        <div v-for="item in list" :key="item.id">
            <p>{{item.name}}</p>
            <p>{{item.add}}</p>
            <img :src="item.pic" alt="">
        </div>
    </div>
</template>

<script setup>
    import {ref} from 'vue'
    import request from "@/utils/request.js"
    const list = ref([]);
    request.get("/api/random?name=老曾&age=18")
    .then(res=>{
        console.log(res.data,"random")
        list.value = res.data.list;
    })
    
    
    request.get("/api/getData")
    .then(res=>{
        console.log("mockdata",res.data);
    })
    
</script>

<style>
</style>
 

下面就是生成的数据可以看一下