航空公司项目打卡——近期总结3

稍稍完善了一下功能。

实现了用户登录后在原本的登录按钮处显示用户的头像和姓名。（头像先使用默认的，还没有开发用户上传自己头像的功能）。

我采用的解决方案2。

总结：

如果要实现用户登录后在原本登录处显示用户信息的话有两种解决方法：

1.后端解决：

使用spring security后端实现这一部分，同时还可以写上注销功能。再添加一个判断用户是否登录的操作，每一次执行登录后才可执行的操作前都调用这个函数来判断是否已经登录，否则不能进行相应功能。

2.直接在前端解决：

使用Ajax获取后端数据，存放到缓存中。

$(document).ready(function (){}

页面一旦加载成功之后就去缓存中寻找用户的信息，如果接收到了用户信息，就对登录按钮这一块内容的html代码进行修改，如果接收不到就说明用户没有登录。

用户的信息在注销功能内从内存中删除。

js代码（直接在里边赋了一个值进行测试）：

$(document).ready(function (){
    // 从内存中获取用户的信息，如果用户信息存在的话才能执行相应操作
    localStorage.setItem("nickname","闫闫闫");
    let nickname = localStorage.getItem("nickname");
    console.log(nickname);
    // localStorage.getItem("phone");
    let user_infomation = document.getElementById("user_part");
    user_infomation.innerHTML="";
    if(nickname!=null)
    {
        console.log("nice to see you")
        // 用户昵称和头像
        let a = document.createElement("a");
        a.href="./user_commons.html";
        user_infomation.style.height="80px";
        user_infomation.style.textAlign="center";

        let img = document.createElement("img");
        let username = document.createElement("div");
        username.style.fontSize="25px";
        username.style.marginLeft="10px";
        username.style.marginTop="20px";
        username.innerText=nickname;
        img.style.marginTop="10px";
        img.classList.add("avatar_image");
        img.src="./租户中心.png";
        img.style.borderRadius="50%";
        img.style.width="60px";
        img.style.height="60px";
        a.appendChild(img);
        user_infomation.appendChild(a);
        user_infomation.appendChild(username);


    }
    else{
        let a = document.createElement("a");
        a.href="./login.html";
        a.classList.add("a");
        a.innerText="登录";
        
        user_infomation.appendChild(a);
    }
)

前端的html代码：