基于Spring Boot与Vue的图书管理系统全栈开发实战
本实践项目旨在构建一个前后端分离的图书管理平台，整合Spring Boot、MyBatis、MySQL以及Vue.js与Axios技术栈。系统功能覆盖图书信息的展示、分页查询、单条及批量删除、新增、编辑，以及Excel数据的导入导出等核心业务场景。
一、项目架构与数据库设计
项目采用标准的MVC分层架构，前端负责页面渲染与交互，后端提供RESTful API接口。首先需要设计底层数据结构。
1. 数据库初始化
系统主要包含两张核心数据表：book_info（图书信息表）与book_category（图书分类表）。
表结构SQL脚本：
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for book_category
-- ----------------------------
DROP TABLE IF EXISTS `book_category`;
CREATE TABLE `book_category` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '分类ID',
`category_name` varchar(64) NOT NULL COMMENT '分类名称',
`status` int(1) DEFAULT '1' COMMENT '状态：1启用 0禁用',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8mb4;
-- ----------------------------
-- Table structure for book_info
-- ----------------------------
DROP TABLE IF EXISTS `book_info`;
CREATE TABLE `book_info` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '图书ID',
`title` varchar(256) NOT NULL COMMENT '书名',
`author` varchar(128) NOT NULL COMMENT '作者',
`category_id` int(11) DEFAULT NULL COMMENT '分类ID',
`publish_date` datetime DEFAULT NULL COMMENT '出版日期',
`isbn` varchar(32) NOT NULL COMMENT 'ISBN编号',
`cover_url` varchar(256) DEFAULT NULL COMMENT '封面地址',
PRIMARY KEY (`id`),
KEY `fk_category` (`category_id`),
CONSTRAINT `fk_category` FOREIGN KEY (`category_id`) REFERENCES `book_category` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1001 DEFAULT CHARSET=utf8mb4;
二、后端核心模块开发
1. 项目依赖配置
构建Spring Boot项目，整合MyBatis、PageHelper分页插件以及Lombok简化代码。
<dependencies>
<!-- Web模块 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- MyBatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.4.1</version>
</dependency>
<!-- MySQL驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- Lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
2. 实体类定义
使用Lombok注解生成Getter/Setter方法。
@Data
public class Book {
private Integer id;
private String title;
private String author;
private Integer categoryId;
private Date publishDate;
private String isbn;
private String coverUrl;
// 关联分类对象
private Category category;
}
@Data
public class Category {
private Integer id;
private String categoryName;
private Integer status;
}
3. 数据持久层实现
定义Mapper接口与XML映射文件。为了降低耦合，我们将结果映射与SQL逻辑分离。
BookMapper.java
@Mapper
public interface BookMapper {
List<Book> queryBookList(Book query);
int insertBook(Book book);
int updateBook(Book book);
int deleteBook(Integer id);
int deleteBooksBatch(List<Integer> ids);
}
BookMapper.xml
<mapper namespace="com.example.mapper.BookMapper">
<resultMap id="BookResultMap" type="com.example.entity.Book">
<id property="id" column="id"/>
<result property="title" column="title"/>
<!-- 其他字段映射 -->
<association property="category" javaType="com.example.entity.Category">
<id property="id" column="category_id"/>
<result property="categoryName" column="category_name"/>
</association>
</resultMap>
<select id="queryBookList" resultMap="BookResultMap">
SELECT b.*, c.category_name
FROM book_info b
LEFT JOIN book_category c ON b.category_id = c.id
<where>
<if test="title != null and title != ''">
AND b.title LIKE CONCAT('%', #{title}, '%')
</if>
</where>
</select>
<delete id="deleteBooksBatch">
DELETE FROM book_info WHERE id IN
<foreach collection="list" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</delete>
</mapper>
4. 业务逻辑层封装
引入PageHelper实现分页逻辑。
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookMapper bookMapper;
@Override
public PageInfo<Book> getBookPage(Book query, int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
List<Book> list = bookMapper.queryBookList(query);
return new PageInfo<>(list);
}
@Override
public boolean removeBooks(List<Integer> ids) {
return bookMapper.deleteBooksBatch(ids) > 0;
}
}
5. 控制器层接口设计
定义统一响应对象ResponseResult，增强接口规范性。
@RestController
@RequestMapping("/api/books")
public class BookController {
@Autowired
private BookService bookService;
@GetMapping
public ResponseResult<PageInfo<Book>> list(
@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize,
Book query) {
PageInfo<Book> pageInfo = bookService.getBookPage(query, pageNum, pageSize);
return ResponseResult.success(pageInfo);
}
@DeleteMapping("/batch")
public ResponseResult<?> batchDelete(@RequestBody List<Integer> ids) {
if (bookService.removeBooks(ids)) {
return ResponseResult.success();
}
return ResponseResult.error("删除失败");
}
}
三、前端交互实现
前端采用Vue.js框架，通过Axios发送HTTP请求，实现页面动态渲染。
1. 核心页面结构
<div id="app">
<h2>图书管理系统</h2>
<!-- 搜索栏 -->
<div class="toolbar">
<input type="text" v-model="searchForm.title" placeholder="书名搜索">
<button @click="loadData">查询</button>
<button @click="handleExport">导出Excel</button>
</div>
<!-- 数据列表 -->
<table>
<thead>
<tr>
<th><input type="checkbox" @change="toggleSelectAll"></th>
<th>书名</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in bookList" :key="item.id">
<td><input type="checkbox" v-model="selectedIds" :value="item.id"></td>
<td>{{ item.title }}</td>
<td>{{ item.author }}</td>
<td>
<button @click="deleteOne(item.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 分页组件 -->
<div id="pagination"></div>
</div>
2. Axios请求封装
const app = new Vue({
el: '#app',
data: {
searchForm: { title: '' },
bookList: [],
selectedIds: [],
pageInfo: {}
},
created() {
this.loadData(1);
},
methods: {
loadData(pageNum) {
const params = { pageNum, pageSize: 10, ...this.searchForm };
axios.get('http://localhost:8080/api/books', { params })
.then(res => {
if(res.data.code === 200) {
this.bookList = res.data.data.list;
// 渲染分页逻辑...
}
});
},
toggleSelectAll(e) {
this.selectedIds = e.target.checked ? this.bookList.map(b => b.id) : [];
},
batchDelete() {
if(this.selectedIds.length === 0) return alert('请选择数据');
axios.delete('http://localhost:8080/api/books/batch', { data: this.selectedIds })
.then(res => {
if(res.data.code === 200) {
alert('批量删除成功');
this.loadData(1);
}
});
}
}
});
四、扩展功能：Excel处理
集成Apache POI库实现数据的导入导出功能，便于用户进行数据迁移或备份。
1. 导出工具类
通过流式写入Excel，优化内存使用。
public class ExcelUtils {
public static void exportToExcel(List<Book> dataList, HttpServletResponse response) throws IOException {
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment;filename=books.xls");
Workbook workbook = new HSSFWorkbook();
Sheet sheet = workbook.createSheet("图书列表");
// 创建表头
Row headerRow = sheet.createRow(0);
headerRow.createCell(0).setCellValue("书名");
headerRow.createCell(1).setCellValue("作者");
// 填充数据
for (int i = 0; i < dataList.size(); i++) {
Row row = sheet.createRow(i + 1);
Book book = dataList.get(i);
row.createCell(0).setCellValue(book.getTitle());
row.createCell(1).setCellValue(book.getAuthor());
}
workbook.write(response.getOutputStream());
workbook.close();
}
}
2. 导入逻辑
读取上传的Excel文件并解析入库。
@PostMapping("/import")
public ResponseResult<?> importExcel(@RequestParam("file") MultipartFile file) {
try {
Workbook workbook = new HSSFWorkbook(file.getInputStream());
Sheet sheet = workbook.getSheetAt(0);
List<Book> bookList = new ArrayList<>();
for (Row row : sheet) {
if (row.getRowNum() == 0) continue; // 跳过表头
Book book = new Book();
book.setTitle(row.getCell(0).getStringCellValue());
book.setAuthor(row.getCell(1).getStringCellValue());
bookList.add(book);
}
bookService.saveBatch(bookList);
return ResponseResult.success();
} catch (Exception e) {
return ResponseResult.error("导入失败");
}
}
五、功能截图
以下是系统部分功能的运行效果展示：
图书列表与分页界面：
图书新增与编辑表单：
