实现用户登陆和退出登陆以及用户信息展示

• 用户登录
  • 1.获取登录按钮并且添加点击事件
  • 2.获取到用户输入的表单信息
  • 3.调用登录接口实现登录
  • 4.如果用户登录成功跳转到会员中心

//1.获取登录按钮并且添加点击事件
$('#login-btn').on('click', function(){
    
     //2.获取到用户输入的表单信息
     //$.trim去除字符串两边的空格
    var username = $.trim($("[name='username']").val());
    var password = $.trim($("[name='password']").val());
    
     //判断
    if(!username){
        mui.toast("请输入用户名");
        return;
    }

    if(!password){
        mui.toast("请输入密码");
        return;
    }
    
    //3.调用登录接口实现登录
    $.ajax({
        url: '/user/login',
        type: 'post',
        data: {
            username: username,
            password: password
        },
        //请求之前的状态
        beforeSend: function(){
            $('#login-btn').html("正在登录...");
        },
        //4.如果用户登录成功跳转到会员中心
        success: function(res){

            mui.toast("登录成功");

            $('#login-btn').html("登录");

            setTimeout(function(){
                location.href = "user.html";
            }, 2000);
        }
    })


});

=========================================================

• 退出登录
  • 1.获取到退出登录按钮并添加点击事件
  • 2.调用退出登录接口实现 退出登录
  • 3.如果退出成功 跳转到首页
    // 保存用户信息
    var userInfo = null;

$.ajax({
url: '/user/queryUserMessage',
type: 'get',
// 同步
async: false,
success: function(res){
console.log(res);

    // 用户没有登录
    if(res.error && res.error == 400){

        location.href = "login.html";

    }

    userInfo = res;

}

});

$(function(){

$('#logout').on('click', function(){

    $.ajax({
        url: '/user/logout',
        type: 'get',
        success: function(res){

            if(res.success){
                mui.toast("退出登录成功");
                setTimeout(function(){
                    location.href = "index.html";
                },2000)
            }

        }
    })

});


/**
 * 获取用户信息 并且要处理用户未登录的问题
 */

// 拼接模板
var html = template('userTpl', userInfo);

// 展示用户信息
$('#userInfoBox').html(html);

});