12，Springboot3+vue3实现系统公告功能
做一个新的公告模块步骤如下
一, 后端
1, 创建系统公告表
CREATE TABLE `notice` ( `id` int 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='系统公告表';笔记
2, 去创建 entity/Notice.java 文件，实体类与数据表字段一一对应的映射文件
package com.longchi.entity; /** * 系统公告信息 * @author Administrator */ public class Notice { private Integer id; private String title; private String content; private String time; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } }替换快捷键 ctrl+r 弹窗如下
3，将 UserMapper.java 复制到 NoticeMapper.java,
并将 'user' 全部替换为 'notice', 'User'全部替换为 'Notice'
mapper/noticeMapper.java (武哥哥老师样例备份)
package com.longchi.mapper; import com.longchi.entity.Notice; import org.apache.ibatis.annotations.Delete; import java.util.List; /** * 定义 Mapper 接口的方法 */ public interface NoticeMapper { List<Notice> selectAll(Notice notice); void insert(Notice notice); void updateById(Notice notice); @Delete("delete from `notice` where id = #{id}") void deleteById(Integer id); }4，将 UserMapper.xml 复制到 NoticeMapper.xml,并将 'user' 全部替换为 'notice'
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.longchi.mapper.NoticeMapper"> <select resultType="com.longchi.entity.Notice"> select * from `notice` <where> <if test="title != null and title != ''">title like concat('%',#{title},'%')</if> </where> order by id desc </select> <insert> insert into `notice` (title,content,time) values(#{title},#{content},#{time}) </insert> <update> update `notice` set title=#{title},content=#{content},time=#{time} where id=#{id} </update> </mapper>自己的
老师的
5, 将 UserService.java 复制到 NoticeService.java,
并将 'user' 全部替换为 'notice', 'User'全部替换为 'Notice'
package com.longchi.service; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.longchi.entity.Notice; import com.longchi.mapper.NoticeMapper; import jakarta.annotation.Resource; import org.springframework.stereotype.Service; import java.util.List; @Service public class NoticeService { @Resource NoticeMapper noticeMapper; public void add(Notice notice) { noticeMapper.insert(notice); } public void update(Notice notice) { noticeMapper.updateById(notice); } public void deleteById(Integer id) { noticeMapper.deleteById(id); } // 批量删除就是循环之后调用单个删除 public void deleteBatch(List<Notice> list) { for (Notice notice : list) { this.deleteById(notice.getId()); } } public List<Notice> selectAll(Notice notice) { return noticeMapper.selectAll(notice); } public PageInfo<Notice> selectPage(Integer pageNum, Integer pageSize, Notice notice) { // 开启分页查询 PageHelper.startPage(pageNum,pageSize); List<Notice> list = noticeMapper.selectAll(notice); return PageInfo.of(list); } }老师的
6, 将 UserController.java 复制到 NoticeController.java,
并将 'user' 全部替换为 'notice', 'User'全部替换为 'Notice'
package com.longchi.controller; import com.github.pagehelper.PageInfo; import com.longchi.common.Result; import com.longchi.entity.Notice; import com.longchi.service.NoticeService; import jakarta.annotation.Resource; import org.springframework.web.bind.annotation.*; import java.util.List; /** * @Description com.longchi.controller * @Author zengguoqing * @Date 2026-03-18 21:27 **/ // 暴露查询接口 @RestController @RequestMapping("/notice") // 添加统一前缀 public class NoticeController { @Resource NoticeService noticeService; @PostMapping("/add") public Result add(@RequestBody Notice notice) { // @RequestBody 接收前端传来的 json 参数 noticeService.add(notice); return Result.success(); } @PutMapping("/update") public Result update(@RequestBody Notice notice) { // @RequestBody 接收前端传来的 json 参数 noticeService.update(notice); return Result.success(); } @DeleteMapping("/delete/{id}") public Result delete(@PathVariable Integer id) { // @PathVariable 接收前端传来的路径参数 noticeService.deleteById(id); return Result.success(); } @DeleteMapping("/deleteBatch") public Result deleteBatch(@RequestBody List<Notice> list) { // @RequestBody 接收前端传来的 json 数组 noticeService.deleteBatch(list); return Result.success(); } @GetMapping("/selectAll") // 完整的请求路径 http://ip:port/admin/selectAll public Result selectAll(Notice notice) { List<Notice> noticeList = noticeService.selectAll(notice); return Result.success(noticeList); } /** * 分页查询 * pageNum: 当前的页码 * pageSize: 每页的个数 * */ @GetMapping("/selectPage") public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, Notice notice) { PageInfo<Notice> pageInfo = noticeService.selectPage(pageNum, pageSize, notice); return Result.success(pageInfo); // 返回的分页的对象 } /** * 实现数据全量导出 * ids: 1,2,3 前端是不能直接传数字，我们需要将前端的id拼接一下然后传递 * 默认的,未添加alias的属性也会写出,实现数据全量导出,如果想只写出加了别名的字段,可以调用此方法 writer.setOnlyAlias(true);排除之 * writer.setOnlyAlias(true); * */ /** @GetMapping("/export") public void exportData(Notice notice, HttpServletResponse response) throws IOException { // 后端拿到 ids String ids = notice.getIds(); if (StrUtil.isNotBlank(ids)) { String[] idsArr = ids.split(","); notice.setIdsArr(idsArr); } // 1, 拿到所有的数据 List<Notice> list = noticeService.selectAll(notice); // 2, 构建 Writer 对象 ExcelWriter writer = ExcelUtil.getWriter(true); // 3, 设置中文的表头 // 先写属性 比如:'username', 再写表头 比如:'账号'， 代码如下 writer.addHeaderAlias("username","账号"); writer.addHeaderAlias("name","名称"); writer.addHeaderAlias("phone","电话"); writer.addHeaderAlias("email","邮箱"); writer.addHeaderAlias("role","角色"); // 默认的,未添加alias的属性也会写出,如果想只写出加了别名的字段,可以调用此方法排除之 writer.setOnlyAlias(true); // 4, 写出数据到 writer writer.write(list); // 5, 设置输出文件的名称以及输出流的头信息 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"); String fileName = URLEncoder.encode("普通用户信息", StandardCharsets.UTF_8); response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx"); // 6, 写出到输出流,并关闭 writer ServletOutputStream os = response.getOutputStream(); // 通过writer将os输出到os里面去 writer.flush(os); // 关闭 writer.close(); os.close(); } */ /** * 批量导入 * */ /** @PostMapping("/import") public Result importData(MultipartFile file) throws IOException { // 1, 获取到输入流，构建 reader InputStream inputStream = file.getInputStream(); // file.getInputStream(); // 构建 reader ExcelReader reader = ExcelUtil.getReader(inputStream); // 2, 通过 reader 读取 excel 里面的数据 // 先写表头 比如:'账号'，再写属性 比如:'username' 代码如下 reader.addHeaderAlias("账号","username"); reader.addHeaderAlias("名称","name"); reader.addHeaderAlias("电话","phone"); reader.addHeaderAlias("邮箱","email"); reader.addHeaderAlias("角色","role"); // 拿到的数据转化为 Notice 集合 List<Notice> list = reader.readAll(Notice.class); // 使用iter快捷键写循环 再将 Notice 集合数据写入到数据库中 for (Notice notice : list) { noticeService.add(notice); } return Result.success(); } */ }老师的
Mysql驱动包
<!--Mysql驱动包--> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j&