个人简易博客系统设计

（该文为个人论文转述，前端部分及有部分省略以及修改，可做参考）

摘要

博客是网络信息时代的“个人文摘” ，通常也被称为网络日志，是一个可以发布 各种博客文章并进行管理的网站。随着时代的发展，各种技术层出不穷，人们对编写以及阅读博客的需求也越来越旺盛，因此，很多网站上提供了个人博客系统。但是在这些众多的博客系统中，都需要用户进行大量的环境配置以及复杂的系统搭建，费时费力且学习成本较高，并且有些博客系统在功能上也有所欠缺或冗余。由此，设计和实现了一个个人博客系统。
首先对系统进行了需求分 析并根据需求分析进行了总体设计。系统根据设计分为前台和后台两个部分。在前台部分，用户可以进行博客浏览，发布留言和评论，并对博客进行查询等操作。在后台部分，用户可以进行博客的文章管理，用户管理以及博客留言与评论的管理等操作。其中系统的重点模块包括用户模块、文章模块、留言评论模块以及博客查询管理模块。接着详细阐述了系统关键模块的实现过程，展示了关键功能的实现逻辑和处理流程。
经过测试和试运行表明，系统界面布局设计简洁，功能丰富合理，用户使用方便，并且对系统的学习成本低，同时系统具有轻量型、易部署、稳定性高的特点，非常适合个人用于编写和发布博客。

第一章 绪论

1.1 课题背景

由于网络技术的发展十分迅速，越来越多的人们将获取信息的方式转变为依靠网络获取，网络信息化已经深入到人们平常的生活和学习之中。越来越多的人渴望在网络上获取更多的信息和资源来充实自己，同时渴望 能够将自己生活中的见闻以及感想通过网络分享给他人。因此，博客可以作为信息传递和交流的平台便应运而生并且得到了飞速发展。一个常规的博客往往包含了文章、图片、留言和评论等功能，也有的博客会包含网站的链接以及其它与主题相关的内容。用户可以浏览别人的博客去寻找自己感兴趣的信息，同时也可以编写自己的博客并发布供他人阅读。在博客平台上还可以给作者留言，并针对文章进行评论，发表自己的看法和建议，从而实现了作者与浏览者之间直接的沟通、交流与相互学习。通过博客这种方式，不仅仅可以浏览到自己感兴趣的内容还可以将自己掌握的信息分享给别人，同时和他人进行交流与互动。博客这种沟通方式比传统的电子邮件也方便了许多，因此越来越多的家庭、公司和部门使用博客进行沟通。博客已经发展成为社会网络媒体重要的一部分。

当前，我国的市场经济发展已高度繁荣，人们的生活水平也大有提高，越来越多的人直接通过购买的方式使用一些大型网站提供的博客系统，比如wordpress，pivotx，PJ-Blog，fcontex，EMLOG 等。这些大型的博客系统功能丰富，稳定性高，知名度也高。但是有些系统比较笨重，需要动手搭建，并且配置较复杂，学习成本太高，并不太符合所有人的理想期望。甚至它们已经不再符合互联网推崇个性发展的理念。因此，很多人希望能拥有自己的个人博客系统，并且具有页面交互设计良好、数据存储简单、系统框架轻量级以及学习成本较低等特点。

--------由此本文便设计了基于SpringBoot框架的个人博客系统。

1.2 目的和意义及发展

博客是由英文翻译过来的词，它最开始的时候是由Web和log两个独立的英文单词合并成一个单独的词，即Weblog
。因此也可以直接被翻译成网络日记，后来随着时间的推移，Weblog被一些人拼读成分开的we和blog 两个单词，因而久而久之，blog
这个词便给广泛的接受并用来替代Weblog ，成为一个新的词，可以翻译为中文的“网络日志”。

·起源阶段（1990年代末）

最早的博客形式出现在1997年左右，一些网页作者开始使用简单的HTML页面发布自己的想法和链接。

1999年，Pyra Labs推出了Blogger平台，使得普通人也能轻松创建和维护自己的博客。

快速发展阶段（2000年代初）

随着互联网普及和技术进步，博客迅速流行起来。

WordPress、TypePad、Movable Type 等博客平台相继出现，推动了博客文化的广泛传播。

在中国的兴起（2005年前后）

新浪博客、搜狐博客、网易博客、QQ空间等平台兴起。

许多知名作家、学者、媒体人纷纷开通博客，形成了“全民写作”的热潮。

演变与转型（2010年后至今）

微博、微信公众号、短视频平台等新媒体形式崛起，传统博客逐渐式微。

但在技术圈、学术圈、写作爱好者群体中，博客依然保持影响力，成为知识分享和思想	沉淀的重要工具。

博客是一种新的不同地区的人在网络平台上进行相互交流和沟通的方式，在它出现以前主要有BBS、Email和ICQ三种网络交流方式，因此人们认为博客本身具有社群群组的特性，通过博客，网络上的所有网友都可以被集结成为一个更大的博客，因此，博客显然已经成为自由媒体中的一个具有非常强大魅力和影响力的平台。

人们往往通过博客来记载自己平时生活中发生的事情和一些自己感兴趣的信息或者掌握的知识，将自己的生活和信息分享给他人，并且还可以通过六度分割理论认识更多的志同道合、互相欣赏的人生挚友；而且随着更多的关于不同专业领域的技术博客的涌现，也标志着博客包含了巨大的信息价值：不同的博客发布不同领域的内容，收集和整理不同领域的信息从而成为可以让更多人关注的专业技术博客。随着博客的使用人数的不断增多，博客作为一种新的生活方式、新的工作方式和新的学习方式已经被更多的人所认可和使用。博客已经在悄悄的影响着传统的网络结 构以及社会结构。

