基于Java+MySQL+Tomcat+Servlet+Maven+JQuery+jackson+开源Markdown编辑器实现前后端分离个人博客系统

您所在的位置：网站首页 › java实现查询数据库 › 基于Java+MySQL+Tomcat+Servlet+Maven+JQuery+jackson+开源Markdown编辑器实现前后端分离个人博客系统

基于Java+MySQL+Tomcat+Servlet+Maven+JQuery+jackson+开源Markdown编辑器实现前后端分离个人博客系统

2023-04-18 21:02| 来源: 网络整理| 查看: 265

项目简介

模块实现

设计实现数据库相关代码

博客列表页

博客详情页

注册页

登录页

检测登录状态

显示用户信息

退出登录

发布博客

删除博客

统计博客数量

效果展示

部分代码展示

小结：

项目简介

项目中使用了Java ，MySQL ，Tomcat ，Servlet ，Maven ，JQuery ，jackson，开源MarkDown编辑器这些技术。共有五个页面：注册用户页，登录页，博客列表页，博客详情页，博客编辑页。

所实现的功能有：设计实现数据库相关代码，实现博客列表页，实现博客详情页（按照md渲染），实现注册页，实现登录页，实现检测登录状态。显示用户信息，退出登录，发布博客，删除博客，统计博客数量。

由于源码较多，我放在github上，大家可以查看。diwei00/JavaEE_Study (github.com)https://github.com/diwei00/JavaEE_Study

模块实现设计实现数据库相关代码

设计表，这里涉及两个实体（用户，博客）。一个用户可以拥有多篇博客，一篇博客只能有一个用户与之对应，即用户和博客之间是一对多的关系。

封装数据库相关代码（数据源，连接，释放资源）。封装所有对于博客和用户操作的数据库代码。当我们具体实现各种处理请求计算响应时，就直接使用我们封装的这些方法。

博客列表页

首先我们需要约定前后端交互接口。前端怎样发起请求，后端处理数据怎样将响应返回给前端。然会代码就需要根据我们所约定的前后端交互接口去实现。

前端发起get请求，后端查询数据库中所有博客返回给前端。前端使用js构造相应标签，显示具体内容。

请求：get/blog

响应：HTTP/1.1 200 OK。使用jso格式组织数据。

博客详情页

当我们从博客列表页跳转到博客详情页时，url中添加blogId。在博客详情页我们就可以通过blogId让后端查找到具体博客。由于这里使用的时Makrdown编辑器，数据库存储的也是未经md渲染的数据，当前端获取到后端数据时，需要使用md进行渲染展现给用户。

请求：get/blog

响应：HTTP/1.1 200 OK。使用json格式组织数据。

注册页

通过用户在注册页面上输入的数据，将数据发送到后端。后端将数据构造成user对象，存储在数据库中。注册成功后端重定向到登录页面。

请求：post/enroll

响应：HTTP/1.1 302 重定向。

登录页

通过用户在登录页面输入数据，发送到后端。后端查找数据库，判断用户名和密码，如果匹配失败则提示用户，否则登录成功重定向到博客列表页。

请求：post/login

响应：HTTP/1.1 302 重定向。

检测登录状态

无论在哪一个页面操作都需要先登录，当进入博客列表页，博客详情页，博客编辑页首先会检测是否登录，如果没有登录直接重定向到登录页面。

当用户注册账户且登录成功时，首先会为当前用户创建会话，通过key-val的方式将用户对象存储在HttpSessioon中。创建会话的过程中就会生成当前用户的SessionId通过set-cookie字段设置到客户端，后续操作每个页面都会请求中通过cookie字段都会带上这个SessionId。服务器这边就可以查找会话，看是否存在这个用户对象，来判断用户是否登录。

请求：get/login

响应：HTTP/1.1 200 OK。使用json组织user对象。

显示用户信息

博客列表页显示当前登录的用户，点击博客详情页显示当前这篇文章的作者信息。

当用户登录成功，服务器查找当前用户的会话，进一步查找会话中的user对象。约定如果没查找到返回空的user对象，否则返回当前查找到的用户。前端得到数据后，判断user对象。如果不为空，通过js将username设置到页面中。

请求：get/login

响应：HTTP/1.1 200 OK。使用json组织user对象。

博客详情页中QueryString中是带有当前博客的blogId字段的。前端请求中也带上当前页面的QueryString，后端就可以获取到blogId字段。后端通过blogId就可以查找到具体博客，然后通过博客中的userId属性借助会话就可以查找到具体的user对象。前端得到数据后，就可将username设置到页面中。

