javaweb个人博客项目实现项目文本jsp+servlet+mysql（内置markdown编辑器）

Posted 2022-12-08 Ice丨shine

说在前面

因本人初学javaweb相关知识，所以一些代码难免存在不完善的地方，如有错误，请大家指出。本文是项目文本，详细代码实现在github上https://github.com/Ice-Shine/javaweb-blog。

目录

• 说在前面
• 1.概要设计
• • 1.1框架设计
  • 1.2系统总体设计
  • • 1.2.1 系统主要功能模块
    • 1.2.2 系统主要结构设计
• 1.3 数据库设计
• 2.系统实现
• • 2.1工具类
  • • 2.1.1连接数据库的工具类JDBCUtills
    • 2.1.2 生成验证码的工具类VerifyCode
  • 2.2 模块实现举例
  • • 2.2.1 用户注册
    • 2.2.2 用户评论
    • 2.2.3 文章列表分页读取和搜索功能
    • 2.2.4 后台修改文章功能
    • 2.2.5 后台删除功能
  • 2.3 系统实现结果
  • • 2.3.1 首页及文章页面
    • 2.3.2 登录注册页面
    • 2.3.3后台管理界面
• 3 总结
• • 3.1 本系统的特点
  • 3.2 遇到的问题和解决方案
  • 3.3 目前存在的问题及优化方向

1.概要设计

本文主要讲述了基于javaweb的个人博客的设计和实现过程：主要包括概要设计和主要功能的实现。主要角色大致有用户和管理员，其中跟用户相关的模块包括用户信息模块、评论模块和搜索模块等，跟管理员相关的模块包括登录、用户管理、文章管理、评论管理、用户管理等。在本系统的开发中用到的主要工具是IntelliJ IDEA、Tomcat和mysql,开发语言为JAVA，主要框架是bootstrap。最后讲了目前系统存在的问题以及进一步优化的方向。

该个人博客让各个用户都可以在该平台上发布文章和管理自己的信息以及对文章进行评论。管理员可以管理文章、管理用户评论和管理用户。

1.1框架设计

本项目采用了三层架构设计，即把各个功能模块划分为表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）三层架构，各层之间采用接口相互访问。在本项目中数据访问层指开发中常见的Dao层。负责对数据库的访问，实现对各个表的增加、删除、修改、查询的操作。具体为业务逻辑层提供数据服务。业务逻辑层指Service层。主要是对数据业务逻辑进行处理。处于表现层和数据访问层的中间，它被表现层调用，它调用数据访问层，在数据交换中起到了承上启下的作用。表现层指web层，主要功能为接受用户的请求和显示返回的数据，为用户提供交互式操作的界面。

1.2系统总体设计

1.2.1 系统主要功能模块

主要模块按人员分类（如下图）可分为用户、管理员和游客，其中游客为无登录状态时的身份。
用户主要功能模块如下：
用户评论：登录后用户可以在文章下方进行评论。
查看文章：用户可以查看文章。
修改用户信息：用户可以在修改信息页面进行信息修改。
管理员主要功能模块如下：
管理文章：管理员可以在后台页面进行文章管理，包括添加文章、删除文章和修改文章。
管理用户：管理员可以在后台页面删除用户。
管理评论：管理员可以查看某一个文章下的评论并进行删除操作。
查看文章和评论：同用户权限。

1.2.2 系统主要结构设计

系统界面分为前台用户界面和后台管理界面，前台用户界面需要实现登录注册、查看文章、搜索文章和评论的功能。其中评论功能需要在登录后使用。后台管理界面需要在管理员登录后才能进入，普通用户登录需要进行拦截。后台界面需要实现用户管理（即用户删除功能）、文章管理（即文章的添加、删除和修改）、文章评论管理（即文章下的评论删除）等功能。

1.3 数据库设计

本系统用到了三张表，分别是user表，article表和review表，数据库使用的是mysql,各表的详细情况如下：
1.用户user表（如表 1）：主要记录用户的信息。
2.文章article表（如表 2）：主要记录文章的信息和内容，其中user_id与user表的id外键连接。
3.评论review表（如表 3）：主要记录评论的信息和内容，其中article_id与article表的article_id外键连接，user_id与user表的id外键连接。
表1

