网络请求：数据模拟 - mock模拟数据规则

weixin_47700705
于 2024-05-29 09:10:05 发布
阅读量98
点赞数 3
文章标签：前端
本文链接：https://blog.csdn.net/weixin_47700705/article/details/139283462
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="js/mock.js">
    /* 这个区域未来加载的是外部js的脚本，书写在内部的会被覆盖。（书写无效） */
</script>
<script>
    //   js对象  键值对集合 用于表达复杂数据类型
    // 对象的key是自定义的，value是任意类型的数据
    const obj = {
        "key": "value",
        sex: 0,
        hobby: ['篮球', '足球', '乒乓球']
    }
    /* 
       根据业务需求 定义的数据字典
       1、汽车id      carId
       2、汽车名称     carName
       3、汽车价格     carPrice
       4、汽车图片     carImg

       后端返回数据结构：必须包含 业务状态、消息反馈，业务数据    []
       {
          code:0, 业务状态
          msg:'success', 消息反馈
          data:[] 业务数据
       }
    */
    const mockData = Mock.mock({
        code: 0,//业务状态 0表示成功 其他表示失败
        msg: "success",
        data: {
            carList: ['奔驰', "宝马", "特斯拉", "比亚迪"],
            createTime: "2023-06-19 10:18",
            carType: "0",//0 表示轿车 1表示SUV
        }
    })
    console.log(mockData)

    console.log("-----------------------")

    const mockResult = Mock.mock({
        code: 0,
        msg: "success",
        data: {
            // uname属性名 规则：随机返回一个名称  属性值：名称集合
            "uname|1": ['张三', '李四'],//数组： 1 随机获取一项
            "udesc|3-5": "这是一个中文的描述",//字符串：重复字符串随机3到5次
            "uagelist|10": [{ //数组：重复数组的成员 指定次数
                "uage|+1": 18,
                "open|1": true
            }],//属性值是一个数字 从18开始 每次递增1
            "ubookprice|20-30.2": 1,//数字|min-max ：min-max 范围值 .小数位数
            "open|1": true,//布尔值|1： true或false 2分之一的概率,
            "udog|2": {  //对象|count  随机返回指定数量的属性   对象|min-max 随机范围值
                dogName: "旺财",
                dogAge: 3,
                dogColor: "yellow"
            }
        }
    })

    console.log(mockResult)

    console.log("-----------------------")


    //返回指定条数数据
    let pageSize = 5
    let pageNum = 1
    getDataList(pageSize, pageNum)

    function getDataList(pageSize, pageNum) {


        // const mockResult =   Mock.mock({
        //   // 对象表达式形式添加属性：会将表达式的返回结果作为对象的属性
        //    ['list|'+pageSize]:['@cname']

        //  })


        const mockResult = Mock.mock({
            name: "@cname",
            list: function () {
                console.log(this);//this指向属性所在的对象

                const animals = ['dog', 'cat', 'pig', 'duck'];
                //嵌套使用
                const result = Mock.mock({
                    ["list|" + pageSize]: animals
                })

                return result;//函数的返回值将作为属性的值
            }
        })

        console.log(mockResult)



        //返回指定条数数据

    }
      

        function login(username, upass) {


           return Mock.mock({
                code: 0,
                msg: "success",
                data: function () {
                    //判断用户名和密码是否正确
                    //模拟用户列表
                    const userList = [{
                        uname: "admin",
                        upass: "123456"
                    }, {
                        uname: "zhangsan",
                        upass: "123456"
                    }];

                    //find 返回满足条件的第一个成员
                    const findResult = userList.find(function (item) {
                        //判断条件为 传入的用户名与列表每一项的用户名进行比较
                        return username == item.uname;//返回true 中止遍历 返回当前成员
                    })

                    //如果没有返回结果则证明为找到该用户
                    if (!findResult) {
                        return "用户不存在"
                    }
                    //判断用户名和密码是否正确
                    if (username == findResult.uname && upass == findResult.upass) {
                        return Mock.mock({
                            userId: 'u1001',
                            userName: username,
                            token:"@string(upper,64)=="
                        })
                    } else {
                        return "账户或密码错误"
                    }
                }
            })
        }
    

    console.log(login('zhangsan','123456'));



 const obj1 ={
  code:0,
  msg:"success",
  data:function({_req,Mock}){
    
    let pageNum = _req.query.pageNum;
    let pageSize = _req.query.pageSize;
    
    if(!pageNum){
      
       pageNum =1;
    }
    
    if(!pageSize){
      
      pageSize = 10;
    }
    
    return Mock.mock({
        ['list|'+pageSize]:[{
            'uid|+1':10000,
            'uphone':'13@integer(9)',
            'uzip':'@zip',
            'uaddress':'@county(true)'
        }]});
    
  }
}


</script>

</html>