注册页面

    <h1>我是注册页</h1>

    账号 : <input type="text"><br>
    密码1: <input type="text"><br>
    密码2: <input type="text"><br>
    昵称 : <input type="text"><br>
    <button>注册</button>

    <div></div>

//获取标签对象
const oIptName = document.querySelectorAll('input')[0];
const oIptPwd1 = document.querySelectorAll('input')[1];
const oIptPwd2 = document.querySelectorAll('input')[2];
const oIptNickName = document.querySelectorAll('input')[3];
const oBtn = document.querySelector('button');
const oDiv = document.querySelector('div');

// 封装的ajax请求函数
function myAjax( resObj = { } ){
    // 设定默认值对象 
    const valObj = {
        // 请求方式
        type:'get',
        // 携带参数
        data:'',
        // 请求地址
        url:'',
        // 请求结束触发执行的程序
        success:()=>{},
    };

    // 如果 实参对象中 data属性 存储的是对象形式 { name:'张三' , age:18 }
    // 需要 转化为 键值对字符串形式  'name=张三&age=18'
    if( typeof( resObj.data ) === 'object' ){
        // 定义空字符串 存储 结果 
        let str = '' ;

        // 循环遍历 携带参数对象 也就是 resObj.data 中 存储的对象 
        for( let key in resObj.data ){
            // key 是 对象的键名 也就是 name  age ...
            // resObj.data[key] 是 对象的键值 也就是 张三 18 ...
            str += `&${key}=${resObj.data[key]}` ;
        }

        // 将拼接好的字符串 赋值给 resObj.data 存储 
        // 也就是将 原始存储的对象 覆盖成 拼接好的字符串 
        resObj.data = str.substr(1);
    }


    // 循环遍历默认值对象 
    for( let key in valObj ){
        // 使用 默认值对象中的键名 去 实参对象中调用数据
        if( resObj[key] !== undefined ){
            // 如果调用结果不是undefined 证明 实参对象中 有默认值数据 
            // 将实参对象中的数据 覆盖 默认值对象中的数据
            valObj[key] = resObj[key];
        }
    }


    // 创建ajax实例化对象
    const xhr = new XMLHttpRequest() ;

    // 根据请求类型执行不同的 设定步骤
    // 判断 get/post 请求方式 要统一大小写
    if( valObj.type.toLowerCase() === 'get' ){
        // 设定open()

        // 如果 携带参数也就是valObj.data 是 空字符串 证明没有携带参数 
        // 那么 open()方法 参数2 只设定 请求的url地址

        // 如果 携带参数也就是valObj.data 不是 空字符串 证明需要携带参数 
        // 那么 open()方法 参数2 请求的url地址 拼接问号 拼接 携带参数

        // xhr.open( 'get' , valObj.data === '' ? valObj.url : valObj.url + '?' + valObj.data );

        xhr.open( 'get' , valObj.data === '' ? valObj.url : `${valObj.url}?${valObj.data}` );

        // 设定send()发送请求携带参数
        xhr.send();



    }else if( valObj.type.toLowerCase() === 'post' ){
        // 设定open()
        xhr.open( 'post' , valObj.url );

        // 固定的请求头设定
        xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );

        // 设定send() 如果有参数携带参数
        xhr.send( valObj.data );
    }

    // 接收请求结果
    xhr.addEventListener( 'load' , ()=>{

        // 请求结束触发的回调函数
        // xhr.response 或者 xhr.responseText 中 存储的是 响应体结果
        // 回调函数的执行 需要 根据 响应体结果触发执行
        
        // 判断 ajax状态码是4 http状态码是200-299 请求结束并且请求成功并且解析响应体数据
        if( xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ){
            // 请求结束 并且 请求成功 并且 解析响应体数据
            valObj.success( xhr.response );

        }else{
            // 请求结束 但是 请求失败
            valObj.error();
        }
    })

}
// 给button标签添加点击事件
oBtn.addEventListener( 'click' , ()=>{
    // 验证操作
    // 账号规范 密码规范 两个密码相同 ...

    // 两个密码必须相同 区分大小写
    if( oIptPwd1.value !== oIptPwd2.value ){
        // 如果两个密码不同 写入提示信息
        oDiv.innerHTML = '<span style="color:red">您两次输入的密码不同</span>' ;

        // 通过 return 终止之后的程序
        return ;
    }

    // 获取数据 向 注册接口 发送请求携带参数
    myAjax({
        // 请求url地址
        url:'http://localhost:8888/users/register',
        // 请求方式
        type:'post',
        // 携带参数
        data:{
            username: oIptName.value ,
            password: oIptPwd1.value ,
            rpassword: oIptPwd2.value ,
            nickname: oIptNickName.value ,
        },
        // 请求成功的回调函数
        success: result => {
            // 将 后端返回的json字符串 还原成 对应的数据结构
            // 当前是 对象的数据结构
            result = JSON.parse( result );
            console.log( result );

            // 结果.code 如果是 1 表示注册成功 
            // 结果.code 如果是 0 表示注册失败 
            if( result.code === 1 ){
                // 注册成功

                // 设定一个变量存储倒计时时间
                let num = 5 ;

                // 执行倒计时跳转效果
                oDiv.innerHTML = `<span style="color:pink">恭喜您注册成功 ${num}秒后自动跳转首页面 点击跳转<a href="./login.html">登录页</a></span>` ;                   

                // 设定定时器 每秒执行一次
                let time = setInterval( ()=>{
                    // 每次触发定时器 num数值累减1
                    num-- ;

                    // 当 num 累减至 0 
                    if( num === 0 ){
                        // 清除定时器 
                        clearInterval( time );

                        // 跳转 倒计时结束要去的页面 --- 首页面
                        window.location.href = './index.html' ;

                        // 使用return终止之后写入操作的执行
                        return ;
                    }                        

                    oDiv.innerHTML = `<span style="color:pink">恭喜您注册成功 ${num}秒后自动跳转首页面 点击跳转<a href="./login.html">登录页</a></span>` ;                  

                } , 1000 )


            }else if( result.code === 0 ){
                // 注册失败
                // 写入提示信息
                oDiv.innerHTML = '<span style="color:red">对不起 您注册失败 请您设定新的账号 继续玩命注册</span>' ;                   

            }

        }
    })

})

