尧图网站建设 
1. 项目概述这个前后端分离的个人博客系统是我最近完成的一个练手项目主要目的是实践Spring Boot全栈开发和自动化测试流程。系统采用了经典的三层架构前端使用HTMLCSSJavaScript实现页面交互后端基于Spring Boot框架开发数据库选用MySQL存储数据最终部署在云服务器上。作为一个轻量级的博客系统它实现了最基础的博客管理功能用户登录/注销博客文章的增删改查文章列表分页展示文章详情查看虽然功能相对简单但完整实现了从开发到测试再到部署的全流程。特别在测试环节我重点实践了自动化测试方案包括功能测试、接口测试和性能测试确保系统质量的同时也提升了测试效率。2. 技术架构设计2.1 前端架构前端采用传统的HTMLCSSJavaScript技术栈没有使用任何前端框架主要考虑点是项目规模较小引入框架会增加复杂度纯原生实现更有利于理解浏览器工作原理减少依赖部署更简单页面结构设计为四个核心视图登录页处理用户认证列表页展示文章概要详情页显示完整文章内容编辑页支持文章创建和修改2.2 后端架构后端基于Spring Boot构建主要技术选型如下技术组件版本用途说明Spring Boot2.7.0基础框架Spring Security5.7.1认证授权MyBatis2.2.2ORM框架MySQL8.0.29数据存储Lombok1.18.24简化代码分层架构设计com.example.blog ├── config # 配置类 ├── controller # 控制器层 ├── service # 业务逻辑层 ├── mapper # 数据访问层 ├── entity # 实体类 └── util # 工具类2.3 数据库设计数据库仅包含两张核心表用户表(blog_user)CREATE TABLE blog_user ( id int NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL, password varchar(100) NOT NULL, avatar varchar(255) DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;文章表(blog_post)CREATE TABLE blog_post ( id int NOT NULL AUTO_INCREMENT, title varchar(100) NOT NULL, content text NOT NULL, author_id int NOT NULL, create_time datetime NOT NULL, update_time datetime NOT NULL, PRIMARY KEY (id), KEY author_id (author_id), CONSTRAINT blog_post_ibfk_1 FOREIGN KEY (author_id) REFERENCES blog_user (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3. 核心功能实现3.1 用户认证模块系统采用基于Session的认证方式主要流程用户提交用户名密码后端校验凭证有效性创建Session并返回认证成功响应前端存储Session ID用于后续请求关键代码实现PostMapping(/login) public Result login(RequestBody LoginDTO dto, HttpSession session) { User user userService.getByUsername(dto.getUsername()); if(user null || !passwordEncoder.matches(dto.getPassword(), user.getPassword())) { return Result.fail(用户名或密码错误); } session.setAttribute(user, user); return Result.ok(); }注意实际项目中应该使用更安全的认证方案如JWTHTTPS。这里为了简化实现使用了Session认证。3.2 博客管理模块文章管理实现了基本的CRUD操作新增文章PostMapping(/posts) public Result addPost(RequestBody PostDTO dto, HttpSession session) { User user (User) session.getAttribute(user); if(user null) { return Result.fail(请先登录); } Post post new Post(); post.setTitle(dto.getTitle()); post.setContent(dto.getContent()); post.setAuthorId(user.getId()); post.setCreateTime(LocalDateTime.now()); post.setUpdateTime(LocalDateTime.now()); postMapper.insert(post); return Result.ok(post); }分页查询GetMapping(/posts) public Result listPosts( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { PageHelper.startPage(page, size); ListPostVO posts postMapper.selectWithAuthor(); PageInfoPostVO pageInfo new PageInfo(posts); return Result.ok(pageInfo); }4. 自动化测试实践4.1 功能测试方案采用Selenium 4 JUnit 5组合实现Web自动化测试主要特点页面对象模式每个页面封装为独立测试类参数化测试支持多账号登录验证智能等待隐式等待确保元素加载测试套件统一执行所有测试用例测试类结构src/test/java ├── common │ └── AutoTestUtils.java # 公共工具类 ├── tests │ ├── BlogLoginTest.java # 登录页测试 │ ├── BlogListTest.java # 列表页测试 │ ├── BlogEditTest.java # 编辑页测试 │ └── BlogDetailTest.java # 详情页测试 └── runSuite.java # 测试套件典型测试用例示例Test Order(2) public void testLoginSuccess() { driver.findElement(By.id(username)).sendKeys(zhangsan); driver.findElement(By.id(password)).sendKeys(123456); driver.findElement(By.id(login-btn)).click(); // 验证跳转到列表页 String currentUrl driver.getCurrentUrl(); assertTrue(currentUrl.contains(list.html)); // 验证用户信息显示 String username driver.findElement(By.className(user-name)).getText(); assertEquals(张三, username); }4.2 接口自动化测试使用RestAssured JUnit 5实现接口测试关键设计全局Token管理登录后自动传递token统一请求工具封装GET/POST请求方法多环境配置支持测试/生产环境切换Allure报告生成可视化测试报告接口测试示例Test Order(1) public void testLoginSuccess() { MapString, String params new HashMap(); params.put(username, zhangsan); params.put(password, 123456); Response response RequestUtil.post(/api/login, params); assertEquals(200, response.getStatusCode()); String token response.jsonPath().getString(data.token); YamlUtil.writeToken(token); // 保存token供后续使用 }4.3 性能测试实施使用JMeter进行压力测试主要场景登录接口模拟多用户并发登录博客发布测试文章创建性能列表查询验证分页查询效率测试配置参数线程组100并发用户持续时间5分钟响应超时3秒断言规则响应码200响应时间1s性能测试结果分析聚合报告 - 样本数3250 - 平均响应时间428ms - 吞吐量10.8/sec - 错误率0.12%5. 部署与运维5.1 服务器环境准备系统部署在1核2G的云服务器上环境配置如下基础环境CentOS 7.6JDK 11MySQL 8.0Nginx 1.20部署目录结构/opt/blog ├── app # Spring Boot jar包 ├── conf # 配置文件 ├── logs # 日志文件 └── web # 前端静态资源5.2 应用部署脚本使用Shell脚本简化部署流程启动脚本(start.sh)#!/bin/bash # 启动MySQL systemctl start mysqld # 启动后端应用 nohup java -jar /opt/blog/app/blog-api.jar \ --spring.profiles.activeprod \ /opt/blog/logs/application.log 21 # 启动Nginx systemctl start nginx健康检查脚本(healthcheck.sh)#!/bin/bash # 检查MySQL状态 mysql_status$(systemctl is-active mysqld) if [ $mysql_status ! active ]; then echo MySQL is not running! exit 1 fi # 检查应用进程 if ! pgrep -f blog-api.jar /dev/null; then echo Application is not running! exit 1 fi # 检查端口监听 if ! netstat -tulnp | grep :8080 /dev/null; then echo Application port is not listening! exit 1 fi echo All services are running normally exit 06. 经验总结与优化建议6.1 项目亮点完整的自动化测试体系从功能测试到接口测试再到性能测试建立了全方位的质量保障清晰的代码结构严格遵循分层架构模块职责单一高效的部署方案使用脚本实现一键部署降低运维成本详细的文档记录测试用例、部署步骤等均有完整文档6.2 待改进点用户系统不完善缺少注册、密码找回等功能前端交互较简单没有使用现代前端框架体验有待提升安全性不足缺乏XSS防护、CSRF防御等安全措施性能瓶颈高并发场景下数据库连接成为瓶颈6.3 优化方向引入缓存使用Redis缓存热点数据减轻数据库压力前端重构采用Vue/React框架提升交互体验安全加固增加输入校验、防注入等安全措施微服务化将单体应用拆分为微服务提高可扩展性这个项目虽然功能简单但完整走完了从开发到测试再到部署的全流程让我对Spring Boot全栈开发有了更深入的理解。特别是在自动化测试方面积累了不少实战经验这对保证项目质量至关重要。后续计划在此基础上继续迭代将其发展为一个功能更完善的博客平台。 Spring Boot全栈开发个人博客系统实践
1. 项目概述这个前后端分离的个人博客系统是我最近完成的一个练手项目主要目的是实践Spring Boot全栈开发和自动化测试流程。系统采用了经典的三层架构前端使用HTMLCSSJavaScript实现页面交互后端基于Spring Boot框架开发数据库选用MySQL存储数据最终部署在云服务器上。作为一个轻量级的博客系统它实现了最基础的博客管理功能用户登录/注销博客文章的增删改查文章列表分页展示文章详情查看虽然功能相对简单但完整实现了从开发到测试再到部署的全流程。特别在测试环节我重点实践了自动化测试方案包括功能测试、接口测试和性能测试确保系统质量的同时也提升了测试效率。2. 技术架构设计2.1 前端架构前端采用传统的HTMLCSSJavaScript技术栈没有使用任何前端框架主要考虑点是项目规模较小引入框架会增加复杂度纯原生实现更有利于理解浏览器工作原理减少依赖部署更简单页面结构设计为四个核心视图登录页处理用户认证列表页展示文章概要详情页显示完整文章内容编辑页支持文章创建和修改2.2 后端架构后端基于Spring Boot构建主要技术选型如下技术组件版本用途说明Spring Boot2.7.0基础框架Spring Security5.7.1认证授权MyBatis2.2.2ORM框架MySQL8.0.29数据存储Lombok1.18.24简化代码分层架构设计com.example.blog ├── config # 配置类 ├── controller # 控制器层 ├── service # 业务逻辑层 ├── mapper # 数据访问层 ├── entity # 实体类 └── util # 工具类2.3 数据库设计数据库仅包含两张核心表用户表(blog_user)CREATE TABLE blog_user ( id int NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL, password varchar(100) NOT NULL, avatar varchar(255) DEFAULT NULL, PRIMARY KEY (id), UNIQUE KEY username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;文章表(blog_post)CREATE TABLE blog_post ( id int NOT NULL AUTO_INCREMENT, title varchar(100) NOT NULL, content text NOT NULL, author_id int NOT NULL, create_time datetime NOT NULL, update_time datetime NOT NULL, PRIMARY KEY (id), KEY author_id (author_id), CONSTRAINT blog_post_ibfk_1 FOREIGN KEY (author_id) REFERENCES blog_user (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3. 核心功能实现3.1 用户认证模块系统采用基于Session的认证方式主要流程用户提交用户名密码后端校验凭证有效性创建Session并返回认证成功响应前端存储Session ID用于后续请求关键代码实现PostMapping(/login) public Result login(RequestBody LoginDTO dto, HttpSession session) { User user userService.getByUsername(dto.getUsername()); if(user null || !passwordEncoder.matches(dto.getPassword(), user.getPassword())) { return Result.fail(用户名或密码错误); } session.setAttribute(user, user); return Result.ok(); }注意实际项目中应该使用更安全的认证方案如JWTHTTPS。这里为了简化实现使用了Session认证。3.2 博客管理模块文章管理实现了基本的CRUD操作新增文章PostMapping(/posts) public Result addPost(RequestBody PostDTO dto, HttpSession session) { User user (User) session.getAttribute(user); if(user null) { return Result.fail(请先登录); } Post post new Post(); post.setTitle(dto.getTitle()); post.setContent(dto.getContent()); post.setAuthorId(user.getId()); post.setCreateTime(LocalDateTime.now()); post.setUpdateTime(LocalDateTime.now()); postMapper.insert(post); return Result.ok(post); }分页查询GetMapping(/posts) public Result listPosts( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { PageHelper.startPage(page, size); ListPostVO posts postMapper.selectWithAuthor(); PageInfoPostVO pageInfo new PageInfo(posts); return Result.ok(pageInfo); }4. 自动化测试实践4.1 功能测试方案采用Selenium 4 JUnit 5组合实现Web自动化测试主要特点页面对象模式每个页面封装为独立测试类参数化测试支持多账号登录验证智能等待隐式等待确保元素加载测试套件统一执行所有测试用例测试类结构src/test/java ├── common │ └── AutoTestUtils.java # 公共工具类 ├── tests │ ├── BlogLoginTest.java # 登录页测试 │ ├── BlogListTest.java # 列表页测试 │ ├── BlogEditTest.java # 编辑页测试 │ └── BlogDetailTest.java # 详情页测试 └── runSuite.java # 测试套件典型测试用例示例Test Order(2) public void testLoginSuccess() { driver.findElement(By.id(username)).sendKeys(zhangsan); driver.findElement(By.id(password)).sendKeys(123456); driver.findElement(By.id(login-btn)).click(); // 验证跳转到列表页 String currentUrl driver.getCurrentUrl(); assertTrue(currentUrl.contains(list.html)); // 验证用户信息显示 String username driver.findElement(By.className(user-name)).getText(); assertEquals(张三, username); }4.2 接口自动化测试使用RestAssured JUnit 5实现接口测试关键设计全局Token管理登录后自动传递token统一请求工具封装GET/POST请求方法多环境配置支持测试/生产环境切换Allure报告生成可视化测试报告接口测试示例Test Order(1) public void testLoginSuccess() { MapString, String params new HashMap(); params.put(username, zhangsan); params.put(password, 123456); Response response RequestUtil.post(/api/login, params); assertEquals(200, response.getStatusCode()); String token response.jsonPath().getString(data.token); YamlUtil.writeToken(token); // 保存token供后续使用 }4.3 性能测试实施使用JMeter进行压力测试主要场景登录接口模拟多用户并发登录博客发布测试文章创建性能列表查询验证分页查询效率测试配置参数线程组100并发用户持续时间5分钟响应超时3秒断言规则响应码200响应时间1s性能测试结果分析聚合报告 - 样本数3250 - 平均响应时间428ms - 吞吐量10.8/sec - 错误率0.12%5. 部署与运维5.1 服务器环境准备系统部署在1核2G的云服务器上环境配置如下基础环境CentOS 7.6JDK 11MySQL 8.0Nginx 1.20部署目录结构/opt/blog ├── app # Spring Boot jar包 ├── conf # 配置文件 ├── logs # 日志文件 └── web # 前端静态资源5.2 应用部署脚本使用Shell脚本简化部署流程启动脚本(start.sh)#!/bin/bash # 启动MySQL systemctl start mysqld # 启动后端应用 nohup java -jar /opt/blog/app/blog-api.jar \ --spring.profiles.activeprod \ /opt/blog/logs/application.log 21 # 启动Nginx systemctl start nginx健康检查脚本(healthcheck.sh)#!/bin/bash # 检查MySQL状态 mysql_status$(systemctl is-active mysqld) if [ $mysql_status ! active ]; then echo MySQL is not running! exit 1 fi # 检查应用进程 if ! pgrep -f blog-api.jar /dev/null; then echo Application is not running! exit 1 fi # 检查端口监听 if ! netstat -tulnp | grep :8080 /dev/null; then echo Application port is not listening! exit 1 fi echo All services are running normally exit 06. 经验总结与优化建议6.1 项目亮点完整的自动化测试体系从功能测试到接口测试再到性能测试建立了全方位的质量保障清晰的代码结构严格遵循分层架构模块职责单一高效的部署方案使用脚本实现一键部署降低运维成本详细的文档记录测试用例、部署步骤等均有完整文档6.2 待改进点用户系统不完善缺少注册、密码找回等功能前端交互较简单没有使用现代前端框架体验有待提升安全性不足缺乏XSS防护、CSRF防御等安全措施性能瓶颈高并发场景下数据库连接成为瓶颈6.3 优化方向引入缓存使用Redis缓存热点数据减轻数据库压力前端重构采用Vue/React框架提升交互体验安全加固增加输入校验、防注入等安全措施微服务化将单体应用拆分为微服务提高可扩展性这个项目虽然功能简单但完整走完了从开发到测试再到部署的全流程让我对Spring Boot全栈开发有了更深入的理解。特别是在自动化测试方面积累了不少实战经验这对保证项目质量至关重要。后续计划在此基础上继续迭代将其发展为一个功能更完善的博客平台。