news 2026/5/1 10:56:55

手把手教你用 Spring Boot + Vue 搭建个人博客系统(后端篇)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
手把手教你用 Spring Boot + Vue 搭建个人博客系统(后端篇)

视频看了几百小时还迷糊?关注我,几分钟让你秒懂!


一、为什么要做这个项目?

很多刚入门 Java 的小伙伴在学完 Spring Boot 基础后,常常不知道如何实战。而“个人博客系统”是一个非常经典又实用的小型全栈项目:

  • 功能清晰:文章发布、分类、评论等模块明确;
  • 技术全面:涵盖 RESTful API、数据库操作、前后端分离等核心技能;
  • 可扩展性强:后续可加登录鉴权、Markdown 编辑器、图片上传等功能。

今天我们就先聚焦后端部分,用Spring Boot + MyBatis + MySQL搭建一个简洁但完整的博客 API 接口服务。


二、需求场景

假设你是博主小明,想搭建一个自己的技术博客网站,需要以下基本功能:

  1. 发布/编辑/删除文章;
  2. 查看所有文章列表(带分页);
  3. 根据文章 ID 查看详情;
  4. 文章按分类(如“Java”、“前端”、“生活”)归类。

注意:本文只实现后端接口,前端 Vue 部分我们后续再讲。


三、技术选型

技术作用
Spring Boot 3.x快速构建 Web 应用
MyBatis-Plus简化数据库 CRUD 操作
MySQL 8.0存储文章和分类数据
Lombok自动生成 getter/setter/toString
Hutool(可选)工具类库,简化开发

四、数据库设计

-- 博客分类表 CREATE TABLE blog_category ( id BIGINT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL UNIQUE COMMENT '分类名称' ); -- 博客文章表 CREATE TABLE blog_post ( id BIGINT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(200) NOT NULL, content TEXT NOT NULL, category_id BIGINT NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, FOREIGN KEY (category_id) REFERENCES blog_category(id) );

五、Spring Boot 后端代码实现

1. 创建 Spring Boot 项目(使用 Spring Initializr)

依赖选择:

  • Spring Web
  • MyBatis Framework
  • MySQL Driver
  • Lombok

2.application.yml配置

spring: datasource: url: jdbc:mysql://localhost:3306/blog_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: map-underscore-to-camel-case: true global-config: db-config: id-type: auto

3. 实体类

// Category.java @Data @TableName("blog_category") public class Category { @TableId(type = IdType.AUTO) private Long id; private String name; } // Post.java @Data @TableName("blog_post") public class Post { @TableId(type = IdType.AUTO) private Long id; private String title; private String content; private Long categoryId; private LocalDateTime createTime; private LocalDateTime updateTime; // 用于返回时携带分类名称(非数据库字段) @TableField(exist = false) private String categoryName; }

4. Mapper 层

@Mapper public interface CategoryMapper extends BaseMapper<Category> {} @Mapper public interface PostMapper extends BaseMapper<Post> {}

5. Service 层

@Service public class PostService { @Autowired private PostMapper postMapper; @Autowired private CategoryMapper categoryMapper; public List<Post> getAllPosts() { List<Post> posts = postMapper.selectList(null); // 补充分类名称 for (Post post : posts) { Category category = categoryMapper.selectById(post.getCategoryId()); if (category != null) { post.setCategoryName(category.getName()); } } return posts; } public Post getPostById(Long id) { Post post = postMapper.selectById(id); if (post != null) { Category category = categoryMapper.selectById(post.getCategoryId()); post.setCategoryName(category != null ? category.getName() : "未知"); } return post; } public boolean savePost(Post post) { return postMapper.insert(post) > 0; } public boolean updatePost(Post post) { return postMapper.updateById(post) > 0; } public boolean deletePost(Long id) { return postMapper.deleteById(id) > 0; } }

6. Controller 层(RESTful API)

@RestController @RequestMapping("/api/posts") public class PostController { @Autowired private PostService postService; @GetMapping public ResponseEntity<List<Post>> listAll() { return ResponseEntity.ok(postService.getAllPosts()); } @GetMapping("/{id}") public ResponseEntity<Post> getById(@PathVariable Long id) { Post post = postService.getPostById(id); if (post == null) { return ResponseEntity.notFound().build(); } return ResponseEntity.ok(post); } @PostMapping public ResponseEntity<String> create(@RequestBody Post post) { if (postService.savePost(post)) { return ResponseEntity.ok("文章创建成功"); } return ResponseEntity.badRequest().body("创建失败"); } @PutMapping("/{id}") public ResponseEntity<String> update(@PathVariable Long id, @RequestBody Post post) { post.setId(id); if (postService.updatePost(post)) { return ResponseEntity.ok("更新成功"); } return ResponseEntity.badRequest().body("更新失败"); } @DeleteMapping("/{id}") public ResponseEntity<String> delete(@PathVariable Long id) { if (postService.deletePost(id)) { return ResponseEntity.ok("删除成功"); } return ResponseEntity.badRequest().body("删除失败"); } }

六、反例 & 常见错误

❌ 反例1:直接在 Controller 中写数据库逻辑

// 错误示范! @GetMapping("/bad") public List<Post> badExample() { return postMapper.selectList(null); // 耦合严重,无法复用,难测试 }

✅ 正确做法:分层架构(Controller → Service → Mapper),职责清晰。


❌ 反例2:忽略空指针异常

// 如果 categoryId 对应的分类不存在,category.getName() 会 NPE! post.setCategoryName(category.getName());

✅ 正确做法:判空处理,或使用 Optional。


❌ 反例3:不统一返回格式

有的接口返回String,有的返回Map,前端很难处理。

✅ 正确做法:统一封装响应体(如Result<T>),但为简化本例暂未使用。


七、注意事项

