03. 开发系统公告管理功能

4003 字约 9 分钟读完4802 次阅读更新于 2026/5/3

这是一个非常纯粹的增删改查模块，非常适合小白学习，可以学会基础的SpringBoot+Vue模块的CRUD流程

开发流程

  1. 创建数据库表
  2. 在Springboot工程里创建实体类
  3. 在Springboot工程里创建Controller相关接口
  4. 在Springboot工程里创建Service业务代码层
  5. 在Springboot工程里创建Mapper相关的数据库操作接口，通过Mybatis框架帮我们操作数据库（增、删、改、查）
  6. 在Vue工程里创建页面（包含数据表格、查询、新增、编辑、删除等操作按钮）
  7. 在Vue工程里配置页面的路由（通过地址栏直接访问页面） /notice
  8. 在Vue工程里的Manager.vue里面配置相关的左侧菜单

给工程改个名字
image.png
image.png
然后在 idea里面重新打开这个文件夹即可
http://127.0.0.1:5173/login

创建数据库表 notice

主键统一使用 id，然后设置主键（金钥匙的图标）设置自动递增
image.png

CREATE TABLE `notice` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '标题',
  `content` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '内容',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '发布时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='系统公告';

如果没创建此数据库表，你可以通过查询的方式创建数据库表
image.png

开发后端接口

复制AdminController，再替换Controller内的 admin为notice 即可

image.png

安装 MybatisX插件

注意 新增和更新的sql语句别写错了
image.png

写完后重启验证下代码有没有问题，如果一切就绪，那么就OK了

开发页面

注意表格部分
image.png
注意表单的部分
image.png
注意后端的请求路径，替换 admin变成 notice
image.png

重点

养成独立的编程思维，自己可以独立开发增删改查模块，这样才算学会这节课
把基础的知识学到烂熟于心，再去学习新的东西，事半功倍！