列名	含义	类型
id	主键	int 非空自增长
username	用户名称	varchar(32) 非空
password	密码	varchar(32) 非空
user_email	邮箱	varchar(30)
user_realname	真实姓名	varchar(20)
user_phone	手机号码	varchar(20)
user_sex	性别	varchar(20)
user_bir	生日	date
admin	是否是管理员	tinyint

表2

列名	含义	类型
article_id	主键	int 非空自增长
user_id	用户名id i	nt 非空
article_title	文章标题	text 非空
article_context	文章内容	longtext 非空
article_date	创作日期	date
article_ind	文章简介	text

表3

列名	含义	类型
id	主键	int 非空自增长
article_id	文章id	int
user_id	用户id	int
review_context	评论内容	text
review_date	评论日期	date

2.系统实现

2.1工具类

2.1.1连接数据库的工具类JDBCUtills

本项目采用的连接池是druid连接池，本工具类的作用是读取连接池所需的配置文件，并且获取连接池对象和获取连接(如图 2 1)。这个工具类降低了项目中的重复编码，在dao层可以调用这个类直接获取连接，然后写入sql语句访问数据库。

2.1.2 生成验证码的工具类VerifyCode

VerifyCode用于生成验证码
1.字符随机
在一个字符串序列中随机挑选四个字母用于验证。
2.字体随机
在字符串数组“宋体”, “华文楷体”, “黑体”, “微软雅黑”, “楷体_GB2312” 中随机选择一种字体。使用产生随机数并选择这个数在数组中的位置上的字体代表被选出的字体。样式和字号也随机产生。
3.颜色随机
通过红绿蓝三原色的随机取值使颜色随机生成。
4.画干扰线
通过Graphics2D中的drawLine()方法在随机生成的两个坐标之间划线，降低机器答对验证码的概率。
5.通过IO流将图片输出到页面上并返回随机出的字符以便验证

2.2 模块实现举例

2.2.1 用户注册

用户在注册页面按照要求正确填写注册信息即可成功注册。每个输入框在失去焦点以后都会进行正则判断是否合法（用ajax实现），点击注册后如果上述验证都合法则会跳转至registerServlet进行注册操作。在该servlet中先进行验证码的判断，如果正确则调用userservice中的addUser()方法将注册的用户信息存入数据库

2.2.2 用户评论

在文章页面提交评论后将会把当前文章的article_id和当前登录用户的username一并提交给servlet,后端先检验登录状态，如果没登录则跳转至登录界面并提示“请先登录”。如果已经登录了就将页面信息封装成一个Review_User对象然后调用service和dao将评论储存进数据库中。

2.2.3 文章列表分页读取和搜索功能

点击文章列表按钮后会进入findArticleByPageServlet，先读取当前页码currentPage和每页显示条数rows,如果没有限定数据则分别赋值1和10。此时会读取word查看是否有关键词进行搜索。并将上述三个参数传入ArticleListService中的findArticleByPage()进行分页查询如有搜索关键词word则利用word在数据库中进行模糊搜索，将查询到的信息封装成pagebean传给页面显示，如果搜索到的信息条数为0则将“没有查询到文章”传递给前端显示。之后，在前端用foreach方法遍历pagebean中的list进行输出显示。

2.2.4 后台修改文章功能

后台点击修改文章按钮后读取User的信息并显示在修改文章页面的下拉框内，这个做法可以防止空白输入的出现减少了错误。同时通过article_id找到该文章封装成一个Article对象并回显到页面上方便修改。本项目添加、修改文章功能都嵌入了editor.md编辑器，可以在该编辑器中完成修改格式，添加代码块等的操作。在文章页面使用其内置的editormd.markdownTohtml()方法即可将md格式的文本转换成HTML文本并显示在前端页面上，在编辑页面也可以实时查看html的样式。点击修改后将本页各种数据传递给数据库进行修改即完成了修改功能。
editor.md编辑器具体实现如下：
由其官网下载资源并导入项目中，在前端需要使用编辑器的地方写一个textarea，再在相同页面写一个使用ajax写一个js，让editor.md可以正常显示出来，并且可以在这个js中修改属性。之后在要显示的前端界面，即文章界面加入一个md转html的函数，并在其中自定义转换规则即可正常显示。

