mock网站
https://www.easy-mock.com/login
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)"
}],
}
法二
{
"data": {
"user": [
{
"name": "孔秀兰",
"id": 1000,
"img": "http://dummyimage.com/200x100/姜霞",
"zum": "级应可更地先解日采如斯达办些积人写。照照采件的石断受类金难风。半整经共建步示象业育高世效较特参去产。",
"city": "新余市",
"b": "2005-19-03"
},
{
"name": "侯涛",
"id": 1001,
"img": "http://dummyimage.com/200x100/薛磊",
"zum": "清外今须分毛商打效型听产管论向。响三低准近每克按林少理划没太。",
"city": "河源市",
"b": "2007-11-01"
},
{
"name": "梁娜",
"id": 1002,
"img": "http://dummyimage.com/200x100/汤刚",
"zum": "越省求更素个见个太第养感上情格层验每。红业名你门先地联列增引样织火流。阶难器样济证立断业整该前利革。",
"city": "六盘水市",
"b": "1988-08-05"
},
{
"name": "龚军",
"id": 1003,
"img": "http://dummyimage.com/200x100/刘杰",
"zum": "持土条压科达小层容被理则段共就线厂。国二深社五要因年准却物打始路。",
"city": "怀化市",
"b": "2004-42-21"
},
{
"name": "田秀兰",
"id": 1004,
"img": "http://dummyimage.com/200x100/贺刚",
"zum": "整家口却个江克还心法行示始专已两石科。求构马着题越议共放色光习条几条。",
"city": "来宾市",
"b": "1971-40-28"
},
{
"name": "姚娜",
"id": 1005,
"img": "http://dummyimage.com/200x100/杨强",
"zum": "际非越油压算日整叫收内干千。状道及何着必精题为局争越热研每去。",
"city": "荆门市",
"b": "1998-57-19"
},
{
"name": "余杰",
"id": 1006,
"img": "http://dummyimage.com/200x100/傅涛",
"zum": "转行别较认号心求调的准科布。取清共阶完联现收会民志几力个作。社下矿养明老议样任南层拉。",
"city": "肇庆市",
"b": "1973-24-09"
},
{
"name": "雷芳",
"id": 1007,
"img": "http://dummyimage.com/200x100/贺磊",
"zum": "局八正年从深成查县油种整眼对位或严。毛圆化对她建调局看之下须。反目其给线对气等持组你现共子身图。",
"city": "澳门半岛",
"b": "1987-34-09"
},
{
"name": "郑刚",
"id": 1008,
"img": "http://dummyimage.com/200x100/刘涛",
"zum": "响把知院局证青任最段向马布广料。头素亲京必第达及除般志思品置容事。样走地工石事圆流劳传里况光离。",
"city": "上海市",
"b": "2005-39-28"
},
{
"name": "沈秀兰",
"id": 1009,
"img": "http://dummyimage.com/200x100/毛洋",
"zum": "结林和何北节音委名想无性容军矿。由社题然山深算名百按求八示断中体基。光志因位而细图声回计强始节布办们。",
"city": "海西蒙古族藏族自治州",
"b": "2017-25-23"
}
]
}
}
style
*{
padding:0;
margin: 0;
}
.main{
width: 500px;
height: 500px;
background: aquamarine;
}
<input type="button" value="演唱会">
<input type="button" value="话剧">
<div class="main">
</div>
axios 封装了所有的Ajax请求 基本格式 .then()表示请求完成后接下的操作 接受一个回调函数（回调函数的参数一般为返回值）
axios.请求方式("api地址",{有传参时写传餐，否则不写}).then((res)=>{console.log(res)}).catch((err)=>{console.log(err)})//请求失败时候调用的函数
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script>
// axios.post("www.baidu.com",{kind:"live"})
//axios 封装了所有的Ajax请求 基本格式 .then()表示请求完成后接下的操作 接受一个回调函数（回调函数的参数一般为返回值）
// axios.请求方式("api地址",{有传参时写传餐，否则不写}).then((res)=>{console.log(res)}).catch((err)=>{console.log(err)})//请求失败时候调用的函数
var btn = document.querySelectorAll("input")
var kind1 = btn[0].value
var kind2 = btn[1].value
var myDiv = document.getElementsByClassName("main")[0]
//axios 结合mock使用时 当需要传参数的时候 需要用POST请求
btn[0].addEventListener("click",function () {
axios.post("www.baidu.com",{kind:"live"}).then((res)=>{
console.log("112211221")
console.log(res)
showData(res.data)
}).catch((err)=>{console.log(err)})
})
btn[1].addEventListener("click",function () {
axios.post("www.baidu.com",{kind:"speak"}).then(function (res) {
showData(res.data)
})
})
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","post",function (options) {
console.log(options)
console.log(options.body.kind)
var myKind =JSON.parse(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>