网络信息的真假性不再是难以检验的，人与人之间也可以进行更明确的选择和方向去交流与沟通，个人的思想与见解和众人的智慧的相互作用也变得越来越有意义，每个人都可以实现发表自己文章的梦想，博客对我们的工作和生活正在产生重 大的作用和改变。

当前，由于国民经济水平的提高，网络技术的蓬勃发展，人们在自己的精神境界上也有了更高层面的需求。于是，更多的人会热衷于浏览网页，在网络上阅读和学习更多的知识。同时也有很多人喜欢记录和分享这些信息。所以就促进了博客系统的发展。

同时伴随着各种技术的快速发展，人们也都非常热衷于搭建自己的个人博客。作为一名非软件行业的人来说搭建个人的博客看起来非常困难，然而市面上已经流行了各种各样的开源博客系统，可以让那些对网站建设毫无任何基础的用户轻松搭建。

通过将先进的技术应用于系统的开发中来，不仅仅是对先进技术的学习实践也保证了系统生命力的持久，还能提升系统的各项性能。本系统的设计与实现将为用户提供界面美观，操作简易的用户体验，方便快捷的编写文章并发布。系统中的文章编辑功能强大，可以编辑普通文本也可以使用美观。

通过博客这种全新的表达和沟通的方式可以传递巨大的信息，比如精粹的学科 知识、 先进的智慧和思想。在一定程度上来讲，博客的产生以及繁荣的发展，使得 网络的知识价值得到真正的体现，并体现了时代的繁荣景象，这是一种新的 文化现象，标志着互联网信息技术的发展开始进入更高的阶段。

1.3 技术介绍

1.3.1 spingboot

SpringBoot是由Pivotal
团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发者能够快速地创建独立的、生产级别的基于Spring框架的应用程序。SpringBoot专注于开箱即用，但也可以根据需要进行调整。

创建独立的Spring 应用：

Spring Boot 提供了一种快速创建、部署独立运行的 Spring 应用的方法。通过使用Spring Boot，开发者可以轻松地将应用打包成一个可执行的 JAR 文件，并且这个JAR文件可以直接运行在一个Java虚拟机上。

嵌入式的Tomcat, Jetty或Undertow：

Spring Boot 默认提供了嵌入式的Tomcat作为HTTP服务器，同时也支持Jetty和Undertow。这意味着你无需部署WAR文件到外部的Servlet容器中。

提供依赖启动器（starter）简化构建配置：

SpringBoot 为不同的技术栈提供了许多“启动器”依赖，这些启动器帮助开发者自动配置所需的库，减少了手动添加依赖项和配置的工作量。

尽可能自动配置Spring和第三方库：

SpringBoot尝试自动配置应用程序，以适应特定的需求环境。例如，如果 HSQLDB 在类路径上，并且没有配置任何数据库连接，则 Spring Boot 自动配置内存中的数据库。

无代码生成和XML配置：

SpringBoot基于注解配置，几乎不需要编写XML配置，大大简化了配置工作。

生产就绪功能：

包括指标，健康检查和外部化配置等，使得SpringBoot非常适合用于生产环境的应用程序开发。

与Spring生态圈无缝集成：

无论是Spring Cloud、Spring Data还是Spring Security，SpringBoot都能很好地与其他Spring项目集成，提供了强大的生态系统支持。

1.3.2 Mybatis

MyBatis 是一个优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC
代码和手动设置参数以及获取结果集的过程。它可以使用简单的 XML 或注解用于配置原始映射，将接口和 Java 的 POJOs（Plain
Old Java Objects）映射成数据库中的记录。 而且MyBatis 它简化了 Java
应用程序与数据库之间的交互。MyBatis 提供了一种简单而灵活的方式将 SQL 语句映射到 Java 方法中，并且支持动态 SQL
生成和存储过程调用。与传统的 JDBC 编程相比，使用 MyBatis 可以减少大量的样板代码（boilerplate code），并且使得
SQL 语句的管理和维护更加方便。

SQL 映射:

MyBatis 的核心功能是将 SQL 查询与 Java 方法进行映射。通过 XML 文件或注解的方式定义 SQL 语句，并将其绑定到特定的 Java 接口方法上。这允许开发者直接执行查询、插入、更新和删除操作。

动态 SQL:

 支持动态构建 SQL 语句，可以根据不同的条件生成不同的 SQL 语句。这对于需要根据用户输入或其他运行时信息来调整查询的应用程序非常有用。

对象关系映射(ORM):

尽管 MyBatis 不是一个完全的 ORM 框架，但它提供了简单而强大的机制将数据库表行与 Java 对象进行映射。你可以灵活地控制如何映射列到对象属性，包括复杂的数据类型和集合。

缓存机制:

MyBatis 提供了一级缓存（在 SqlSession 层面）和二级缓存（跨 SqlSession）。这些缓存可以显著提高应用程序的性能，尤其是在读密集型应用中。

事务管理:

MyBatis 可以与 Spring 等框架集成实现声明式事务管理，也可以自己编程方式管理事务。

兼容性:

MyBatis 兼容多种数据库，如 MySQL、Oracle、PostgreSQL 等，使得它成为一种通用的解决方案，适用于各种不同的数据库环境。

插件支持:

MyBatis 提供了插件机制，允许开发者在已有的基础上扩展更多功能，比如分页、日志记录等。

1.3.3 html

HTML（HyperText Markup
Language，超文本标记语言）是用于创建网页的标准标记语言。它不是编程语言，而是一种结构化文档的标记语言，允许作者通过标签（tags）、属性（attributes）和文本内容来描述网页的内容和布局。

HTML5 引入了新的语义化标签，如 <header>、<footer>、<article> 和 <section> 等，这些标签使得网页结构更加清晰，有助于搜索引擎优化（SEO）和辅助技术的使用。

