@CrossOrigin(origins = "*")
@Controller
public class BookController {
@Autowired
private BooksService booksService;
@RequestMapping("/bookAll")
@ResponseBody
public List<Books> bookAll(){
List<Books> bookList = booksService.list();
return bookList;
}
@PostMapping("/bookAdd")
@ResponseBody
public R<String> addBook(@RequestBody Books book){
booksService.save(book);
return R.success("添加成功!!!");
}
@PostMapping("/bookUpdate")
@ResponseBody
public R<String> updateBook(@RequestBody Books book){
booksService.updateById(book);
return R.success("修改成功!!!");
}
@GetMapping("/bookDelete/{bookId}")
@ResponseBody
public R<String> deleteBook(@PathVariable("bookId") Integer bookId){
booksService.removeById(bookId);
return R.success("删除成功!!!");
}
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍列表</title>
<!--1. 添加vue依赖-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
.table {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h3>书籍列表(SpringBoot+ Vue + Axios + BootStrap)</h3>
</div>
</div>
<table class="table table-striped table-hover">
<tr>
<td>书籍编号</td>
<td>书籍名称</td>
<td>书籍数量</td>
<td>书籍描述</td>
<td>操作</td>
</tr>
<tr v-for="bk in bookList">
<td>{{bk.bookid}}</td>
<td>{{bk.bookname}}</td>
<td>{{bk.bookcounts}}</td>
<td>{{bk.detail}}</td>
<td>
<a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal"
@click="book=bk;title='修改书籍'">修改</a>
<a href="" class="btn btn-danger btn-sm" @click="delBook(bk.bookid)">删除</a>
</td>
</tr>
</table>
<div class="panel-footer text-right">
<a href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"
@click="book={};title='添加书籍'">添加书籍</a>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">{{title}}</h4>
--{{book}}
</div>
<div class="modal-body">
<form class="form-horizontal" method="post">
<input type="hidden" v-model="book.bookid">
<div class="form-group">
<label class="col-sm-2 control-label">书籍名称:</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="book.bookname" placeholder="书籍名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">书籍数量:</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="book.bookcounts" placeholder="书籍数量">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">书籍描述:</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="book.detail" placeholder="书籍描述">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
<button type="button" class="btn btn-primary" @click="save()">保存(S)</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
let vs = new Vue({
el: '.container',
data: {
bookList: [],
book: {},
title: '添加书籍',
},
created() {
//查询所有图书信息
this.findAllBooks();
},
methods: {
//1、查询全部图书信息
findAllBooks() {
axios.get("http://localhost:8080/bookAll").then(data => {
this.bookList = data.data
console.log(this.bookList);
})
},
//2、保存图书
save() {
//根据bkl.bookId是否有值,决定添加还是修改
let url = "http://localhost:8080/bookAdd";
if (this.book.bookid) {
debugger
url = "http://localhost:8080/bookUpdate";
}
//向后台发送请求
axios({
method:'post',
url:url,
data:JSON.stringify(this.book),
headers:{
'Content-type':'application/json'
}
}).then(res=>{
if (res.data.code==1){
this.findAllBooks();
}
console.log(res.data);
$("#myModal").modal('hide');
alert(res.data.data);
// $('#myModal').modal();
})
},
//3、删除书籍
delBook(bookId) {
let url = "http://localhost:8080/bookDelete/"+bookId;
if (confirm("你确定要删除吗?")) {
axios.get(url).then(function (res){
console.log(res);
if (res.data.code===1){
this.findAllBooks();
}
alert(res.data.data);
})
}
}
}
})
</script>