mockjs模拟数据插件

安装

npm i mockjs

定义使用

./mock/index.js

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/list', {
    
    
  code: 0, data:
  {
    
    
    'data|1000': [  // 创建1000条数据
      {
    
    
        id: '@id',//随机id
        name: '@name',//随机名称
        nickName: '@last',//随机昵称
        phone: /^1[34578]\d{9}$/,//随机电话号码
        'age|11-99': 1,//年龄
        address: '@county(true)',//随机地址
        email: '@email',//随机邮箱
        isMale: '@boolean',//随机性别
        createTime: '@datetime',//创建时间
        avatar() {
    
    
          //用户头像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

mockjs使用get方式小案例

import Mock from 'mockjs';
  
//写法一：规定只能为get请求
// 拦截get请求，返回数据
 
Mock.mock("/api/feed","get",function(){
    
    
    console.log("get 拦截")
    //返回10条随机数据
    return Mock.mock({
    
    
        "data|10":[
            {
    
    
                下方为自定义的数据类型
 
                name:"@cname",//随即中文名
                msg:"@cparagraph(2,3)",//随机段落
                date:"@datetime",//随机日期
            }
        ]
    })
});

//推荐方法二
//写法二：省略许多无用步骤 且未规定请求方式 post或get均可使用
// 拦截get请求，返回数据
// 当用户ajax地址里面 有/api/login 的时候 返回如下数据
 
Mock.mock("/api/feed",
    //返回10条随机数据 
    Mock.mock({
    
    
        "data|10":[
            {
    
    
                name:"@cname",//随即中文名
                msg:"@cparagraph(2,3)",//随机段落
                date:"@datetime",//随机日期
            }
        ]
    })
)

常用语法

“id”:“@id”
“star|1-2”:“★” 字符串重复一道2次
“price|100-200.2-3” 小数点2-3位
“data|10”:[{name:“名称”}] 数组的内容重复10遍
“live|1”:true,随机返回true,false
“tel”:/13 \d{9}/,
“des”:function(){ return this.start+this.price}
“name”:“@cname” 表示中文名称
“address”:“@country(true)” 地址
“ip”:“@ip”,
“description”:“@cparagraph(1, 3)” 随机段落2-3行
“pic”:@dataImage(‘200x100’,‘色块图片’)`

调用

main.js导入

import './mock/index.js'

页面调用

<script setup>
import axios from "axios";
axios.get("http://localhost:8080/list").then((res) => {
  console.log(res);
});
</script>