来自一枚初生牛犊不怕虎的小菜鸟的Mock.js使用,不足之处欢迎读者的指出 谢谢

<script src="./app/libs/require.js"></script> ???<script> ???????require(["./main.js"],function(){ ???????????require([‘myMock‘],function(myMock){ ???????????????????????????}) ???????}) ???</script>

1 require.config({2 ????paths:{3 ????????‘ajax‘:‘./app/js/ajax‘,//自己封装的ajax路径4 ????????‘myMock‘:‘./app/js/myMock‘,//生成随机数据和交互函数5 ????????‘Mock‘:‘./app/libs/mock-min‘,//引入mock.js6 ????????‘utils‘:‘./app/js/utils‘//关于ajax中参数的转换7 ????}8 })

 1 let arr=[‘01.jpg‘,‘02.jpg‘,‘03.jpg‘,‘04.jpg‘,‘05.jpg‘]; 2 ????let user=[]; 3 ????for(var i=0;i<30;i++){ 4 ????????user.push(Mock.mock({ 5 ????????????name:Mock.Random.cname(), // 名字 6 ????????????addr:Mock.mock(‘@county(true)‘), // 地址 7 ????????????‘age|88-120‘:1, // 年龄 8 ????????????‘image|1‘:arr, // 随机图片路径 改成+1按数组顺序生成 9 ????????????‘csentence‘:Mock.Random.csentence(3), // 句子10 ????????}))11 ????}

1 Mock.mock("/api/test", {2 ????mock: user3 ??})

1 ajax({2 ????????url:"/api/test",3 ????????type:"post",4 ????}).then(function(res){5 ????????console.log(res)//这里得到刚才通过mock随机出来的数组6 ????})

 1 define([‘utils‘], function(utils) { 2 ????‘use strict‘; 3 ????function ajax(opt){ 4 ????????let def={ 5 ????????????type:"get", 6 ????????????async:true, 7 ????????} 8 ???????let defs = ?Object.assign({},def,opt); 9 ????????return new Promise(function(resolve,reject){10 ????????????let xhr=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP");11 ????????????xhr.onreadystatechange=function(){12 ????????????????if(xhr.readyState==4){13 ????????????????????14 ????????????????????if(xhr.status==200){15 ????????????????????????resolve(JSON.parse(xhr.responseText))16 ????????????????????}else{17 ????????????????????????reject(xhr.status)18 ????????????????????}19 ????????????????}20 ????????????};21 ????????????if(defs.type=="get"){22 ????????????????xhr.open(defs.type,defs.url+"?"+utils.formateObj(defs.data),defs.async);23 ????????????????xhr.send(null)24 ????????????}25 ????????????if(defs.type=="post"){26 ????????????????xhr.open(defs.type,defs.url,defs.async);27 ????????????????xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");28 ????????????????xhr.send(utils.formateObj(defs.data))29 ????????????}30 ????????})31 ????}32 ????return ajax;33 });

<script> ???????let str=[ ???????????{ ???????????????user:"js", ???????????????pwd:"111" ???????????},{ ???????????????user:"jquery", ???????????????pwd:"222" ???????????},{ ???????????????user:"node", ???????????????pwd:"333" ???????????},{ ???????????????user:"vul", ???????????????pwd:"444" ???????????},{ ???????????????user:"html", ???????????????pwd:"555" ???????????},{ ???????????????user:"css", ???????????????pwd:"666" ???????????} ???????] ???????let user=document.querySelector(".user"); ???????let pwd=document.querySelector(".pwd"); ???????//点击按钮的时候调用ajax ???????let btn=document.querySelector(".btn"); ???????btn.onclick=function(){ ???????????$.ajax({ ???????????????url:‘/api/login‘,//接口地址 ???????????????type:‘post‘,//必须设的 ???????????????dataType:"json",//必须设的 ???????????????data:{//传的参数 ???????????????????user:user.value, ???????????????????pwd:pwd.value ???????????????}, ???????????????success:function(rs){ ???????????????????//后台验证成功的时候的返回数据 ???????????????????//console.log(rs) ???????????????????if(rs.code==0){ ???????????????????????alert("88") ???????????????????} ???????????????} ???????????}) ???????} ???????//模拟后台逻辑 ???????Mock.mock(‘/api/login‘,function(res){ ???????????//第一个参数是设置的接口 ???????????//想要得到用resbody ???????????//此时得到是user=chen&pwd=123这种格式 ???????????//需要得到一种{"user":"chen","pwd":"123"}这种格式 所以需要封装一个函数 ???????????//console.log(res.body); ???????????//调用转换格式函数 ???????????//es6的结构赋值 ???????????let {user,pwd}=format(res.body); ???????????//把前端传过来的这个参数和数据库中的进行匹配 ???????????let flag=str.map(function(item){ ???????????????if(item.user==user&&item.pwd==pwd){ ???????????????????//如果前端把用户输入传过来的值传过来后和数据库的值比较后有相同的就给前端返回一个值code让前端知道用户输入的是正确的从而做一些操作 ???????????????????//需要注意的点是此时return的这个map函数 要整个变量在外面继续return ???????????????????return { ???????????????????????code:0, ???????????????????????msg:‘success‘ ???????????????????} ???????????????} ???????????}); ???????????//注意此时的flag有可能是[undefined,undefined,{5555},undefined]这种格式 我们需要获取中间有内容的一项 换句话说也是匹配成功的哪一项 ???????????for(var i=0;i<flag.length;i++){ ???????????????if(flag[i]){ ???????????????????return flag[i]//这个变量return出来后可以再ajax的success中获取到 ???????????????} ???????????} ???????????????????}) ???????//转换格式的封装函数 ???????function format(str){ ???????????return JSON.parse(‘{"‘+str.replace(/\&/g,‘","‘).replace(/\=/g,‘":"‘)+‘"}‘) ???????} ???</script>