多媒体支持：

通过 <audio> 和 <video> 标签，HTML5 支持直接在网页中嵌入音频和视频内容，无需依赖第三方插件如 Flash。

图形与绘图能力：

Canvas 元素和 Scalable Vector Graphics (SVG) 提供了强大的绘图功能，允许开发者创建动态图形和动画效果。

本地存储：

HTML5 引入了 Web Storage（包括 localStorage 和 sessionStorage），提供了比 cookies 更强大、更灵活的数据存储机制，允许网页在客户端存储数据。

离线Web应用：

通过 Application Cache，HTML5 支持开发能够在用户离线时运行的Web应用程序。

地理定位：

HTML5 提供了对地理定位的支持，使得基于位置的服务可以直接利用浏览器获取用户的地理位置信息。

拖放功能：

原生支持拖放操作，简化了跨元素或页面区域间的数据传输过程。

表单增强：

新增多种输入类型，如日期选择器、颜色选择器等，以及表单验证属性，减少了对JavaScript脚本的依赖。

WebSocket：

提供全双工通信通道，允许服务器主动向客户端推送数据，极大地改善了实时性应用的表现，如在线游戏、即时通讯等。

跨文档消息传递：

允许不同源的网页之间安全地交换信息，增强了网页间的互动性。

1.3.4jQuery库

jQuery 是一个快速、小巧且功能丰富的 JavaScript
库。它的设计目的是简化HTML文档遍历、事件处理、动画以及Ajax交互，从而使得开发者能够更加轻松地编写交互式的Web应用程序。自2006年由John
Resig发布以来，jQuery已经成为最流行的JavaScript库之一，被广泛应用于各种规模的Web项目中。

主要特点

简洁性：

jQuery提供了简洁明了的语法，减少了编写代码的工作量。例如，选择页面元素、操作DOM、绑定事件等操作都变得异常简单。

跨浏览器兼容性：

抽象了不同浏览器之间的差异，确保了在不同浏览器（如Chrome、Firefox、Safari、IE等）中的行为一致性。

链式调用：

支持方法链式调用，可以连续执行多个操作而不需要重复选择元素，使代码更紧凑易读。

强大的插件支持：

拥有庞大的社区支持和丰富的插件资源，可以方便地扩展其功能。

轻量级：

尽管功能强大，但jQuery的核心文件体积非常小，加载速度快，不会给网页带来过多负担。

核心功能

DOM 操作：

通过简单的语法来选取和操作页面上的元素，比如$()函数用于选择元素，.html(), .text(), .val()等方法用于获取或设置内容值。

事件处理：

提供了一种统一的方式为页面元素添加事件监听器，如.click(), .hover(), .submit()等，简化了原生JavaScript中复杂的事件注册流程。

特效与动画：

可以轻松创建视觉效果，如淡入淡出、滑动显示隐藏、自定义动画等，极大地增强了用户体验。

Ajax 支持：

简化了异步通信的过程，允许在不重新加载整个页面的情况下更新部分页面内容。常用的有$.ajax(), $.get(), $.post()等方法。

插件机制：

开发者可以根据自己的需求开发插件，也可以使用现有的数千个插件来扩展jQuery的功能，如日期选择器、表格排序等。

1.3.5 SpringMVC

Spring MVC 是 Spring
框架的一部分，专注于为Web应用提供模型-视图-控制器（MVC）架构的支持。它允许开发者创建灵活、松耦合的Web应用程序，并且提供了多种特性来简化Web开发过程。Spring
MVC 作为Java EE社区中非常受欢迎的一个框架，支持RESTful
Web服务，具有高度可配置性，并与Spring框架的其他模块无缝集成。

主要特点

清晰的角色划分：

遵循MVC设计模式，将应用程序分为模型(Model)、视图(View)和控制器(Controller)，各部分职责明确。

灵活性与可扩展性：

Spring MVC 允许开发者根据项目需求自定义各个组件的行为，如视图解析器、异常处理器等。

强大的注解支持：

通过注解简化了配置流程，例如使用 @Controller, @RequestMapping, @RequestParam 等注解可以大大减少XML配置文件的数量。

易于测试：

由于其分层架构，使得单元测试和集成测试变得更加容易执行。

与Spring生态系统深度集成：

能够与其他Spring项目如Spring Security、Spring Data等无缝协作，增强应用程序的安全性和数据处理能力。

RESTful支持：

内置对构建RESTful Web服务的强大支持，包括JSON/XML格式的数据绑定。

核心组件

DispatcherServlet：

前端控制器，负责接收所有的HTTP请求并将其分发给相应的处理器。

HandlerMapping：

用于映射请求到具体的处理器。

ModelAndView：

封装了模型数据以及逻辑视图名称的对象。

ViewResolver：

解析逻辑视图名到实际的视图实现。

Controller：

处理具体业务逻辑的地方，每个请求都会被分配给一个特定的控制器方法。

Interceptors：

拦截器，可以在请求到达控制器之前或之后执行某些操作，比如权限检查、日志记录等。

第二章 分析与开发环境选择

2.1 系统需求分析

按照软件开发的正常规范，在系统开发之前需要对系统进行需求分析，目的是为了确定按照软件开发的正常规范，在系统开发之前需要对系统进行详细的需求分析。对于本系统——一个个人博客平台而言，需求分析是整个软件开发生命周期中不可或缺的重要阶段。其主要目的是明确用户（即博客作者）在使用该系统时所期望实现的功能与非功能需求，确定系统的整体目标和核心功能模块，从而为后续的设计、开发、测试及维护工作提供坚实的基础和清晰的方向。