2.2.5 后台删除功能

在后台删除文章的时候，因为有外键级联的关系，所以需要先调用函数删除该文章下的所有评论，再删除文章。在删除用户的时候也是同理，需要先删除用户所写的文章和评论之后才能删除用户。

2.3 系统实现结果

2.3.1 首页及文章页面

博客首页（如图 2-8）、文章列表（如图 2-9）和文章页面都有导航栏、搜索栏和登录注册按钮。游客进入博客首页后将会看到博主信息，点击文章列表会进入文章列表页面。文章列表中的每一条文章记录都有文章标题、文章简介。点击文章标题可以进入相应的文章界面（如图 2-10）。文章界面有文章标题、作者和创作时间，下方有评论区。需要登录才能进行评论。如果未登录则会直接跳转至登录界面并提示“请先登录”。搜索功能进行模糊搜索，若没有搜到则会提示“没有查询到文章”（如图 2-11）。
2-8

2-9

2-10

2-11

2.3.2 登录注册页面

登录页面（如图 2-12）分为普通用户登录和管理员登录，若勾选管理员则会进行管理员身份验证，通过后会跳转至后台管理界面。不勾选则会普通用户验证。注册页面进行表单验证，符合注册条件的才予以通过，若不符合条件则会将文本框加红提示。

2.3.3后台管理界面

后台管理员界面分为文章管理和用户名管理，如果无管理员权限输入地址进入后台则会被拦截至登录界面。在用户名管理界面可以删除用户，在文章管理界面可以修改、删除和增加文章，并对文章评论进行管理。其中对文章内容的操作使用markdown编辑器（如图 2-15），让文章格式更加美观。
2-15

3 总结

3.1 本系统的特点

本系统基于javaweb的技术打造，属于较为基础的搭建内容。搭建该系统主要在于巩固所学知识，并尝试从网上获取技术信息。前端部分使用了bootstrap框架，创建了导航条轮播图等控件，让页码更加美观。后端引入了editor.md编辑器，让个人博客的编辑操作更舒服，并且相比于自带的textarea有更多功能并且方便排版。
本系统在功能方面，已经完善了一个个人博客应该具备的基本功能，如用户的注册登录，对文章的评论，还有管理员对各个文章及用户的管理等等。文章也实现了储存在数据库中并读出显示的功能。但依然有很大的优化空间，如：评论表情和点赞功能，用户自定义头像功能等等。这些功能将会在未来进行优化。

3.2 遇到的问题和解决方案

1.在开始从数据库导入文章的时候文章无格式，杂乱无章。
解决方法：通过将文本中的“\\r\\n”换成"
"，将空格换成" "等解决了这个问题。但因为后来又出现了其他格式问题，所以引入editor.md编辑器来完美解决了这个问题。
2.建立搜索功能后发现当搜索关键词为空时会直接报错500.
解决方法：修改了currentPage的逻辑关系，让输入为空的时候currentPage不会为负数。

3.3 目前存在的问题及优化方向

1.文章编辑模块中只能输入用户的id，无法直接输入用户的名称，导致需要切到用户管理界面使管理员体验较差。优化方向：再输入的同时就进行异步查找改变下拉框的内容显示用户名称。
2.文章页面和文章列表页面CSS元素过少，页面显得比较单调。优化方向：加入一些小动画的控件来优化页面。
3. editor.md编辑器部分暂不支持图片上传。优化方向：优化图片上传，将图片上传至服务器下的静态资源中，并将图片路径保存在数据库中，前端使用时直接调用路径
4.用户评论只能使用文字。优化方向：追加点赞和表情功能，扩大数据库的内容。
5.用户不能够自己添加和修改文章，也不能修改和删除自己的评论，加大了管理员的工作量。优化方向：将添加文章功能开放给用户，并增加用户修改文章页面，通过列表的形式显示该用户的文章并可以让用户进行修改。