项目简介
项目不在小,会了就行!
本博客项目是基于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操作完成数据库中文章记录的删除。