在需求分析阶段，考虑撰写并发布文章、管理评论、分类整理内容、设置个性化页面等。同时，还需要思考到基本浏览体验，如文章阅读、搜索功能等。将这些需求进行归纳整理，并形成《需求规格说明书》（SRS），确保每项需求都具备完整性、准确性、清晰性和可验证性，避免出现模糊不清、前后矛盾或难以实现的问题。

通过对系统的全面分析，我们可以将整个博客系统划分为多个功能模块，包括但不限于：

用户管理模块：

注册、登录、权限控制、个人信息维护；

文章管理模块：

撰写、编辑、删除、分类、标签管理；

内容展示模块：

首页展示、归档查看、文章详情页；

评论互动模块：

用户留言、评论审核与回复；

后台管理模块：

数据统计、日志记录、站点配置等；

安全与性能模块：

防止恶意攻击、数据备份、访问速度优化等。

这种模块化的分解不仅有助于提高开发效率，还能增强系统的可维护性、扩展性以及用户体验。此外，良好的需求分析还有助于识别潜在的技术难点和风险点，提前制定应对策略，降低项目失败的可能性。
综上所述，针对个人博客系统的需求分析不仅是开发工作的起点，更是确保项目顺利推进、最终交付高质量产品的重要保障。只有在明确了“系统要做什么”之后，才能更好地规划“如何去做”，从而确保系统在功能、性能和用户体验方面都能满足用户的预期，实现一个稳定、高效、易于维护的个人博客平台。

系统将要实现的目标，给系统的设计与实现提供必要的基础。

2.1.1 系统目标

本文的目标是设计与实现一个使用了先进的网站开发技术，具有通达的体系 结构、极易对系统进行相关功能的扩充和后期的系统维护，并且视觉美观，交互友好的个人博客系统。该系统为用户提供一个分享和学习的网络平台。通过这个 平台，用户可以发布自己的人生感悟、知识学习等博客并可以浏览别人的分享， 也可以作为自己的记事本，记录自己的心里历程，成长经过。同时也可以对别人 分享的博客进行评论和留言以及回复，让每个人都可以自由的交流并表达更多的想法。

2.1.2 功能性需求分析

根据传统的个人博客系统的特点，一个博客系统的主要功能应该包括：博客注册与登录、博客页面展示、编辑博客页面、博客总览页面以及后台功能管理等。

如图下图功能性需求分析图。

2.2 系统流程分析

如图上图流程分析图所示：

我们从前端的login.html中获取到数据后，经过控制层——》服务层——》数据持久层，最后才作用到我们的数据库上。

在现代 Web 开发中，通常采用 分层架构设计来组织代码结构，提高系统的可维护性、扩展性和安全性。一个标准的三层架构如下：

控制层	Controller Layer	控制器层接收前端请求，调用业务逻辑，返回响应结果

服务层	Service Layer业务逻辑层处理核心业务逻辑，如验证、计算、权限判断等

数据持久层DAO / Repository Layer	数据访问层	负责与数据库交互，执行增删改查操作。

此外，前端页面（如 login.html）属于 视图层（View），负责用户界面展示和数据输入。

2.2.1 用户请求处理流程

先由用户通过浏览器发起请求（如访问文章列表、提交评论）。Controller层接收请求，解析参数（如
@PathVariable、@RequestBody），再校验参数合法性（如非空校验、格式校验），然后调用 Service
层方法处理业务逻辑，最后将 Service 返回结果封装为 HTTP 响应（HTML 页面或 JSON 数据）。

2.2.2 业务逻辑处理流程（Service层）

在Service层执行业务逻辑（如查询文章、验证用户权限，对涉及多表操作（如发布文章+关联标签）使用
@Transactional。确保插入文章和更新标签的原子性。

Service异常处理：

捕获并处理异常（如数据库异常、业务逻辑错误）。使用 try-catch 包裹 Mapper 操作，抛出自定义异常（如 BusinessException）。

也可以作为日志记录：

记录关键操作日志（如用户登录、文章修改）。

2.2.3 数据持久化流程（Mapper层）

SQL 映射：

通过 XML 或注解定义 SQL 语句，实现增删改查。

动态 SQL：

支持条件查询、分页、排序。

结果映射：

将数据库查询结果自动映射到 Java 对象（如 List<Article>）。

使用 resultMap 定义复杂字段映射（如多表关联）。

SQL 注入防护：

使用 #{} 占位符防止 SQL 注入攻击，避免直接拼接字符串（如 #{id} 而非 ${id}）。

2.2.4 数据库交互流程（MySQL）

执行 SQL 语句，存储或检索数据（如文章内容、用户信息）。

索引优化：

对高频查询字段（如 username, article_title）创建索引，提升查询性能，减少全表扫描。

分页与排序：

支持 LIMIT 和 ORDER BY 实现分页和排序功能。

2.3 系统模块设计

2.3.1 个人登入与注册模块

用户在博客页面进行浏览时不需要判定其身份，当注册用户登录到个人中心
后需要对个人信息、博客文章以及留言评论进行管理的时候则需要对其进行身份判定。

用户在注册系统时候需要设置用户名和密码。用户名在前端部分会进行长度和格式的校验。密码框有两个输入框，第二个为确认密码框，目的是为了防止用户的误操作，避免用户因为不小心输错了某个字符而不知造成的密码不对无法登录的情况。
两次密码是否相同的校验也是在前端部分进行判断。当前端校验成功之后向后台发送注册请求并进行查重，防止此用户名被再次注册而导致数据库数据错误。

