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

本文章写的是基于require的mock.js的几种常用生成随机数据和ajax模拟前后端的交互信息

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

首先 这是主页面的引入  ==>接着去main.js中把用到得js文件去注册

1 require.config({
2     paths:{
3         'ajax':'./app/js/ajax',//自己封装的ajax路径
4         'myMock':'./app/js/myMock',//生成随机数据和交互函数
5         'Mock':'./app/libs/mock-min',//引入mock.js
6         '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     }

接着我们可以利用mock设置一个假的接口 将这些随机生成的数据通过ajax获取出去渲染到页面 代码如下

1 Mock.mock("/api/test", {
2     mock: user
3   })

第一个参数随便设的一个地址 ajax的url获取这个接口 代码如下

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

因封装的ajax问题 这里传参必须是post 否则会出现404错误 原因不明 望懂的人告知  如调用jQuery库中的ajax可解决这个问题  封装的ajax代码如下

 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 });

以上部分是通过ajax获取数据的过程  一下给大家介绍通过ajax的data像mock传递参数 当mock接收到以后与数据库的数据进行匹配 然后返给前端匹配后的结果

str是模拟的后台数据库  前期可以用在表单的登录验证中使用

<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>