登录页面

    <h1>我是登录页面</h1>

    账号: <input type="text"><br>
    密码: <input type="text"><br>

    <button>登录</button>

    <div></div>

        // 获取标签对象
        const oIptName = document.querySelectorAll('input')[0];
        const oIptPwd = document.querySelectorAll('input')[1];

        const oBtn = document.querySelector('button');
        const oDiv = document.querySelector('div');
        // 封装的ajax请求函数
function myAjax( resObj = { } ){
    // 设定默认值对象 
    const valObj = {
        // 请求方式
        type:'get',
        // 携带参数
        data:'',
        // 请求地址
        url:'',
        // 请求结束触发执行的程序
        success:()=>{},
    };

    // 如果 实参对象中 data属性 存储的是对象形式 { name:'张三' , age:18 }
    // 需要 转化为 键值对字符串形式  'name=张三&age=18'
    if( typeof( resObj.data ) === 'object' ){
        // 定义空字符串 存储 结果 
        let str = '' ;

        // 循环遍历 携带参数对象 也就是 resObj.data 中 存储的对象 
        for( let key in resObj.data ){
            // key 是 对象的键名 也就是 name  age ...
            // resObj.data[key] 是 对象的键值 也就是 张三 18 ...
            str += `&${key}=${resObj.data[key]}` ;
        }

        // 将拼接好的字符串 赋值给 resObj.data 存储 
        // 也就是将 原始存储的对象 覆盖成 拼接好的字符串 
        resObj.data = str.substr(1);
    }


    // 循环遍历默认值对象 
    for( let key in valObj ){
        // 使用 默认值对象中的键名 去 实参对象中调用数据
        if( resObj[key] !== undefined ){
            // 如果调用结果不是undefined 证明 实参对象中 有默认值数据 
            // 将实参对象中的数据 覆盖 默认值对象中的数据
            valObj[key] = resObj[key];
        }
    }


    // 创建ajax实例化对象
    const xhr = new XMLHttpRequest() ;

    // 根据请求类型执行不同的 设定步骤
    // 判断 get/post 请求方式 要统一大小写
    if( valObj.type.toLowerCase() === 'get' ){
        // 设定open()

        // 如果 携带参数也就是valObj.data 是 空字符串 证明没有携带参数 
        // 那么 open()方法 参数2 只设定 请求的url地址

        // 如果 携带参数也就是valObj.data 不是 空字符串 证明需要携带参数 
        // 那么 open()方法 参数2 请求的url地址 拼接问号 拼接 携带参数

        // xhr.open( 'get' , valObj.data === '' ? valObj.url : valObj.url + '?' + valObj.data );

        xhr.open( 'get' , valObj.data === '' ? valObj.url : `${valObj.url}?${valObj.data}` );

        // 设定send()发送请求携带参数
        xhr.send();



    }else if( valObj.type.toLowerCase() === 'post' ){
        // 设定open()
        xhr.open( 'post' , valObj.url );

        // 固定的请求头设定
        xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );

        // 设定send() 如果有参数携带参数
        xhr.send( valObj.data );
    }

    // 接收请求结果
    xhr.addEventListener( 'load' , ()=>{

        // 请求结束触发的回调函数
        // xhr.response 或者 xhr.responseText 中 存储的是 响应体结果
        // 回调函数的执行 需要 根据 响应体结果触发执行
        
        // 判断 ajax状态码是4 http状态码是200-299 请求结束并且请求成功并且解析响应体数据
        if( xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ){
            // 请求结束 并且 请求成功 并且 解析响应体数据
            valObj.success( xhr.response );

        }else{
            // 请求结束 但是 请求失败
            valObj.error();
        }
    })

}
// button标签添加点击事件
oBtn.addEventListener( 'click' , ()=>{
    // 执行数据规范验证 如果 数据不符合规范 
    // 终止程序不行 不发送ajax请求

    // 调用函数 发送 ajax请求
    myAjax({
        url:'http://localhost:8888/users/login',
        type:'post',
        data:{
            username: oIptName.value ,
            password: oIptPwd.value ,
        },
        success: result => {
            // 响应体结果是json字符串 需要换位对应的数据结构
            result = JSON.parse( result );
            console.log( result );

            // 根据 result.code 判断你登录成功还是失败 执行不同的程序
            if( result.code === 1 ){
                // 登录成功 执行倒计时跳转效果

                // 设定一个变量存储倒计时数值
                let num = 5 ;

                // 写入内容
                oDiv.innerHTML = `<span style="color:pink">恭喜您登录成功 ${num}秒以后返回上一个页面 点击跳转 <a href="https://www.baidu.com">百度</a> </span>`;                               

                // 设定定时器
                let time = setInterval( ()=>{
                    // 数值累减1
                    num-- ;

                    // 数值累加至0 
                    if( num === 0 ){
                        // 清除定时器
                        clearInterval( time );

                        // 跳转上一个页面
                        window.history.go(-1);

                        // 终止之后程序的执行
                        return ;

                    }


                    // 写入新内容
                    oDiv.innerHTML = `<span style="color:pink">恭喜您登录成功 ${num}秒以后返回上一个页面 点击跳转 <a href="https://www.baidu.com">百度</a> </span>`;                               


                } , 1000 )

            }else if( result.code === 0 ){
                // 登录失败
                // 写入提示信息
                oDiv.innerHTML = '<span style="color:red">对不起 您登录失败 账号或者密码有误</span>';                               
            }

        }
    })


})