请求：get/author

响应：HTTP/1.1 200 OK。使用json组织user对象。

退出登录

退出登录有两种方法，可以直接删除当前用户的会话，也可以删除会话中的user对象。直接删除当前会话没有相应的api，所以我们采用第二种方式。

前端发起请求，后端获取到当前用户的会话。然后删除当前会话中的user对象，重定向到登录页面。当前端再发请求时，后端就会检测登录状态，此时就是未登录状态。

请求：get/logout

响应：HTTP/1.1 302 重定向。

发布博客

前端博客编写完成后，将标题和博客正文通过post请求中的body发送到后端。后端获取到数据后，同时通过会话获取到当前用户对象。然后构造blog对象，将blog对象存入数据库，重定向到博客列表页。

请求：post/blog

响应：HTTP/1.1 302 重定向。

删除博客

在博客详情页进行删除博客操作。前端发起请求带上当前页面中的QueryString，后端就可以得到当前要删除的blogId。

当前登录用户只能删除自己的博客，没有权限删除别人的博客。通过会话获取到当前用户，通过blogId获取到当前博客。判断这篇博客是否属于当前用户，使用blog中的userId属性和user中的userId属性进行判断。如果不属于提示用户，否则删除数据库中对应的博客，重定向到博客列表页。

请求：get/delete

响应：HTTP/1.1 302 重定向。

统计博客数量

博客列表页统计当前列表所有博客数量。前端发起get请求，后端查询数据库统计所有博客数量。将数据返回到前端，前端使用js将数据显示到页面上。

请求：get/count

响应：HTTP/1.1 200 OK。json组织数据。

博客详情页显示的是当前博客的作者，这里只统计当前作者博客数量。前端发起请求带上当前页面中的QueryString，后端就可以得到blogId。通过blogId就可以查找到具体博客，然后通过博客中的userId属性就可以确定这篇博客属于哪个作者。然后查询数据库，统计这个作者有多少篇博客，将数据返回到前端。前端使用js将数据构造到页面中。

请求：post/count

响应：HTTP/1.1 200 OK。json组织数据。

效果展示

部分代码展示 package api; import com.fasterxml.jackson.databind.ObjectMapper; import model.User; import model.UserDao; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; @WebServlet("/login") public class LoginServlet extends HttpServlet { private ObjectMapper objectMapper = new ObjectMapper(); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //实现登录功能 //设置请求编码，告诉servlet按照怎样的格式解析 req.setCharacterEncoding("utf8"); //设置响应类型，告诉客户端按照怎样格式解析 resp.setContentType("application/json;"); //获取到username 和 password String username = req.getParameter("username"); String password = req.getParameter("password"); //判断 if(username == null || "".equals(username) || password == null || "".equals(password)) { //登录失败 String respJson = "{\"message\":\"登录失败！缺少username 或 password字段\"}"; resp.getWriter().write(respJson); return; } //查看数据库，判断密码和用户名是否匹配 UserDao userDao = new UserDao(); User user = userDao.selectByUsername(username); if(user == null) { //用户名错误 String respJson = "{\"message\":\"登录失败! 用户名或密码错误\"}"; resp.getWriter().write(respJson); return; } if(!user.getPassword().equals(password)) { //密码错误 String respJson = "{\"message\":\"登录失败! 用户名或密码错误\"}"; resp.getWriter().write(respJson); return; } //用户验证成功，创建会话，保存当前用户信息 HttpSession session = req.getSession(true); session.setAttribute("user", user); //重定向到博客列表页 resp.sendRedirect("blog_list.html"); } //用户判断用户是否登录 @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("application/json;charset=utf8"); HttpSession session = req.getSession(false); if(session == null) { //用户未登录。返回空的user对象 User user = new User(); String respJson = objectMapper.writeValueAsString(user); resp.getWriter().write(respJson); return; } User user = (User) session.getAttribute("user"); if(user == null) { user = new User(); String respJson = objectMapper.writeValueAsString(user); resp.getWriter().write(respJson); return; } //获取到user对象，直接返回 String respJson = objectMapper.writeValueAsString(user); resp.getWriter().write(respJson); } } 小结：

当我们把后端代码编写完成后，可以使用Postman工具发请求进行验证。当前端代码编写完成后，运行前端和和后端代码。如果出现bug，使用抓包工具Fiddler进行抓包，看请求和响应中的一些数据和body。来判断是前端bug还是后端bug，定位好之后就可以修改了。

【本文地址】

公司简介

联系我们