当用户已经注册成功后可以直接点击注册成功的提示框中的确定按钮而直接进入到博客系统。或者由于进行需要登录信息的操作而弹出的登录框进行输入账号密码登录。在登录的过程中，前端部分依然会对用户名的合法性进行校验，用来减少对服务器的请求，防止输入不合法的用户名还对后台服务器进行无用的请求。
前端校验通过后，向服务器发起登录的请求，服务器接收到前台传递过来的用户名和密码后就会查询数据库信息，如果用户名为已注册用户并和密码匹配 则返回登录成功和标识已登录的 cookie 信息。
如果后台数据库中不存在该用户名则提示用户名不存在，请重新输入或注册。用户登录系统的流程如下图注册登入流程图。

系统会为每个登录成功的用户显示一个默认头像，此时如果用户有自己喜欢的 头像可以对此进行编辑，同时用户还可以修改自己的密码。

2.3.2 个人文章管理模块

文章管理模块的主要功能包括展示文章，发布文章，修改文章和删除文章。其
中展示文章是系统前台功能，不管是登录用户或者游客都可以进行查看。发布，修改以及删除文章的功能针对拥有系统操作权限的注册用户和系统管理员，只有具有操作权限的用户才能保存文章的数据库信息并关联到其对应的用户数据。

博客文章的前台页面展示的是文章的列表形式，每篇文章显示了其标题，创建时间，标签和正文的前50个字。浏览者可以通过点击文章的标题或者每篇文章的列表查看更多的按钮都可以进入文章的详细内容页面，文章的详细内容页面展示了文章的所有信息。如下图文章管理图。

2.4 系统开发环境选择

1.开发语言选型

Java作为完全面向对象的编程语言，具备完善的跨平台特性和丰富的类库支（Swing、JDBC等），能有效降低系统底层的算法设计复杂度。配合IntelliJ IDEA集成开发环境，其智能代码补全、版本控制集成和可视化调试工具显著提升了开发效率，符合快速迭代的开发需求。

2.数据库架构
MySQL关系型数据库采用InnoDB存储引擎，支持ACID事务特性，可确保借阅记录、用户信息等关键数据的完整性和一致性。通过JDBC连接池技术实现高效数据存取，其开源特性与完善的社区支持为系统后期维护提供了技术保障。
3.运行环境配置
（1）硬件配置要求：
处理器：Intel Pentium III及以上多核处理器
内存：2GB DDR4（推荐4GB）
存储：50GB可用磁盘空间（SSD优化）
操作系统：Windows 10 64位专业版
（2）软件环境配置：
开发工具：IntelliJ IDEA 2021.3（内置Maven项目管理）
数据库：MySQL Community Server 8.0.27
运行环境：JDK 11 LTS版本

第三章 实验部分

3.1 数据库

3.1.1 用户表

这段MySQL命令和输出展示了创建一个名为blog_system的数据库，并在其中创建了一个名为userinfo的表的过程。

如下图用户数据表图：

如下图文章数据表图：

3.2 网页

3.2.1登入与注册

注册页代码使用了 jQuery
库来处理一个表单的提交事件。它定义了一个当页面加载完成后执行的函数，该函数绑定了一个事件监听器到ID为#registerForm 的HTML
表单元素上。这个监听器会在用户尝试提交表单时触发，并执行一系列操作来验证和提交数据。

代码优点：

异步提交，避免页面刷新，提升用户体验。前端密码校验，即时验证密码一致性，减少无效请求。错误处理，区分成功与失败状态，并提供用户反馈。

该段 JavaScript代码通过jQuery实现注册表单的异步提交功能，主要流程如下：

1.阻止表单默认提交：

使用 event.preventDefault() 阻止页面刷新。

2.获取表单数据：

提取用户名和两次密码输入的值。

3.密码一致性校验：

若两次密码不一致，弹窗提示并终止流程。

4.AJAX 请求：

将表单数据发送至后端接口 /user/reg。

5.响应处理：

成功：根据返回状态码跳转页面或提示注册结果。
失败：捕获异常并提示服务器错误。

代码判断：

$(document).ready(function() {
    $('#registerForm').on('submit',
    function(event) {
        event.preventDefault(); // 阻止默认的表单提交
        var username = $('#username').val();
        var password1 = $('#password1').val();
        var password2 = $('#password2').val();

        if (password1 !== password2) {
            alert("两次输入的密码不一致");
            return;
        }
        $.ajax({
            url: "user/reg",
            method: "post",
            data: {
                username: username,
                password1: password1,
                password2: password2,
            },
            success: function(result) {
                if (result.status == "200") {
                    alert("恭喜注册成功");
                    location.href = "/login.html";
                } else {
                    alert("注册失败：" + result.msg);
                    console.log(result.msg);
                    location.href = "/reg.html"; // 如果有需要可以保留这一行
                }
            },
            error: function(xhr, status, error) {
                alert("服务器错误，请稍后再试");
                console.error(error); // 输出详细错误信息
            }
        });
    });
});

登入页的代码和注册页的代码类似相近

3,2,2 编辑页

定义了一个简单的博客编辑页面，允许用户撰写和发布Markdown格式的博客文章。文档类型声明为HTML5。

如下图页面展示图：

设置了字符编码为UTF-8，确保支持各种语言字符。 X-UA-Compatible标签用于兼容Internet
Explorer的不同版本。viewport元标签使页面适应移动设备屏幕大小。 引入了jQuery和Editor.md库。
jQuery是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。

下面是使用Editor.md库用于初始化一个Markdown编辑器和定义一个提交函数的代码片段:

