mock生成随机数据并获取到页面

作者: Hello杨先生 | 来源:发表于2019-07-20 23:49 被阅读0次

mock生成随机数据并获取到页面
Mock
element七 mock.js axios
Mock.Random
小程序配合mockjs随机生成数据
前端 Mock
mock.js数据占位符（二）
Mock.js之Mock.Random
接口测试的时候如何生成随机数据进行测试
Mock.js新手教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类请求</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .main{
            width: 500px;
            height: 500px;
            background: aquamarine;
        }
    </style>
</head>
<body>
<input type="button" value="演唱会">
<input type="button" value="话剧">

<div class="main">

</div>


<script src="./js/ajax.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script>
    var btn = document.querySelectorAll("input")
    var kind1 = btn[0].value
    var kind2 = btn[1].value
    var myDiv = document.getElementsByClassName("main")[0]

    btn[0].addEventListener("click",function () {
        window.get("www.baidu.com",showData,"get",{kind:"live"})
    })
    btn[1].addEventListener("click",function () {
        window.get("www.baidu.com",showData,"get",{kind:"speak"})
    })


    function showData(data) {
        var str = ""
        data.forEach((item)=>{
            str+=`<img src="${item.img}"><p>${item.name}</p><p>${item.date}</p> <p>${item.city}</p>  `
        })
        myDiv.innerHTML = str
    }

Mock.mock("www.baidu.com","get",function (options) {
    console.log(options)
    console.log(options.body.kind)

    var myKind = options.body.kind
    var myData = Mock.mock({
        "live|5": [{
            name: "@cname",
            "id|+1": 1000,
            img: "@img('200x100',@color,@title)",
            city: "@city",
            date: "@Date(yyyy-MM-dd)"
        }],
        "speak|2": [{
            name: "@cname",
            "id|+1": 1000,
            img: "@img('200x100',@color,@title)",
            city: "@city",
            date: "@Date(yyyy-MM-dd)"
        }],
    })
    if(myKind == "live"){
        return myData.live
    }else{
        return myData.speak
    }


})



</script>
</body>
</html>

ajax.js

window.get= function (url,callback,type,data) {

    var type = type.toString().toUpperCase()
    var myAjax = new XMLHttpRequest();

    myAjax.onreadystatechange = function () {
        if(myAjax.readyState ==4 && myAjax.status ==200){
            console.log(myAjax.response)
            var responseData = JSON.parse(myAjax.response)//将json字符串转换成json对象
            callback(responseData)
        }else {
            // alert("请求失败")
        }
    }
    myAjax.open(type,url,true);
    myAjax.send(data)
}

image.png