Spring Boot+Vue图书管理系统实战：从数据库设计到前端交互完整流程

Spring BootVue图书管理系统实战从零构建前后端分离应用在数字化转型浪潮中图书管理系统作为经典的信息管理案例依然是开发者学习前后端分离架构的理想切入点。本文将带您从数据库设计开始逐步构建一个完整的图书管理系统涵盖Spring Boot后端API开发、Vue前端交互设计以及两者之间的无缝对接。不同于简单的CRUD示例我们会深入探讨实际开发中的架构决策、性能优化和用户体验细节适合已经掌握Java和JavaScript基础希望提升全栈开发能力的中级开发者。1. 项目架构设计与技术选型1.1 前后端分离架构优势现代Web开发已经普遍采用前后端分离模式这种架构的核心优势在于职责清晰前端专注UI交互和用户体验后端专注业务逻辑和数据持久化开发效率前后端可以并行开发通过API契约进行协作技术灵活性前后端可以独立选择最适合的技术栈性能优化前端可以做资源缓存后端可以专注接口性能我们的技术栈组合后端Spring Boot 2.7 MyBatis-Plus MySQL 8.0 前端Vue 3 Element Plus Axios 构建工具Maven npm1.2 数据库设计与优化图书管理系统的核心是书籍数据存储我们设计了以下表结构CREATE TABLE book ( id bigint NOT NULL AUTO_INCREMENT, title varchar(255) NOT NULL COMMENT 书名, isbn varchar(20) DEFAULT NULL COMMENT 国际标准书号, publish varchar(100) DEFAULT NULL COMMENT 出版社, authors varchar(255) DEFAULT NULL COMMENT 作者, price decimal(10,2) DEFAULT NULL COMMENT 定价, stock int DEFAULT 0 COMMENT 库存数量, cover_url varchar(255) DEFAULT NULL COMMENT 封面图URL, create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, update_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_isbn (isbn), KEY idx_title (title) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;相比基础设计这个表结构增加了几个重要改进添加了ISBN字段作为唯一标识避免重复录入增加了价格和库存字段更符合实际业务需求使用utf8mb4字符集支持完整的Unicode字符如emoji添加了封面图URL字段为前端展示做准备建立了适当的索引提高查询效率2. Spring Boot后端开发实战2.1 项目初始化与配置使用Spring Initializr创建项目时需要选择以下关键依赖Spring Web提供RESTful API支持MyBatis-Plus简化数据库操作MySQL DriverMySQL数据库连接Lombok减少样板代码application.yml的典型配置server: port: 8080 servlet: context-path: /api spring: datasource: url: jdbc:mysql://localhost:3306/library?useSSLfalseserverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 20 minimum-idle: 5 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true2.2 业务逻辑实现我们采用经典的三层架构Controller → Service → Mapper实体类设计Data TableName(book) public class Book { TableId(type IdType.AUTO) private Long id; private String title; private String isbn; private String publish; private String authors; private BigDecimal price; private Integer stock; private String coverUrl; TableField(fill FieldFill.INSERT) private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) private LocalDateTime updateTime; }分页查询接口实现RestController RequestMapping(/books) public class BookController { Autowired private BookService bookService; GetMapping public ResultPageBook listBooks( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageBook page new Page(pageNum, pageSize); LambdaQueryWrapperBook queryWrapper new LambdaQueryWrapper(); if (StringUtils.isNotBlank(keyword)) { queryWrapper.like(Book::getTitle, keyword) .or().like(Book::getAuthors, keyword); } return Result.success(bookService.page(page, queryWrapper)); } // 其他CRUD接口... }提示使用MyBatis-Plus的LambdaQueryWrapper可以避免SQL注入风险同时保持代码可读性2.3 接口安全与性能优化实际项目中需要考虑的几个关键点接口鉴权添加JWT认证参数校验使用Hibernate Validator异常处理统一异常处理机制缓存策略对热点数据添加Redis缓存接口文档集成Swagger或Knife4j示例添加参数校验PostMapping public ResultBook addBook(Valid RequestBody BookDTO bookDTO) { Book book convertToEntity(bookDTO); bookService.save(book); return Result.success(book); } Data public class BookDTO { NotBlank(message 书名不能为空) Size(max 255, message 书名长度不能超过255个字符) private String title; Pattern(regexp \\d{13}, message ISBN必须是13位数字) private String isbn; DecimalMin(value 0.0, message 价格不能为负数) private BigDecimal price; // 其他字段... }3. Vue前端开发实战3.1 项目初始化与架构使用Vue CLI创建项目vue create library-frontend cd library-frontend vue add router vue add vuex npm install element-plus axios --save推荐的项目结构src/ ├── api/ # API请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue # 根组件 └── main.js # 入口文件3.2 图书列表页面实现使用Element Plus的表格组件展示数据template div classbook-list el-card div classheader el-input v-modelsearchQuery placeholder搜索书名或作者 stylewidth: 300px keyup.enterhandleSearch template #append el-button iconel-icon-search clickhandleSearch / /template /el-input el-button typeprimary clickshowAddDialog 添加图书 /el-button /div el-table :datatableData border stylewidth: 100% v-loadingloading el-table-column proptitle label书名 width180 / el-table-column propauthors label作者 width120 / el-table-column proppublish label出版社 width150 / el-table-column propprice label价格 width100 template #default{row} ¥{{ row.price.toFixed(2) }} /template /el-table-column el-table-column propstock label库存 width80 / el-table-column label操作 width180 template #default{row} el-button sizesmall clickhandleEdit(row.id)编辑/el-button el-button sizesmall typedanger clickhandleDelete(row.id) 删除 /el-button /template /el-table-column /el-table el-pagination classpagination :current-pagepagination.current :page-sizepagination.size :totalpagination.total current-changehandlePageChange / /el-card /div /template script import { getBookList } from /api/book export default { data() { return { searchQuery: , tableData: [], loading: false, pagination: { current: 1, size: 10, total: 0 } } }, created() { this.fetchData() }, methods: { async fetchData() { this.loading true try { const params { pageNum: this.pagination.current, pageSize: this.pagination.size, keyword: this.searchQuery } const res await getBookList(params) this.tableData res.data.records this.pagination.total res.data.total } finally { this.loading false } }, handleSearch() { this.pagination.current 1 this.fetchData() }, handlePageChange(current) { this.pagination.current current this.fetchData() }, showAddDialog() { // 打开添加对话框 }, handleEdit(id) { // 跳转到编辑页面 }, handleDelete(id) { // 删除确认逻辑 } } } /script style scoped .header { display: flex; justify-content: space-between; margin-bottom: 20px; } .pagination { margin-top: 20px; text-align: center; } /style3.3 API请求封装推荐将API请求统一管理// src/api/book.js import request from /utils/request export function getBookList(params) { return request({ url: /books, method: get, params }) } export function addBook(data) { return request({ url: /books, method: post, data }) } export function updateBook(id, data) { return request({ url: /books/${id}, method: put, data }) } export function deleteBook(id) { return request({ url: /books/${id}, method: delete }) }axios的全局配置// src/utils/request.js import axios from axios import { ElMessage } from element-plus import router from /router const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer ${token} } return config }, error { return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || Error) if (res.code 401) { // 未授权跳转到登录页 router.push(/login) } return Promise.reject(new Error(res.message || Error)) } else { return res } }, error { ElMessage.error(error.message || 请求失败) return Promise.reject(error) } ) export default service4. 前后端联调与部署4.1 跨域问题解决方案开发环境下常见的跨域解决方案后端配置CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .maxAge(3600); } }前端代理配置vue.config.jsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }4.2 项目部署方案后端部署打包Spring Boot应用mvn clean package使用Docker部署FROM openjdk:11-jre-slim COPY target/library-backend.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]前端部署构建生产环境代码npm run buildNginx配置示例server { listen 80; server_name library.example.com; location / { root /var/www/library-frontend/dist; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }4.3 性能监控与优化上线后需要关注的几个关键指标指标监控工具优化建议API响应时间Spring Boot Actuator添加缓存优化SQL查询前端加载速度Lighthouse代码分割图片懒加载数据库负载MySQL慢查询日志添加适当索引优化表结构内存使用VisualVM检查内存泄漏调整JVM参数前端性能优化技巧路由懒加载const BookList () import(./views/BookList.vue)图片懒加载el-image :srcbook.coverUrl lazy :preview-src-list[book.coverUrl] /API请求节流import { throttle } from lodash methods: { handleSearch: throttle(function() { this.fetchData() }, 500) }在实际项目中我们还需要考虑用户权限管理、操作日志记录、数据导出等业务功能。通过这个完整的实战案例开发者可以掌握现代Web应用开发的核心流程和技术要点为更复杂的企业级应用开发打下坚实基础。