Implementing an Audit Functionality with SpringBoot and Vue Frontend

The tutorial begins by outlining four possible approaches to realize an audit function—simple table‑to‑table transfer, modal dialog prompting, buffered input with asynchronous processing, and temporary tables—each with its own advantages and drawbacks.

It then presents the MySQL schema for the audit table, showing fields such as id , name , user , create_time , img , and state , followed by the SQL statement used to create the table.

CREATE TABLE `audit` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `name` varchar(255) DEFAULT NULL COMMENT '报修名称',
  `user` varchar(255) DEFAULT NULL COMMENT '报修人',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '报修时间',
  `img` varchar(255) DEFAULT NULL COMMENT '详情图片',
  `state` varchar(255) DEFAULT '待审核' COMMENT '待审核，审核通过，审核不通过',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;

Next, the SpringBoot AuditController is introduced, exposing endpoints for creating, updating, deleting, and paging audit records, with examples of @PostMapping , @GetMapping , and pagination logic using MyBatis‑Plus.

@RestController
@RequestMapping("/audit")
public class AuditController {
    @Resource
    private IAuditService auditService;

    @PostMapping
    public Result save(@RequestBody Audit audit) {
        if (audit.getId() == null) {
            audit.setUser(TokenUtils.getCurrentUser().getUsername());
        }
        auditService.saveOrUpdate(audit);
        return Result.success();
    }

    @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                          @RequestParam Integer pageSize,
                          @RequestParam(defaultValue = "") String name) {
        QueryWrapper
queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("id");
        if (!"".equals(name)) {
            queryWrapper.like("name", name);
        }
        return Result.success(auditService.page(new Page<>(pageNum, pageSize), queryWrapper));
    }
}

The front‑end Vue component is then detailed, showing the table layout with Element‑UI, search input, add/edit dialogs, batch delete, pagination, and button actions that call the backend APIs. Key snippets include the <el-table> definition and the methods for loading data, saving records, and handling state changes.

File upload is handled by a separate FileController that stores files on disk, computes MD5 to avoid duplicates, and records metadata in a file table. The controller provides upload, download, update, and batch‑delete endpoints, with Redis cache flushing for consistency.

Finally, the article concludes with a brief summary encouraging readers to like the post if it helped, and includes several promotional messages unrelated to the technical content.