var editor;
function initEdit(md) {
editor = editormd("editorDiv", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: md,
        path: "editor.md/lib/",
        saveHTMLToTextarea: true
    });
}
initEdit("# 在这里写下一篇博客");
function mysub() {
    alert(editor.getValue());
    editor.setValue("#123")

3.2.3博客总览页

定义了一个博客列表页面，用户可以在这里浏览已发布的博客文章。

JavaScript 逻辑：

loadBlogArticles(page)：这个函数负责根据给定的页码加载博客文章。它使用fetch API从data/blog_articles.json获取数据，然后根据当前页码和每页的文章数量筛选出要显示的文章，并将它们渲染到页面上。

updatePaginationButtons()：

更新分页按钮的状态，确保当前页按钮处于激活状态，并计算总页数。

window.onload：

页面加载完成后自动调用loadBlogArticles(1)，即加载第一页的博客文章。

3.3 SpringBoot

3.3.1 springboot应用程序入口点

package com;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DrdemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DrdemoApplication.class, args);
    }
}

一个典型的Spring Boot应用程序的入口点。

@SpringBootApplication注解，简化了Spring Boot应用的配置，并包含了以下三个核心功能：

@Configuration：

表示该类是一个配置类，可以定义和注册Spring Bean。

@EnableAutoConfiguration：

启用Spring Boot的自动配置机制，根据类路径中的依赖自动配置Spring应用。

@ComponentScan：

自动扫描并注册带有@Component、@Service、@Repository等注解的类为Spring Bean。

3.3.2 Mybatis框架配置

<?xml version="1.0" encoding="UTF-8" ?> “-//mybatis.org//DTD Config 3.0//EN”
“http://mybatis.org/dtd/mybatis-3-config.dtd”> 声明了XML文件的版本和编码格式，并指定了使用的文档类型定义（DTD）。这确保了文件遵循MyBatis 3.0的配置规范。

environments：

定义了多个环境配置，默认使用development环境。

environment：

每个环境配置由一个<environment>元素表示，具有唯一的id属性。这里只定义了一个名为development的环境。

transactionManager：

配置了事务管理器，类型为JDBC，这意味着MyBatis将使用JDBC的事务管理机制。

dataSource：

配置了数据源，类型为POOLED，即使用连接池来管理数据库连接。连接池可以提高性能，因为它避免了每次请求时创建和销毁连接的开销。

property：

定义了连接数据库所需的属性，包括驱动类、URL、用户名和密码。请注意，这些值目前是空的，你需要根据你的数据库配置填写正确的信息。

<configuration>
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="" />
                <property name="url" value="" />
                <property name="username" value="" />
                <property name="password" value=""/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <mapper resource="mapper/UserMapper.xml"></mapper>
    </mappers>
</configuration>

3.3.3 Maven配置

mysql 数据库驱动依赖

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.25</version>
    </dependency>

mybatis依赖：

MyBatis框架的核心库，用于ORM（对象关系映射）。版本为3.5.6。建议使用spring-boot-starter-mybatis来集成MyBatis和Spring Boot。

spring-boot-starter-actuator：

提供了监控和管理功能，可以查看应用程序的健康状态、性能指标等。

spring-boot-starter-webflux：

提供了构建响应式Web应用的支持，基于Reactor和Netty。如果你不打算使用WebFlux，可以考虑移除这个依赖。

spring-boot-starter-web-services：

提供了构建Web服务（如SOAP）的支持。如果你不需要Web服务，可以考虑移除这个依赖。

reactor-test：

提供了测试Reactive编程的支持，范围为test。

<dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.6</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web-services</artifactId>
        </dependency>
        <dependency>
            <groupId>io.projectreactor</groupId>
            <artifactId>reactor-test</artifactId>
            <scope>test</scope>
        </dependency>

3.3.4 其他配置

定义了一个名为UserInfo的Java类

