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

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

文章目录

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

1. 显示用户信息

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

290f1b255f2146c8aceec12bad049dde.png_pic_center

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

1.1 约定前后端交互接口

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

这里先来约定列表页：

请求使用 GET 路径是 /login

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

  1. {
  3.   userId: 1,
  4.   username: 'zhangsan'.
  5.   password: '123'
  6. }

接下里约定详情页：

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

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

  1. {
  3.   userId: 1,
  4.   username: 'zhangsan'.
  5.   password: '123'
  6. }

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

详情页是重新实现的。

1.2 修改列表页的前段代码

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

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

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

1.3 实现详情页的后端代码

新建一个 AuthorServlet 类。

  1. public class AuthorServlet extends HttpServlet {
  4.     private ObjectMapper objectMapper = new ObjectMapper();
  5.     @Override
  6.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  8.         String blogId = req.getParameter("blogId");
  9.         if (blogId == null) {
  11.             resp.setContentType("text/html; charset=utf8");
  12.             resp.getWriter().write("参数非法，缺少 blogId");
  13.             return;
  14.         }
  15.         // 根据 blogId 查询，Blog 对象
  16.         BlogDao blogDao = new BlogDao();
  17.         Blog blog = blogDao.selectById(Integer.parseInt(blogId));
  18.         if (blog == null) {
  20.             // 博客不存在
  21.             resp.setContentType("text/html; charset=utf8");
  22.             resp.getWriter().write("没有找到指定博客 blogId = " + blogId);
  23.             return;
  24.         }
  25.         // 根据 blog 中的 userId 找到对应的用户信息
  26.         UserDao userDao = new UserDao();
  27.         User author = userDao.selectById(blog.getUserId());
  28.         String repJson = objectMapper.writeValueAsString(author);
  29.         resp.setContentType("application/json; charset=utf8");
  30.         resp.getWriter().write(repJson);
  31.     }
  32. }

1.4 实现详情页的前端代码

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

  1. // 显示用户信息
  2.  function getAuthor() {
  4.     $.ajax({
  6.         type: 'get',
  7.         url: 'author',
  8.         success: function(body) {
  10.             // 把 username 设置到界面上
  11.             let h3 = document.querySelector('.container-left .card h3');
  12.             h3.innerHTML = body.username;
  13.         }
  14.     });
  15. }
  17. 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 类。

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

2.3 修改前端代码

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读