管理系统后端

最新推荐文章于 2024-07-08 19:26:23 发布

limmlzc

最新推荐文章于 2024-07-08 19:26:23 发布

阅读量17

点赞数

文章标签： windows 服务器运维

本文链接：https://blog.csdn.net/2201_75886962/article/details/134609654

版权

@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">&times;</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>