promise的方法用于表单的登录与验证

//引入的路径是一个本地服务器的路径,引用的时候自己手动修改,样式没有写,自己去写

//注册页面的js分为三个js

//第一个是请求数据的ajax.js

let $ = {//做公共的数据请求

    baseUrl:"http://localhost:9999/",

    ajax(json) {//用来请求数据  接收的一个对象

        let xhr = new XMLHttpRequest();

        let url =this.baseUrl+json.url;//

        if(json.type.toLowerCase() == "get"&&json.data){//get请求有data

            url +="?";

            for(let key in  json.data){

                url += key+"="+json.data[key]+"&"

            }

        }

        xhr.open(json.type,url);//url分get  post  put(根据id)  delete(根据id)

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                try{//错误捕获

                    let res = xhr.responseText;

                    if (json.dataType == "json") {

                        res = JSON.parse(res);

                    }

                    json.success(res);

                }catch(e){

                    if(json.error){//错误回调

                        json.error(e);

                    }

                }

               

            } else {//加载数据完成前的处理

                if (json.before) {

                    json.before();

                }

            }

        }

        if (json.type.toLowerCase() != "get") {

            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

        }

        if (json.data&&json.type.toLowerCase() != "get") {//data={username:"leson",userpwd:123}不要变成username=leson&userpwd=123&

            let str = ""

            for (let key in json.data) {

                str += key + "=" +  json.data[key] + "&";

                // str += `${key}  = `

            }

            xhr.send(str);

        } else {

            xhr.send();

        }

    }

//第二个是公共的样式部分的js主要功能是增删改查,方法是promise

 

import  $ from "./ajax.js";

let  get =function(url,data){

    let  p  =  new  Promise(function(resolve,reject){

        $.ajax({

            type:"get",

            url,

            dataType:"json",

            data,

            success:function(list){

                resolve(list);

            },

            error:function(e){

                reject(e);

            }

        })

    })

    return  p;

  

}

let  post  = function(url,data){

return  new  Promise(function(resolve,reject){

    $.ajax({

        type:"post",

        url,

        dataType:"json",

        data,

        success:function(res){

            resolve(res);

        }

    })

}) 

}

let  del = function(url,cb){

    $.ajax({

        type:"delete",

        url,

        dataType:"json",

        success:function(){

            cb();

        }

    })

}

let  put = function(url,data,cb){

    $.ajax({

        type:"put",

        url,

        dataType:"json",

        data,

        success:function(res){

            cb(res);

        }

    })

}

export  {

    get,post,del,put

}

//第三个是注册页面用户引入的js

 

 

import  {get,post} from "../index.js";

export  default {

    tableName:"userinfos",

    query:function(data){//你给我数据 我给你结果

     return   get(this.tableName,data)

    },

    

    add:function(data){

        return  post(this.tableName,data)

    }

}

//第四个是用户注册的页面的js文件

import userModel from "./index.js";

let usernameInput = document.getElementById("username");

let userpwdInput = document.getElementById("userpwd");

let registerBtn = document.getElementById("register");

registerBtn.onclick = async function () {

    let username = usernameInput.value;

    let userpwd = userpwdInput.value;

    let list = await userModel.query({ username });

    if (list.length) {

        alert("该用户名已经存在")

    } else {

        let info = await userModel.add({ username, userpwd });

        alert("新增成功");

        console.log(info);

        location.href = "../lesson03 afternoon/login.html";

    }

}

 

 

//第五个是登录页面的js文件

import  userModel  from  "./index.js";

let usernameInput = document.getElementById("username");

let  userpwdInput = document.getElementById("userpwd");

let  loginBtn = document.getElementById("login");

loginBtn.onclick=function(){

    //获取用户名和密码

    //进行验证 

    let username  = usernameInput.value;

    let userpwd  = userpwdInput.value;

    userModel.query({username,userpwd}).then(function(list){

        // console.log(list);

        if(list.length){//boolean转换  0为false    

            // alert("登录成功");

            let userinfo  = list[0];//

            window.localStorage.setItem("userinfo",JSON.stringify(userinfo));//把用户信息 以字符串的形式存起来

            window.location.href ="list.html";

        }else{

            alert("用户名和密码不匹配");

        }

    })

}

 

 

//下面分别是注册和登陆的页面的显示仅仅只是引入两行js代码就搞定了

 

 

 

//注册页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div>

        <div>用户名<input id="username"/></div>

        <div>密码<input id="userpwd"/></div>

        <div>

            <button id="register">注册</button>

        </div>

    </div>

</body>

<script src="js/userinfo/register.js" type="module"></script>

 

 

 

 

//登陆页面

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div>

        <div>用户名<input id="username"/></div>

        <div>密码<input id="userpwd"/></div>

        <div>

            <button id="login">登录</button>

        </div>

    </div>

</body>

<script src="js/userinfo/login.js" type="module"></script>

</html>

}

export default $;