这是一个基于SpringBoot框架的图书管理系统，后端使用MyBatisPlus操作数据库，前端使用Vue和Jquery，并通过Axios进行数据交互。
后端代码示例（只列出部分关键代码）：
@RestController
@RequestMapping("/books")
public class BookController {
@Autowired
private BookService bookService;
@GetMapping
public ResponseEntity<List<Book>> getAllBooks() {
List<Book> books = bookService.list();
return ResponseEntity.ok(books);
}
@GetMapping("/{id}")
public ResponseEntity<Book> getBookById(@PathVariable("id") Long id) {
Book book = bookService.getById(id);
return ResponseEntity.ok(book);
}
@PostMapping
public ResponseEntity<Void> createBook(@RequestBody Book book) {
bookService.save(book);
return ResponseEntity.status(HttpStatus.CREATED).build();
}
@PutMapping("/{id}")
public ResponseEntity<Void> updateBook(@PathVariable("id") Long id, @RequestBody Book book) {
Book bookToUpdate = new Book();
BeanUtils.copyProperties(book, bookToUpdate);
bookToUpdate.setId(id);
bookService.updateById(bookToUpdate);
return ResponseEntity.ok().build();
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteBook(@PathVariable("id") Long id) {
bookService.removeById(id);
return ResponseEntity.noContent().build();
}
}前端代码示例（只列出部分关键代码）：
<div id="app">
<table>
<tr v-for="book in books" :key="book.id">
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<!-- 省略其他内容 -->
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books: []
},
created() {
this.fetchBooks();
},
methods: {
fetchBooks() {
axios.get('/books')
.then(response => {
this.books = response.data;
})
.catch(error => {
console.error('There was an error!', error);
});
}
// 省略其他方法
}
});
</script>以上代码展示了如何使用SpringBoot和MyBatisPlus创建一个简单的图书管理系统后端接口，以及如何使用Vue和Axios从后端获取数据并展示在前端页面上。