package com.model;
public class UserInfo {
    private int id;
    private String username;
    private String password;
    private String photo;
    private String caeatetime;
    private int state;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getPhoto() {
        return photo;
    }
    public void setPhoto(String photo) {
        this.photo = photo;
    }
    public String getCaeatetime() {
        return caeatetime;
    }
    public void setCaeatetime(String caeatetime) {
        this.caeatetime = caeatetime;
    }
    public int getState() {
        return state;
    }
    public void setState(int state) {
        this.state = state;
    }

定义了一个名为UserController的Spring
MVC控制器，用于处理用户的注册和登录请求。它依赖于UserService服务层来执行具体的业务逻辑，并使用AjaxResult类来封装响应结果。

下面是注册和登入控制的代码演示：

public class UserController {
    @Autowired
    public UserService userService;
    @RequestMapping("/reg")
    public Object reg(String username, String password1, String password2) {
        HashMap<String, Object> result = new HashMap<>();
        if (!StringUtils.hasLength(username) || !StringUtils.hasLength(password1) || !StringUtils.hasLength(password2)) {
            return AjaxResult.fail("你输入的参数有误，请重新输入！");
        } else {
            if (!password1.equals(password2)) {
                return AjaxResult.fail("前后密码不一致，请重新输入！");
            } else {
                UserInfo userInfo = new UserInfo();
                userInfo.setUsername(username);
                userInfo.setPassword(password1);
                int ret = userService.reg(userInfo);
                if (ret != 1) {
                    return AjaxResult.fail("数据库添加用户失败，请稍后再试！");
                } else {
                    return AjaxResult.success("恭喜，注册成功！", ret);
                }
            }
        }
    }
    @RequestMapping("/login")
    public Object login(String username, String password) {
        HashMap<String, Object> result = new HashMap<>();
        if (!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
            return AjaxResult.fail("你输入的参数有误，请重新输入！");
        } else {
            UserInfo userInfo = userService.selectByUsername(username);
            if (userInfo == null || !password.equals(userInfo.getPassword())) {
                return AjaxResult.fail("你当前的用户名或密码错误，请重新输入！");
            } else {
                return AjaxResult.success("恭喜，登录成功！", "");
            }
        }
    }
}

3.3.5 服务层

实现了一个简单的用户服务类，负责处理用户注册和查询的功能。

如下图服务层代码图：

@Service：

将该类标记为一个服务层组件，使得Spring容器可以自动检测并管理该类的生命周期。通常用于处理业务逻辑。

调用UserMapper中的selectByUsername方法，根据用户名查询用户信息。
返回一个UserInfo对象，如果找到匹配的用户，则返回该用户的详细信息；如果没有找到，则返回null。

3.3.6 AjaxResult类

定义了一个名为AjaxResult的工具类，位于包com.common中。该类用于封装HTTP响应的结果，特别是在RESTful API中返回JSON格式的响应。它提供了两个静态方法：success和fail，分别用于构建成功和失败的响应。

msg：

消息内容，通常是一个字符串，描述操作的成功信息。

data：

返回的数据，可以是任意对象，通常是查询结果或操作后的数据。

返回值：

返回一个HashMap对象，包含三个键值对：

“status”：

状态码，固定为200，表示成功。

“msg”：

消息内容。

“data”：

返回的数据。

如下图AjaxResult类：

msg：

消息内容，通常是一个字符串，描述操作的失败原因。

返回值：

返回一个HashMap对象，包含三个键值对：

“status”：

状态码，固定为-1，表示失败。

“msg”：

消息内容。

“data”：

默认为空字符串""，表示没有额外的数据返回。

3.3.7 ResponseAdvice的类

定义了一个名为ResponseAdvice的类，位于包com.common中。该类实现了Spring
MVC的ResponseBodyAdvice接口，并重写了supports和beforeBodyWrite方法，用于统一控制层（Controller）返回的数据格式。通过这种方式，可以确保所有API响应都遵循一致的结构，通常是一个包含状态码、消息和数据的JSON对象。

如下图ResponseAdvice类图：

3.3.8 拦截器

Spring Boot应用的配置类，它实现了WebMvcConfigurer接口来定制Spring MVC的功能。具体来说，这个配置类用于注册一个拦截器（LoginInterception），该拦截器会对进入应用程序的HTTP请求进行预处理和后处理。

如下图注册拦截器代码图：

@Configuration 注解:

该注解表明这是一个配置类，Spring会自动扫描并加载带有此注解的类作为配置的一部分。

ApplicationConfig 类:

这个类实现了WebMvcConfigurer接口，允许你自定义Spring MVC的配置，而无需扩展WebMvcConfigurerAdapter（在较新的Spring版本中WebMvcConfigurerAdapter已被标记为过时）。

@Autowired 登录拦截器:

loginInterception是通过依赖注入的方式被引入的，这意味着Spring容器会自动将一个LoginInterception类型的bean实例注入到这个属性中。LoginInterception应该是一个实现了HandlerInterceptor接口的类，用来拦截请求以执行登录检查或其他逻辑。

addInterceptors 方法:

重写了WebMvcConfigurer接口中的addInterceptors方法，用于添加自定义的拦截器。

registry.addInterceptor(loginInterception)：

将loginInterception拦截器添加到拦截器链中。

.addPathPatterns(“/**”)：

指定了拦截器要应用于所有路径的请求。

.excludePathPatterns(…)：

列出了不需要拦截的路径模式，例如登录、注册页面以及静态资源（如JavaScript、CSS、图片等）。这些路径将不会被loginInterception拦截器处理，用户可以直接访问这些资源或执行相关操作（如登录和注册）。

定义了一个名为LoginInterception的拦截器类，位于包com.common中。该类实现了Spring
MVC的HandlerInterceptor接口，并重写了preHandle方法，用于在请求到达控制器之前进行用户登录状态的检查。

如下图拦截器2图：

preHandle方法：

该方法在控制器方法执行之前被调用，用于检查用户的登录状态。

参数：

request：
当前的HTTP请求对象。

response：

当前的HTTP响应对象。

handler：
即将执行的处理器（通常是控制器中的某个方法）。

request.getSession(false)：

尝试获取当前请求的Session对象。如果不存在Session，则返回null，而不是创建一个新的Session。

如果Session存在且其中包含名为"userinfo"的属性（通常表示用户已经登录），则返回true，允许请求继续执行。
如果Session不存在或不包含"userinfo"属性，表示用户未登录。此时，设置HTTP响应的状态码为401（未授权），并返回false，阻止请求继续执行。

3.3.9异常处理

定义了一个全局异常处理类
ExceptionAdvice，它使用了Spring框架的注解来捕获和处理整个应用程序中的未处理异常。

如下图异常处理图：

@ControllerAdvice 注解:

该注解表明这个类是一个控制器增强类，它可以应用于所有的控制器，用来集中处理异常、绑定数据到模型等。通过这种方式，你可以在一个地方统一处理所有控制器抛出的异常，而不需要在每个控制器方法中单独处理。

@ResponseBody 注解:

当一个方法被此注解标记时，表示该方法返回的对象应该被直接写入HTTP响应体中，而不是解析为视图名称。这通常用于创建RESTful Web服务，其中JSON或XML格式的数据直接作为响应内容发送给客户端。

ExceptionAdvice 类:

这个类的作用是作为一个全局异常处理器，当任何控制器中的方法抛出了未被捕获的异常时，Spring会自动调用ExceptionAdvice类中的相应方法来处理这些异常。

@ExceptionHandler(Exception.class) 注解:

该注解用于指定哪个方法应该处理特定类型的异常。在这个例子中，exAdvice方法被标记为处理所有类型继承自Exception的异常。这意味着如果任何控制器抛出了一个未处理的异常（除了Error及其子类），这个方法都会被调用。

exAdvice 方法:

这个方法接受一个Exception对象作为参数，代表发生的异常。

HashMap<String, Object>实例：

用来构建响应信息。

result.put(“status”, -1);：

设置状态码为-1，通常表示发生了错误。

result.put(“msg”,“程序异常：” + e.getMessage());：

将异常的消息放入响应中，以便客户端能够知道发生了什么问题。

result.put(“data”,“”);：

提供了一个空的数据字段，可以用来传递额外的信息给客户端，但在这个例子中它是空的。

最后，这个方法返回包含上述信息的HashMap，由于@ResponseBody的存在，这个HashMap会被转换成JSON格式并作为HTTP响应体发送给客户端。

主键设计

略

前端部分

略

结论

本文基于 Java 语言，采用当前主流的企业级开发技术栈，设计并实现了一个功能完整、结构清晰、易于维护的个人博客系统。整个系统的开发过程遵循了现代软件工程的设计理念和开发规范，从前端展示到后端处理再到数据存储，均采用了成熟稳定的技术方案。 在后端开发方面，选用了 Spring Boot 框架。	

Spring Boot 凭借其自动配置机制、起步依赖管理以及内嵌服务器等特性，极大地简化了 Spring 应用的搭建与部署流程，提高了开发效率。同时，它良好的模块化设计也使得系统的可扩展性和可维护性得到了有效保障。 在数据访问层，采用了 MyBatis 持久层框架。MyBatis 提供了灵活的 SQL 映射机制，既保留了对 SQL 的控制权，又避免了传统 JDBC 编程中繁琐的操作，提升了数据库操作的安全性和执行效率。

通过 MyBatis，实现了系统与数据库之间的高效交互，确保了数据的一致性和完整性。 在前端页面方面，使用了 HTML + CSS + JavaScript 原生技术进行静态页面开发，结合 jQuery 简化了前端与后端的数据交互逻辑。虽然未引入复杂的前端框架（如 Vue.js 或 React），但该组合足以满足本系统的功能需求，并降低了整体架构的复杂度，特别适用于中小型项目或教学类项目开发。

 通过本次开发实践，验证了上述技术栈在构建 Web 应用中的可行性与稳定性，同时也积累了前后端分离架构下的开发经验。系统具备良好的可读性、可维护性及一定的可扩展性，能够作为后续功能升级和系统迁移的基础平台。 

未来，若需进一步提升用户体验和系统性能，可以考虑引入以下优化措施： 引入 Vue.js / React 等现代前端框架，提升界面交互体验； 使用 JWT 实现无状态认证，增强安全性； 集成 Redis 缓存热点数据，提高响应速度； 采用 Spring Security 实现更细粒度的权限控制； 通过 Docker 容器化部署，提升系统的可移植性和部署效率。 

综上所述，本文所设计与实现的博客系统不仅满足了基本的功能需求，也为今后类似项目的开发提供了可行的技术参考和实践经验。 通过本次博客系统的开发实践，我不仅加深了对 Java Web 开发技术的理解，也掌握了从需求分析、系统设计到前后端实现、测试部署的完整开发流程。

整个开发过程让我在多个方面得到了锻炼和提升，具体收获如下： 一、技术能力的提升 熟悉主流后端框架 Spring Boot 掌握了 Spring Boot 的自动配置机制、起步依赖管理及内嵌 Tomcat 的使用； 理解了 MVC 架构的设计思想，并能够熟练使用 @RestController、@RequestMapping、@Service、@Repository 等注解进行模块化开发； 学会了如何构建 RESTful API 接口，为未来开发更复杂的 Web 应用打下基础。

 深入理解 MyBatis 框架 掌握了 MyBatis 的基本使用方法，包括 XML 映射文件的编写、动态 SQL 的构建以及接口绑定方式； 熟悉了数据库连接池（如 Druid）的配置和使用； 提升了对数据库操作的理解，增强了数据持久层的开发能力。 前端基础能力的巩固 使用 HTML、CSS 和 JavaScript 实现了页面的基本结构与样式布局； 结合 jQuery 完成了前后端的数据交互，提高了对 AJAX 请求和 JSON 数据格式的理解； 虽未使用 Vue 或 React 等现代前端框架，但通过原生技术完成了功能需求，增强了对网页运行机制的认识。 
 
 二、软件工程思维的培养 规范化的开发流程 通过前期的需求分析、功能模块划分、数据库建模等步骤，养成了良好的项目规划习惯； 在编码过程中注重代码结构清晰、命名规范、注释齐全，提升了代码可读性和维护性。 分层架构的理解与应用 深刻体会到 MVC 分层架构的优势，掌握了 Controller、Service、Mapper 各层之间的职责划分； 能够按照业务逻辑合理组织代码结构，提高系统的扩展性和复用性。 
 
 版本控制与团队协作意识 使用 Git 进行版本管理，掌握基本的分支合并、冲突解决等技能； 增强了代码提交的规范意识，为今后参与大型项目开发积累了宝贵经验。 三、问题解决能力的提升 在开发过程中遇到了诸如登录验证失败、跨域请求异常、SQL 注入漏洞等问题，通过查阅文档、调试日志、搜索资料等方式逐一解决； 学会了使用 Postman 测试接口、使用 Chrome 开发者工具查看网络请求与响应数据，提升了调试能力； 对常见安全漏洞（如 XSS、CSRF）有了一定认识，并初步了解如何在系统中进行防范。 四、对未来学习的启发 本次开发经历让我认识到自己在前端交互、系统性能优化、安全性控制等方面仍有较大提升空间。未来的学习方向包括：

学习主流前端框架如 Vue.js 或 React，提升前端交互体验； 掌握 Spring Security、JWT 等权限控制机制；
学习使用 Redis 缓存、Nginx 部署、Docker 容器化等进阶技术； 深入理解分布式系统、微服务架构等相关知识。