博客系统后端设计(七) - 实现显示用户信息与注销功能

1. 显示用户信息

此处的用户名是写死的，我们希望的是此处是能够动态生成的。

如果是此时登录的列表页，此处显示的是登录用户的信息。
如果此时登录的是详情页，此处显示的是该文章的作者信息。

1.1 约定前后端交互接口

由于列表页和详情页显示的信息是不一样的，在约定前后端交互接口的时候要分为两种不同的情况。

这里先来约定列表页：

请求使用 GET 路径是 /login

响应是 HTTP/1.1 200 OK
它的格式如下：

{
  userId: 1,
  username: 'zhangsan'.
  password: '123'
}

接下里约定详情页：

请求使用 GET 路径是 /author?blogId=1

响应是 HTTP/1.1 200 OK
它的格式如下：

{
  userId: 1,
  username: 'zhangsan'.
  password: '123'
}

列表页的后端已经实现了，稍微修改前端代码即可，把得到的用户信息显示出来。

详情页是重新实现的。

1.2 修改列表页的前段代码

let h3 = document.querySelector(‘.container-left .card h3’);
h3.innerHTML = body.username;

以上的两条语句把当前的用户信息显示到界面上。

function checkLogin() {
    $.ajax({
        type: 'get',
        url: 'login',
        success: function(body) {
            if (body.userId && body.userId > 0) {
                // 登录成功！
                console.log("当前用户已经登录！！！");
                // 加上这个功能，把当前的用户信息显示在界面上
                let h3 = document.querySelector('.container-left .card h3');
                h3.innerHTML = body.username;
            } else {
                // 当前未登录，跳转到登录页面
                location.assign('blog.in.html');
            }
        }
    });
}
        
checkLogin();

1.3 实现详情页的后端代码

新建一个 AuthorServlet 类。

public class AuthorServlet extends HttpServlet {

    private ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String blogId = req.getParameter("blogId");
        if (blogId == null) {
            resp.setContentType("text/html; charset=utf8");
            resp.getWriter().write("参数非法，缺少 blogId");
            return;
        }
        // 根据 blogId 查询，Blog 对象
        BlogDao blogDao = new BlogDao();
        Blog blog = blogDao.selectById(Integer.parseInt(blogId));
        if (blog == null) {
            // 博客不存在
            resp.setContentType("text/html; charset=utf8");
            resp.getWriter().write("没有找到指定博客 blogId = " + blogId);
            return;
        }
        // 根据 blog 中的 userId 找到对应的用户信息
        UserDao userDao = new UserDao();
        User author = userDao.selectById(blog.getUserId());
        String repJson = objectMapper.writeValueAsString(author);
        resp.setContentType("application/json; charset=utf8");
        resp.getWriter().write(repJson);
    }
}

1.4 实现详情页的前端代码

在详情页中创建一个新的方法。

 // 显示用户信息
 function getAuthor() {
    $.ajax({
        type: 'get',
        url: 'author',
        success: function(body) {
            // 把 username 设置到界面上
            let h3 = document.querySelector('.container-left .card h3');
            h3.innerHTML = body.username;
        }
    });
}

getAuthor();

2. 注销

要想实现注销功能。需要判定当前的 登录状态；这里一共有两种方式：

1、看看是否能查到 http session 对象

2、看看 session 对象里有没有 user。

鉴于以上两种方式都可以实现注销功能，因此要么把 HttpSession 删掉；要么把 User 删掉，
满足以上一种情况即可。

getSession 有创建/获取会话的方法，但是没有删除会话的方法，因此想要删除会话会比较麻烦。
更好的办法就是 删除 user 对象，直接使用 removeAttribute 即可删除。

之前实现的逻辑中，httpsession 和 user 一定是一损俱损，一荣俱荣的。
但是在引入了注销逻辑之后，就会出现有 httpsession 无 user 的情况。

2.1 确定前后端交互接口

通过点击页面中的注销按钮，来实现注销功能，也就是通过点击注销按钮来触发请求。

请求使用 GET，路径是 /logout

响应使用 HTTP/1.1 302

2.2 实现后端代码

新建一个 LogoutServlet 类。

@WebServlet("/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession httpSession = req.getSession(false);
        if (httpSession == null) {
            // 未登录状态，直接提示错误
            resp.setContentType("text/html; charset=utf8");
            resp.getWriter().write("当前未登录！！！");
            return;
        }
        httpSession.removeAttribute("user");
        // 跳转到登录页面
        resp.sendRedirect("blog.in.html");
    }
}

2.3 修改前端代码

在之前写好的前端代码中的 a 标签里加上一个 logout 路径。

<a href="blog.list.html">主页a>
<a href="blog.edit.html">写博客a>
<a href="logout">注销a>

主页 和 写博客跳转的就是对应的页面，以上代码要在列表页、详情页、编辑页都实现一遍。
只是登录页无注销功能，不需要给注销按钮加上一个 logout 路径，其他一样。

此时点击按钮就可以实现对应的功能了。