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

深藏阁楼爱情的钟 2023-10-10 18:38 27阅读 0赞

#### 文章目录 ####

*  1. 显示用户信息
 *   *  1.1 约定前后端交互接口
     *  1.2 修改列表页的前段代码
     *  1.3 实现详情页的后端代码
     *  1.4 实现详情页的前端代码
 *  2. 注销
 *   *  2.1 确定前后端交互接口
     *  2.2 实现后端代码
     *  2.3 修改前端代码

## 1. 显示用户信息 ##

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

![290f1b255f2146c8aceec12bad049dde.png_pic_center][]  
  
如果是此时登录的列表页，此处显示的是登录用户的信息。  
如果此时登录的是详情页，此处显示的是该文章的作者信息。

### 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;  
  
以上的两条语句把当前的用户信息显示到界面上。

### 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 确定前后端交互接口 ###

通过点击页面中的注销按钮，来实现注销功能，也就是通过点击注销按钮来触发请求。  
  
![666520a710c344b681085aff3bfb5781.png_pic_center][]

> 请求使用 **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 路径。

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

[290f1b255f2146c8aceec12bad049dde.png_pic_center]: https://img-blog.csdnimg.cn/290f1b255f2146c8aceec12bad049dde.png#pic_center
[666520a710c344b681085aff3bfb5781.png_pic_center]: https://img-blog.csdnimg.cn/666520a710c344b681085aff3bfb5781.png#pic_center