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

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();@Overrideprotected 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 {@Overrideprotected 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 路径，其他一样。

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