目录
项目简介
模块实现
设计实现数据库相关代码
博客列表页
博客详情页
注册页
登录页
检测登录状态
显示用户信息
退出登录
发布博客
删除博客
统计博客数量
效果展示
部分代码展示
小结：
项目简介
项目中使用了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组织数据。
效果展示
文章来源：https://www.toymoban.com/news/detail-432318.html
部分代码展示
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;charset=utf8");
//获取到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，定位好之后就可以修改了。文章来源地址https://www.toymoban.com/news/detail-432318.html
到了这里，关于基于Java+MySQL+Tomcat+Servlet+Maven+JQuery+jackson+开源Markdown编辑器实现前后端分离个人博客系统的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