  1. 数据库连接:确保 MySQL 服务已启动,且blog_db数据库存在;
  2. MyBatis-Plus 依赖:需引入mybatis-plus-boot-starter,不是普通 MyBatis;
  3. 时间字段:MySQL 的DATETIME对应 Java 的LocalDateTime(Spring Boot 2.7+ 支持自动转换);
  4. 跨域问题:前端 Vue 开发时(如 localhost:8080)调用后端(localhost:8081)会遇到 CORS,可在 Controller 上加@CrossOrigin临时解决,生产环境应配置网关或 Nginx。

八、下一步

后端 API 已就绪!接下来你可以:

  • 用 Postman 测试/api/posts接口;
  • 搭建 Vue 前端,通过 Axios 调用这些接口;
  • 增加用户登录、JWT 鉴权、富文本编辑器支持等。

视频看了几百小时还迷糊?关注我,几分钟让你秒懂!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/30 17:42:13

【Dify access_token 配置全攻略】:从零掌握高效安全的Token管理策略

第一章&#xff1a;Dify access_token 配置概述在使用 Dify 平台进行应用开发与集成时&#xff0c;access_token 是实现身份验证和接口调用权限控制的核心凭证。该令牌用于标识调用方身份&#xff0c;确保 API 请求的安全性和合法性。正确配置 access_token 不仅能保障系统间通…

作者头像 李华
网站建设 2026/5/1 6:58:10

揭秘Dify附件ID异常问题:3步快速定位与修复方案

第一章&#xff1a;Dify附件ID异常问题概述在使用 Dify 平台进行应用开发与集成时&#xff0c;部分用户反馈在处理文件上传与附件调用过程中出现“附件ID异常”的错误。该问题通常表现为系统无法正确识别或解析由平台生成的附件唯一标识符&#xff08;Attachment ID&#xff09…

作者头像 李华
网站建设 2026/5/1 6:59:25

基于微信小程序的农产品销售系统(毕设源码+文档)

课题说明 随着乡村振兴战略推进与数字农业发展&#xff0c;农产品上行成为拓宽销售渠道、助力农户增收的关键路径&#xff0c;但当前农产品销售普遍存在渠道单一、品牌曝光不足、供需信息不对称、流通环节繁琐、品质溯源难等问题&#xff0c;难以适配消费者对优质农产品的便捷采…

作者头像 李华
网站建设 2026/5/1 1:41:28

工业级交流电流采集模块:高精度多路独立采样,稳定无忧

交流电流监测采集模块是一种用于测量、监控和采集交流电路中电流数据的电子设备。通常作为工业自动化、能源管理、智能电网、设备状态监测等系统中的关键组件。一、规格分类&#xff1a; 4路AC0-10A输入量程-485通讯方式 4路AC0-50A输入量程-485通讯方式 4路AC0-100A输入量程-4…

作者头像 李华
网站建设 2026/5/1 6:58:12

基于微信小程序的电子数据取证知识测试系统毕设源码+文档+讲解视频

前言 随着数字经济快速发展&#xff0c;电子数据取证作为司法实践与网络安全领域的核心环节&#xff0c;对专业人才的知识储备与实操能力提出了更高要求。当前电子数据取证知识学习存在测试场景单一、学习便捷性不足、成果反馈不及时等问题&#xff0c;难以满足学习者碎片化学习…

作者头像 李华
网站建设 2026/5/1 5:01:29

docker快速部署nginx

前言记录docker部署nginx部署nginx#创建挂载目录 sudo mkdir -p /zero/nginx/{html,conf.d,log} #分配权限 sudo chmod -R 755 /zero/nginx #启动一个临时nginx docker run -d -p 80:80 --name nginx nginx:1.24.0 # 从容器复制配置文件到新的挂载目录 docker cp nginx:/etc…

作者头像 李华