6.登录功能的开发——获取当前用户、用户退出

一、获取当前用户

在上一篇文章，我们实现了用户的的登录，但是后续并没有处理完整，比如登录成功后你要跳转回原来的的页面吧，你要将登录的账号显示在页面吧。这些将在这一篇文章进行处理。

1.1后端处理

在UserServlet类中添加新的路径，用来判断调用新的方法。

@WebServlet({
        "/user/login",
        "/user/curr"
})

在doGet方法的switch分支处理结构加上新的case:

            case "/user/curr":
                userCurr(req,resp);
                break;

实现userCurr方法：
还记得我们登录时数据放在哪里了吗，在登录成功时我们通过
req.getSession().setAttribute("CurrUser", user);
把登录用户的信息放在了Session中了，现在我们要获取当前登录的用户信息就要从Session中拿出来。

private void userCurr(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        Object user =req.getSession().getAttribute("CurrUser");//从Session中取出数据
        if(user!=null){
            MyWeb.printJson(resp,R.OK(user));
        }else{
            MyWeb.printJson(resp,R.err("未登录！"));
        }
    }

我们从请求的会话（Session）中获取名为 “CurrUser” 的属性，放入user对象中，如果不为空，说明用户数据存在我们发送往前端一个包含数据的成功响应，如果为空那么说明没登录，那么向前端发送一个包含错误信息的响应。
后端到这里就完成了，接下来我们要在前端处理响应。

1.2前端处理

话不多说，直接上代码：

    const getCurrUser =async ()=>{
        document.querySelector("#loginBtn").style.display="block";//显示
        document.querySelector("#currBtn").style.display="none";//不显示

        const resp =await fetch("/user/curr");//获取响应
        if(!resp.ok) return;
        const result =await resp.json();
        if(!result.success) return;
        const user =result.data;

        console.log(user);
        document.querySelector("#userName").innerText =`${user.u_nickname}【${user.u_id}】`;//user.u_nickname;``
        document.querySelector("#loginBtn").style.display="none";
        document.querySelector("#currBtn").style.display="block";
    }
    getCurrUser();

在首页也就是index.html中，我们创建一个getCurrUser函数,用来处理后端发过的响应，获取用户的数据。
首先是先将元素初始化，确保没有问题，不写这两行，页面设计之初也是这样的，没有什么较大的影响，方便自己代码阅读。此时登录元素显示，用户元素不显示的。
如果两个都显示就是这样的：

登陆后我们要将当前用户显示出来。
接下来我们向后端发起请求获取响应，根据响应状态判断，成功状态我们就获取响应中的json格式的数据放入result对象中，如果result.success为真，我们就拿出数据，在控制台打印（便于调试），然后在当前文档中查找id为userName的元素，将获取的数据赋值给它的子元素innerText来显示，最后隐藏登录元素，显示当前用户元素，就完成了。

运行项目出现这样，那么就成功了！

二、用户的退出

2.1后端

对于用户的退出，要知道我们的数据放在Session中的，将数据包含在响应中发送往前端的，前端通过 响应状态处理数据。所以要实现用户的退出，我们首先接收前端发送过来的请求响应，解析路径地址，调用用户的退出方法就可以了。

1. 在注解中加入新的路径： "/user/exit"
2. 在switch分支结构中加入新的case板块：

            case "/user/exit":
                userExit(req,resp);
                break;

3. 实现userExit方法：

    private void userExit(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.getSession().removeAttribute("CurrUser");
        MyWeb.printJson(resp,R.OK());
    }

非常简洁，直接把存放在Session中的用户数据使用remove方法去除，然后包含成功的响应返回给前端，让前端进行页面上的处理。
后端到这里完成

2.2前端

首先我们退出也是有一个页面的，我们要在用户点击退出时跳转到退出页面。
所以我们在退出元素href属性加上路径，让点击后浏览器导航到退出的页面。

            <li><a class="dropdown-item" href="#">退出</a></li>

增加路径，指向退出页面：

           <li><a class="dropdown-item" href="exit.html">退出</a></li>

到这里，用户点击退出后浏览器跳转到推出页面，一直在这里。

现在我们需要进行那些操作？

1. 提示退出成功与否的信息
2. 退出成功与否都要返回首页

所以现在在退出页面引入轻组件用来显示提示消息：

<div class="toast-container position-fixed top-0 start-50 translate-middle-x mt
1">
    <div id="toast" class="toast opacity-100 bg-white">
        <div class="toast-header">
            <strong class="me-auto"></strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast">
            </button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>

和之前引入的是一样的。
引入之后，我们要把组件转换为对象，以及创建函数来为后续不同消息提示铺垫条件：

    const toastObj = new bootstrap.Toast(document.querySelector("#toast"),{delay:2200});

    const toast = (title = "信息", msg = "") => {
        document.querySelector("#toast .me-auto").innerHTML = title;
        document.querySelector("#toast .toast-body").innerHTML = msg;//注意空格加点
        toastObj.show();
    }

函数根据传入的参数设置组件子元素的信息，以便显示不同消息。注意 document.querySelector方法参数的写法，组件id后面有空格在加点加子元素，注意规范不然找不到的。（我当时没注意，组件不出来，找了半天）
接下来最后一步：编写qiut函数向后端发起请求并且通过响应判断退出状态。

    const quit = async () => {
        const resp = await fetch("./user/exit");
        if (!resp.ok) {
            toast("失败！", "退出失败！");
            setTimeout(() => location.href = 'index.html', 1500);
            return;
        }
        const result = await resp.json();
        if (!result.success) {
            toast("失败！", result.message);
            setTimeout(() => location.href = 'index.html', 1500);
            return;
        }
        setTimeout(() => {
            toast("成功", "退出成功！");
            document.querySelector("#exitLoading").style.display = "none";
            document.querySelector("#exitInfo").innerHTML = "正在跳转中...";
            setTimeout(() => location.href = "index.html", 1500);
        }, 1500);
    };

    quit();

函数不难，就是根据响应显示不同的信息，跳转回首页就好了

1. 定义路径，和后端一样，让后端执行退出方法。
2. 使用fetch函数向后端发起请求，返回的响应存在resp对象中
3. 判断响应状态，如果响应是不成功的，那么调用组件函数显示退出失败的信息，并且使用延时执行的函数来返回首页。响应成功，那么获取响应中json格式的数据存放在result对象中，对对象进行判断，大概就是对象为空说明数据去除了，那么就退出成功，如果数据存在那么说明数据并没有去除掉，那么退出失败，延时执行函数跳转回首页。
4. 最后如果上述条件判断都完成，退出成功时，组件显示成功退出的消息，然后 将原来网页的动画隐藏起来，将信息换成正在跳转...，然后延时执行函数返回首页。

这么做的原理是让为了用户体验，其次操作完成的反馈，和页面有动画或过渡效果，延迟可以确保这些效果有足够的时间执行完毕。
效果：https://live.csdn.net/v/418336