2025全新JSP简约博客平台-免费开源

前言

最近收到不少同学期末作业的需求，都还是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 打开，配置基础环境，如下步骤：

1. 配置 JDK

2. 配置模块

3. 配置 web

4. 配置依赖包

5. 配置输出制品

6. 找到 com.blog.util.DBUtil类，修改 mysql 地址和账户密码，如下：

7. 创建一个 Tomcat 服务，选择刚刚的制品

8. 配置服务，最后启动，完毕！

PS：有需求的同学可后台私信+v

项目开源地址：https://gitee.com/open-yuan/jsp-blog