基于Java+SpringMvc+Vue技术的图书管理系统的设计与实现
由于篇幅所限,以下仅展示如何使用Spring MVC和Vue.js创建一个简单的图书管理系统的后端部分。
后端代码示例(Spring MVC):
// BookController.java
@RestController
@RequestMapping("/api/books")
public class BookController {
@Autowired
private BookService bookService;
@GetMapping
public ResponseEntity<List<Book>> getAllBooks() {
List<Book> books = bookService.findAll();
return ResponseEntity.ok(books);
}
@GetMapping("/{id}")
public ResponseEntity<Book> getBookById(@PathVariable(value = "id") Long bookId) {
Book book = bookService.findById(bookId);
return ResponseEntity.ok(book);
}
@PostMapping
public ResponseEntity<Book> createBook(@RequestBody Book book) {
Book newBook = bookService.save(book);
return ResponseEntity.ok(newBook);
}
@PutMapping("/{id}")
public ResponseEntity<Book> updateBook(@PathVariable(value = "id") Long bookId, @RequestBody Book book) {
Book updatedBook = bookService.update(bookId, book);
return ResponseEntity.ok(updatedBook);
}
@DeleteMapping("/{id}")
public ResponseEntity<?> deleteBook(@PathVariable(value = "id") Long bookId) {
bookService.deleteById(bookId);
return ResponseEntity.ok().build();
}
}
在这个例子中,我们定义了一个BookController
,它处理与图书相关的HTTP请求。每个方法都使用Spring的@RestController
和@RequestMapping
注解来定义路由,并使用@GetMapping
、@PostMapping
、@PutMapping
和@DeleteMapping
注解来映射特定的HTTP方法到相应的处理方法上。
前端代码示例(Vue.js):
// BookList.vue
<template>
<div>
<ul>
<li v-for="book in books" :key="book.id">
{{ book.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
books: []
};
},
methods: {
fetchBooks() {
this.axios.get('/api/books')
.then(response => {
this.books = response.data;
})
.catch(error => {
console.error('There was an error!', error);
});
}
},
created() {
this.fetchBooks();
}
};
</script>
在这个Vue组件中,我们定义了一个BookList
,它在组件被创建时通
评论已关闭