图书管理系统（基于SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios ）例子

下面是一个基于 SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios 的图书管理系统的简单例子：

1. 创建 SpringBoot 项目

使用 Spring Initializr 创建一个 SpringBoot 项目，并添加以下依赖：

<!-- MyBatisPlus -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3.1</version>
</dependency>

<!-- Druid 数据库连接池 -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.2.6</version>
</dependency>

<!-- Lombok -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.20</version>
    <scope>provided</scope>
</dependency>

<!-- Spring Web -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. 创建数据库表

创建数据库表 book 和 category，用于存储图书和图书分类信息。

CREATE TABLE `book` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `author` varchar(50) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `category_id` bigint(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `category` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 配置 MyBatisPlus 和 Druid 数据库连接池

在 application.properties 中添加以下配置：

# 数据库连接池配置
spring.datasource.url=jdbc:mysql://localhost:3306/book_management?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Druid 监控配置
spring.datasource.druid.stat-view-servlet.login-username=admin
spring.datasource.druid.stat-view-servlet.login-password=admin
spring.datasource.druid.stat-view-servlet.url-pattern=/druid/*

# MyBatisPlus 配置
mybatis-plus.mapper-locations=classpath*:mapper/*.xml

4. 创建实体类和 Mapper 接口

使用 MyBatisPlus 自动生成实体类和 Mapper 接口。

@Data
@TableName("book")
public class Book {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String name;
    private String author;
    private BigDecimal price;
    @TableField("category_id")
    private Long categoryId;
}

public interface BookMapper extends BaseMapper<Book> {

}

@Data
@TableName("category")
public class Category {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String name;
}

public interface CategoryMapper extends BaseMapper<Category> {

}

5. 创建 Restful API

创建 Restful API，提供图书和图书分类的增删改查接口。

@RestController
@RequestMapping("/api/books")
public class BookController {
    
    @Autowired
    private BookService bookService;

    @GetMapping
    public List<Book> listBooks() {
        return bookService.listBooks();
    }

    @PostMapping
    public Book addBook(@RequestBody Book book) {
        bookService.addBook(book);
        return book;
    }

    @GetMapping("/{id}")
    public Book getBookById(@PathVariable Long id) {
        return bookService.getBookById(id);
    }

    @PutMapping("/{id}")
    public Book updateBook(@PathVariable Long id, @RequestBody Book book) {
        book.setId(id);
        bookService.updateBook(book);
        return book;
    }

    @DeleteMapping("/{id}")
    public Long deleteBookById(@PathVariable Long id) {
        bookService.deleteBookById(id);
        return id;
    }
}

@RestController
@RequestMapping("/api/categories")
public class CategoryController {
    
    @Autowired
    private CategoryService categoryService;

    @GetMapping
    public List<Category> listCategories() {
        return categoryService.listCategories();
    }

    @PostMapping
    public Category addCategory(@RequestBody Category category) {
        categoryService.addCategory(category);
        return category;
    }

    @GetMapping("/{id}")
    public Category getCategoryById(@PathVariable Long id) {
        return categoryService.getCategoryById(id);
    }

    @PutMapping("/{id}")
    public Category updateCategory(@PathVariable Long id, @RequestBody Category category) {
        category.setId(id);
        categoryService.updateCategory(category);
        return category;
    }

    @DeleteMapping("/{id}")
    public Long deleteCategoryById(@PathVariable Long id) {
        categoryService.deleteCategoryById(id);
        return id;
    }
}

6. 创建 Service 接口和实现类

创建 Service 接口和实现类，实现图书和图书分类的增删改查功能。

public interface BookService {
    List<Book> listBooks();
    void addBook(Book book);
    Book getBookById(Long id);
    void updateBook(Book book);
    void deleteBookById(Long id);
}

@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookMapper bookMapper;

    @Override
    public List<Book> listBooks() {
        return bookMapper.selectList(null);
    }

    @Override
    public void addBook(Book book) {
        bookMapper.insert(book);
    }

    @Override
    public Book getBookById(Long id) {
        return bookMapper.selectById(id);
    }

    @Override
    public void updateBook(Book book) {
        bookMapper.updateById(book);
    }

    @Override
    public void deleteBookById(Long id) {
        bookMapper.deleteById(id);
    }
}

public interface CategoryService {
    List<Category> listCategories();
    void addCategory(Category category);
    Category getCategoryById(Long id);
    void updateCategory(Category category);
    void deleteCategoryById(Long id);
}

@Service
public class CategoryServiceImpl implements CategoryService {

    @Autowired
    private CategoryMapper categoryMapper;

    @Override
    public List<Category> listCategories() {
        return categoryMapper.selectList(null);
    }

    @Override
    public void addCategory(Category category) {
        categoryMapper.insert(category);
    }

    @Override
    public Category getCategoryById(Long id) {
        return categoryMapper.selectById(id);
    }

    @Override
    public void updateCategory(Category category) {
        categoryMapper.updateById(category);
    }

    @Override
    public void deleteCategoryById(Long id) {
        categoryMapper.deleteById(id);
    }
}

7. 创建前端界面

使用 Vue、Jquery、Axios 等前端技术实现前端界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="text-center">图书管理系统</h3>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header">
                            图书分类
                        </div>
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item" v-for="category in categories" :key="category.id">
                                    {{ category.name }}
                                    <button class="btn btn-sm btn-danger float-right" @click="deleteCategory(category.id)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    <button class="btn btn-sm btn-info float-right mr-2" @click="showCategoryModal(category)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </li>
                            </ul>
                            <div class="text-center mt-3">
                                <button class="btn btn-primary" @click="showCategoryModal(null)">
                                    新增分类
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-header">
                            图书列表
                        </div>
                        <div class="card-body">
                            <div class="form-inline mb-3">
                                <label for="categoryId" class="mr-2">分类：</label>
                                <select class="form-control mr-3" id="categoryId" v-model="searchForm.categoryId">
                                    <option value="">全部</option>
                                    <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
                                </select>
                                <button class="btn btn-primary mr-3" @click="searchBooks()">
                                    搜索
                                </button>
                                <button class="btn btn-primary" @click="showBookModal(null)">
                                    新增图书
                                </button>
                            </div>
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>图书名称</th>
                                        <th>图书作者</th>
                                        <th>图书价格</th>
                                        <th>图书分类</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="book in books" :key="book.id">
                                        <td>{{ book.id }}</td>
                                        <td>{{ book.name }}</td>
                                        <td>{{ book.author }}</td>
                                        <td>{{ book.price }}</td>
                                        <td>{{ getCategoryNameById(book.categoryId) }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-info mr-2" @click="showBookModal(book)">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-danger" @click="deleteBook(book.id)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图书分类模态框 -->
        <div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form>
                        <div class="modal-header">
                            <h5 class="modal-title" id="categoryModalLabel">{{ categoryModalTitle }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="categoryName">分类名称：</label>
                                <input type="text" class="form-control" id="categoryName" v-model="categoryModalData.name">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="saveCategory()">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 图书模态框 -->
        <div class="modal fade" id="bookModal" tabindex="-1" role="dialog" aria-labelledby="bookModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form>
                        <div class="modal-header">
                            <h5 class="modal-title" id="bookModalLabel">{{ bookModalTitle }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="bookName">图书名称：</label>
                                <input type="text" class="form-control" id="bookName" v-model="bookModalData.name">
                            </div>
                            <div class="form-group">
                                <label for="bookAuthor">图书作者：</label>
                                <input type="text" class="form-control" id="bookAuthor" v-model="