oh~MyBlog

项目简介

项目不在小,会了就行!

本博客项目是基于JAVA web基本知识实现的一个简易的博客系统,主要功能包括用户登录以及对文章的增删查改的基本操作。

使用技术

Maven:管理依赖打包项目
Mysql:存储业务数据
HTML:制作前端登录页面
Servlet:后台服务资源完成相关业务
Jackson:基于Jackson框架完成对Java对象与前后端约定的Json字符串数据的序列化、反序列化
Tomcat:web项目部署的服务器
Filter:统一会话管理所有登录情况

业务实现

本系统的文章管理操作都是基于用户登录的前提下完成的。

执行流程

在这里插入图片描述

准备工作

设计数据库表

由于本系统比较简易,只涉及到用户和文章,因此只设计了两张表:用户表和文章表
在这里插入图片描述

约定前后端json响应格式

在这里插入图片描述

articleAdd/articleUpdate/articleDelete/articleList等这些接口的请求响应的数据载体都是JSON格式,因此前后端提前约定好,双方交互时就会容易很多。

Filter过滤器

客户端的请求服务端分发交给具体的servlet服务之前,需要进行过滤(Filter线性管理着多个过滤器),请求会挨个进行过滤。

在这里插入图片描述
配置用户统一会话管理的过滤器,匹配所有请求路径(/*)

  • 每次http请求匹配到过滤器路径时,会先执行该过滤器的doFilter()
  • 如果是往后执行,是调用filterChain.doFilter(request,response)
  • 否则自行处理响应

服务端资源

/login不用校验Session,其他都要校验,若不通过,返回401,响应内容自定义

前端资源

/jsp/校验session,session为空则重定向到登录页面
/js/,/static/,/view/ 不需要校验

模板技术

对于重复的事情,让接口们都按照统一的方式进行处理,剩余的部分留给子类自己重写实现。
这里父类实现了doGet和doPost方法,子类只需按照自己的业务逻辑重写process方法即可。
实现了代码复用。
在这里插入图片描述

业务流程

用户尚未登录

页面信息是通过上述filter统一会话管理实现的!此处的访问路径为“blog/”,Filter中判断用户session为空,且访问路径并非以"/jsp"开头,得知用户未曾登录。
在这里插入图片描述
用户未登录,Filter中的判断逻辑:
在这里插入图片描述
输入url,用户访问登录页面
在这里插入图片描述
用户输入用户信息点击“登录”

在登录页面实现过程中,在HTML中引入了js,当用户点击登录后,前端会发起两个js请求,另中一个是Ajax请求。通过Ajax绑定了“表单提交”事件,当用户提交,登录页面加载完成后,会自动携带前端数据发起请求。
Ajax将请求的表单数据序列化为json格式,根据数据解析执行相应内容。Ajax的请求服务路径是“/login”,服务端根据服务路径去找对应的servlet服务处理业务。

在这里插入图片描述
用户点击提交后,都发什么了什么事?

当用户点击提交后,服务端根据Ajax请求中的请求服务路径找到LoginServlet服务,在这里解析得到用户信息,通过JDBC操作连接数据库,验证用户信息的正确。

在这里插入图片描述
如果用户名和密码都与数据库信息匹配上了,返回前端json响应信息,在js中根据json信息判断是否成功,success则跳转到用户的文章列表界面,表明用户登录成功。
在这里插入图片描述
成功登录!
在这里插入图片描述

站在用户的角度以为只是发生简单的页面跳转,实际上前后端进行了多次交互。不然仅是用户点击登录,如何能得到用户个人的文章列表呢?

获取文章列表

前端

当用户点击登录后,前端发起articleList服务请求
在这里插入图片描述
根据后端响应的json数据,展示用户文章列表信息。
在这里插入图片描述
后端
服务端接收到请求,到“articleLis”对应的servlet服务下,从session中获取用户信息。
在这里插入图片描述
通过JDBC连接数据库完成用户个人的文章列表的查询。
在这里插入图片描述
服务端在数据库操作成功后,会向前端返回json响应信息。
在这里插入图片描述
用户登录成功后,后台还悄悄做了一件事:

种session!保存用户信息,相当于通行证!

在这里插入图片描述

接下来就可以对该用户 名下的文章们进行增删改查了!

发表新文章

点击“发表新文章”,打开了新窗口,显示文章详情页,用以用户编辑文章内容。

前端
在用户点击“发表新文章”时,界面发生跳转至“jsp/articleDetail.jsp”文章详情页,并设置type为add。
在这里插入图片描述
详情页请求信息
在这里插入图片描述
根据type信息,在用户点击提交后,发起对articleAdd的服务请求。
在这里插入图片描述
根据服务端返回的json信息,判断是否添加成功,并反馈给用户。

后端
服务端在对应的服务资源下,从session中获取用户信息,通过输入流从请求体中获取完整的请求数据,将json数据反序列化为article对象。进入ArticleDAO.insert(),通过JDBC完成数据库的文章记录插入操作。
在这里插入图片描述
数据库记录插入成功后,服务端按照前后端约定好的json信息格式,编辑好响应信息,将其序列化为json格式,返回给前端。
在这里插入图片描述

修改文章

选中需要修改的文章点击修改,会打开新窗口跳转到文章详情页面。

只能选择一条文章进行修改,并且修改与点击按钮事件绑定,触发点击事件后,会跳转到 jsp/articleDetail.jsp,并添加设置type为“update”。
在这里插入图片描述
修改是在原文章内容的基础上进行的,先请求"articleDetail"服务资源。
在这里插入图片描述
在用户点击提交后,根据type信息,发起post请求,请求“articleUpdate”服务资源。
在这里插入图片描述
在这里插入图片描述
根据后端返回的json信息,判断文章是否更新成功,反馈给用户。
在这里插入图片描述
后端
服务端先根据接收到的"articleDetail"服务请求,解析文章ID,通过JBDC在数据库中查找文章信息,返回给前端,展示该文章的内容信息。

在用户点击提交后,服务端接收到“articleUpdate”服务的请求,将json格式的请求数据反序列化为article类的对象,再通过JDBC完成数据库记录的更新操作。数据库更新成功后,向前端返回json响应信息,告知已更新。

删除文章

用户选中需要删除的文章,点击删除,页面会弹出提示框询问用户是否确认删除。

在这里插入图片描述
前端
用户点击确认后,发起articleDelete的服务资源请求。
在这里插入图片描述
根据后端的json响应信息,判断是否删除成功。后端成功删除了,前端才可以删除该文章展示。
在这里插入图片描述
后端
服务端找到对应的服务资源"articleDelete",解析请求获取文章ID,通过JDBC操作完成数据库中文章记录的删除。
在这里插入图片描述


猜你喜欢

转载自blog.csdn.net/qq_44977025/article/details/115119429