页面、 ajax 、mock

南楼画角 提交于 2019-12-08 21:44:37

 

页面1:

//html

<form action = "" method="post"  name="loginForm">

    <p>

      <label for = "username">用户名:</label>

      <input type="text" name="username">

    </p>

    <p>

      <label for = "password">密码:</label>

      <input type="text" name="password">

    </p>

    <p>

      <input type="button" name="login" class=“loginBtn”>

    </p>

</form>

 

 

<script src="./mock.js"></script>

<script src="./tools.js"></script>

<script src="./server.js"></script>

 

//js

const loginBtn=document.querySelctor(".loginBtn")

;loginBtn.onclick=function(){

    let username= document.loginForm.username.value;

     let possword= document.loginForm.possword.value;

     let user{username, password};

     ajax({

           url:"studentSystem/users/login",

           type:"post",

           success(data){

               let isLogin = JOSN.parse(data);

               if (isLogin ){

                       alert("恭喜你,登录成功!");

                  }else{ 

                      alert("不好意思,登录失败");

                  }

           }

     });

}

 

//页面2

//server.js

let arr=[//假的数据库

   {username:"zs",password="123"},

   {username:"ls",password="123"}

];

Mock.mock( / users \ / login , "post" , function({ body})){// 正则表达式,匹配URL网址 url:"studentSystem/users/login",

      //假的服务器 

      //searchStrToObj获取用户输入的字符串分解

    let user=searchStrToObj(body);

    let isLogin = arr.some( v=> v.username == user.username && v.password == user.password ){

      return isLogin;

});//等同于后面

       if(isLogin){//成功

             return true;

      }else{//失败

            return false;

              }

       }}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!