商城类网站建设方案,网站优秀作品,收费下载网站cms,seo查询什么意思文章目录 1. 显示用户信息1.1 约定前后端交互接口1.2 修改列表页的前段代码1.3 实现详情页的后端代码1.4 实现详情页的前端代码 2. 注销2.1 确定前后端交互接口2.2 实现后端代码2.3 修改前端代码 1. 显示用户信息 此处的用户名是写死的#xff0c;我们希望的是此处是能够动态生… 文章目录 1. 显示用户信息1.1 约定前后端交互接口1.2 修改列表页的前段代码1.3 实现详情页的后端代码1.4 实现详情页的前端代码 2. 注销2.1 确定前后端交互接口2.2 实现后端代码2.3 修改前端代码 1. 显示用户信息 此处的用户名是写死的我们希望的是此处是能够动态生成的。 如果是此时登录的列表页此处显示的是登录用户的信息。 如果此时登录的是详情页此处显示的是该文章的作者信息。
1.1 约定前后端交互接口 由于列表页和详情页显示的信息是不一样的在约定前后端交互接口的时候要分为两种不同的情况。 这里先来约定列表页 请求使用 GET 路径是 /login 响应是 HTTP/1.1 200 OK 它的格式如下 {userId: 1,username: zhangsan.password: 123
}接下里约定详情页 请求使用 GET 路径是 /author?blogId1 响应是 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; charsetutf8);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; charsetutf8);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; charsetutf8);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; charsetutf8);resp.getWriter().write(当前未登录);return;}httpSession.removeAttribute(user);// 跳转到登录页面resp.sendRedirect(blog.in.html);}
}2.3 修改前端代码 在之前写好的前端代码中的 a 标签里加上一个 logout 路径。
a hrefblog.list.html主页/a
a hrefblog.edit.html写博客/a
a hreflogout注销/a主页 和 写博客跳转的就是对应的页面以上代码要在列表页、详情页、编辑页都实现一遍。 只是登录页无注销功能不需要给注销按钮加上一个 logout 路径其他一样。 此时点击按钮就可以实现对应的功能了。
