前言
最近收到不少同学期末作业的需求，都还是JSP的老技术，介于现在很多网上可以找到的JSP现有项目，要么就是很老好几年前的，要么就是搞了一通不仅乱码还各自报错失败的，总之就是资源有限，于是我花了一星期时间从0到1写了有一个新的基于JSP技术的博客平台，直接免费开源提供给大家。
JSP 2025 全新博客项目是一个基于 JSP 技术的开源博客系统，融合多项前沿技术，为用户打造功能全面、体验出色的博客平台。
项目采用 JDK 8、MySQL 8、bootstrap 框架等构建，技术成熟稳定。其结构清晰，src目录下各包各司其职，WebContent存放网页资源，便于开发维护。功能丰富多样，从博客首页的分类文章展示、搜索，到文章详情的点赞收藏；从个人中心的创作、编辑文章，到管理点赞、收藏内容，满足用户多样需求。
富文本组件选用 wangeditor，支持便捷编辑、图片视频上传。启动项目时，按流程配置好环境、克隆项目、设置 IDEA 及数据库信息，创建并配置 Tomcat 服务即可运行。无论是开发者探索技术，还是用户搭建个人博客，该项目都是优质之选。
PS：有需求的同学可后台私信+v
项目开源地址：https://gitee.com/open-yuan/jsp-blog
技术栈
- JSP
- JDK 8
- MySQL 8
- 富文本组件
- html/css/js
- bootstrap 框架
- tomcat 10
项目结构
📦 de-blog
├── 📁 data
│ └── 📁 vscode
├── 📁 db # 数据库脚本
├── 📁 doc
├── 📁 out
├── 📁 src
│ ├── 📁 com
│ │ └── 📁 blog
│ │ ├── 📁 bean # PO对象
│ │ ├── 📁 dao # DAO层
│ │ ├── 📁 filter # 拦截器
│ │ ├── 📁 listener # 监听器
│ │ ├── 📁 servlet # 接口层
│ │ └── 📁 util # 工具类
│ └── 📁 WebContent
│ ├── 📁 common # 公共内容
│ ├── 📁 font # JSP页面
│ ├── 📁 META-INF
│ ├── 📁 static # 静态资源
│ │ ├── 📁 bootstrap
│ │ ├── 📁 css
│ │ ├── 📁 file # 图片、视频上传
│ │ ├── 📁 img # 项目基础图片
│ │ ├── 📁 js
│ │ └── 📁 layui
│ └── 📁 WEB-INF # 项目配置
└── 📄 blog.sql
功能介绍
博客首页
左侧文章分类列表，点击可查看对应分类文章；中间顶部搜索框方便用户查找文章；中间文章列表展示文章信息，点击可查看详情。
文章详情
内容底部提供点赞和收藏功能，用户可对感兴趣文章进行操作。
带图片和视频详情
支持展示包含图片和视频的文章内容，丰富用户阅读体验。
我的博客
展示用户发表的文章列表，方便用户管理个人文章。
我的点赞
呈现用户点赞过的文章列表，方便用户回顾感兴趣内容。
我的收藏
展示用户收藏的文章，便于用户随时查看。
文章创作
提供富文本编辑环境，支持设置标题、标签、封面、摘要和选择分类，方便用户创作文章。
编辑文章
用户可对已有文章进行编辑修改，完善文章内容。
图片和视频内容
支持在文章中插入和展示图片、视频，丰富文章表现形式。
个人信息
用户可编辑个人资料，包括上传头像、修改用户名、昵称、密码和性别等信息。
核心功能介绍
富文本组件
富文本组件采用 wangeditor 实现，提供强大编辑功能，提升用户创作体验，官网地址：https://www.wangeditor.com/
顶部菜单栏
通过设置样式展示，为用户提供格式设置等操作入口。
<div style="border-bottom: 1px solid #e8e8e8;">
<div id="editor-toolbar"></div>
</div>
内容标题+内容编辑区
包含标题输入框和内容编辑区域，方便用户撰写文章。
<div id="editor-container" class="col-lg-9 col-md-12 col-xl-7">
<div id="title-container">
<input id="article-title" placeholder="请输入文章标题（3~50个字）" value="<%= (articleBean != null) ? articleBean.getTitle() : "" %>"/>
</div>
<div id="editor-text-area"></div>
</div>
组件引入和基础信息配置
引入 wangeditor 组件并配置基础信息，包括切换语言、设置占位符、禁止滚动等。
const E = window.wangEditor
const { SlateElement, SlateTransforms, SlateEditor, DomEditor } = wangEditor;
// 切换语言
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
const editorConfig = {
placeholder: '## 记录技术文章 ##',
scroll: false, // 禁止编辑器滚动
MENU_CONF: {},
onChange(editor) {
}
}
图片、视频等配置
配置图片和视频上传参数，如上传地址、文件类型限制、最大文件大小等，并设置插入图片后置操作。
// 上传图片的配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '/upload/article/image',
fieldName: 'file',
maxNumberOfFiles: 1,
// 单个文件的最大体积限制，默认为 2M
maxFileSize: 3 * 1024 * 1024, // 3M
allowedFileTypes: ['image/*'],
// 单个文件上传失败
onFailed(file, res) {
console.log(res)
showToast('图片上传失败')
},
};
// 插入图片后置操作
editorConfig.MENU_CONF['insertImage'] = {
onInsertedImage(imageNode) {
if (imageNode == null) {
return
}
setTimeout(() => {
const imageNodePath = DomEditor.findPath(editor, imageNode);
SlateTransforms.setNodes(editor, {
...imageNode, style: { width: '100%', height: '' }
}, { at: imageNodePath })
}, 100)
},
}
// 上传视频配置
editorConfig.MENU_CONF['uploadVideo'] = {
server: '/upload/article/video',
fieldName: 'file',
maxNumberOfFiles: 1,
// 单个文件的最大体积限制，默认为 2M
maxFileSize: 30 * 1024 * 1024, // 30M
allowedFileTypes: ['video/*'],
// 自定义插入
customInsert(res, insertFn) {
insertFn(res.data.url, '')
},
onFailed(file, res) {
console.log(res)
showToast('视频上传失败')
}
}
创建编辑器，配置默认样式
创建编辑器实例并配置默认样式，包括段落格式、字体等，同时创建工具栏并设置相关配置。
// 默认样式
const jsonContent = [
{
type: 'paragraph',
lineHeight: '1.5',
children: [
{ text: '', fontFamily: '宋体'}
]
},
]
// 先创建 editor
const editor = E.createEditor({
selector: '#editor-text-area',
content: jsonContent,
// html: '',
config: editorConfig
})
// 创建 toolbar
const toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {
excludeKeys: 'fullScreen',
}
})
// 点击空白处 focus 编辑器
document.getElementById('editor-text-area').addEventListener('click', e => {
if (e.target.id === 'editor-text-area') {
editor.blur()
editor.focus(true) // focus 到末尾
}
})
启动流程
准备环境，如 JDK、Tomcat、MySQL 等。
git clone -b master https://gitee.com/open-yuan/jsp-blog.git
项目拉取下来之后使用 IDEA 打开，配置基础环境，如下步骤：
- 配置 JDK
- 配置模块
- 配置 web
- 配置依赖包
- 配置输出制品
- 找到
com.blog.util.DBUtil类，修改 mysql 地址和账户密码，如下：
- 创建一个 Tomcat 服务，选择刚刚的制品
- 配置服务，最后启动，完毕！
PS：有需求的同学可后台私信+v
项目开源地址：https://gitee.com/open-yuan/jsp-blog
