🚀 从零打造高颜值图书管理系统：Vue 3 + Spring Boot 前后端分离实战

摘要：本文将带你从零开始，使用 Vue 3、Element Plus 结合 Spring Boot 与 MyBatis-Plus，打造一套具备高级感 Mac 风格 UI 的现代图书管理系统。涵盖前后端架构设计、CORS 跨域配置及完整的 CRUD 增删改查实战。

一、 项目背景与技术栈选型

在日常开发中，传统的后台管理系统常常面临 UI 沉闷、前后端适配繁琐等痛点。本项目旨在通过现代化的技术栈，兼顾高颜值的前端视觉体验与高效的后端架构。

• 前端：Vue 3 (Composition API) + Element Plus + Axios + Less + Font Awesome 4.7.0
• 后端：Spring Boot + MyBatis-Plus + MySQL + HikariCP 数据库连接池
• 设计风格：Mac 苹果高级感 UI（毛玻璃特效、极简留白、细腻阴影）

二、 后端架构与接口实现 (Spring Boot)

1. 项目包结构设计

后端采用标准的 MVC 架构结合 MyBatis-Plus 持久层框架：

• config：全局配置类（如跨域配置）
• controller：控制层，负责暴露 RESTful API
• entity：实体类，映射数据库表
• mapper：数据访问层（继承 MyBatis-Plus 的 BaseMapper）

2. 数据库实体类设计 (Book.java)

使用 Lombok 简化实体编写，并严格对应数据库字段：

package com.wsx.book_admin.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("book")
public class Book {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String bookName;
    private String author;
    private String publisher;
    private String publish_date;
    private Double price;
    private Integer stock;
    private String create_time;