下面是
一个基于 SpringBoot + MyBatisPlus + Restful + Vue + Jquery + Axios 的图书
管理系统的简单例子：
1. 创建 SpringBoot 项目
使用 Spring Initializr 创建
一个 SpringBoot 项目，并添加以下依赖：
```xml
<!-- 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，用于存储图书和图书分类信息。
```sql
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 中添加以下配置：
```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 接口。
```
java
@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> {
}
```
```
java
@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，提供图书和图书分类的增删改查接口。
```
java
@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 接口和
实现类，
实现图书和图书分类的增删改查功能。
```
java
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 等前端技术
实现前端界面。
```
html
<!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">×</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">×</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="
8257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
