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

目录

项目简介

模块实现

设计实现数据库相关代码

博客列表页

博客详情页

注册页

登录页

检测登录状态

显示用户信息

退出登录

发布博客

删除博客

统计博客数量

效果展示

部分代码展示

小结：

---

项目简介

    项目中使用了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;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，定位好之后就可以修改了。