tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/pages.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
</head>
<body>

<div class="container" id="app">

    <div class="col-md-12 col-md-offset-3">
        <h1>Vue demo</h1>
        <div>
            <div class="row">
                <div class="col-md-2" style="text-align: left;font-size: 16px;line-height: 30px;">
                    查询：
                </div>
                <div class="col-md-5" style="text-align: left;">
                    <label>
                        <input type="text" class="form-control" v-model="search"></input>
                    </label>
                </div>
                <button type="button" class="btn btn-success" @click="editBook(book)">新增</button>
            </div>
            <table class="table table-hover ">
                <br/>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for='book in books'>
                    <td>{{book.id}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>
                    <td class="text-left">
                        <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
                        <button type="button" class="btn btn-success" @click="editBook(book)">修改</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="pageDiv"></div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" v-if="isUpdate">修改书籍</h5>
                    <h5 class="modal-title" v-else>新增书籍</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">书名</label>
                            <div class="col-sm-10"><input type="text" class="form-control" v-model="book.name"></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">作者</label>
                            <div class="col-sm-10"><input type="text" class="form-control" v-model="book.author"></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">价格</label>
                            <div class="col-sm-10"><input type="text" class="form-control" v-model="book.price"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer ">
                    <div class="col-sm-3 offset-9">
                        <button class="btn btn-primary btn-block" v-on:click="updatedBook()" v-if="isUpdate">修改</button>
                        <button class="btn btn-primary btn-block" v-on:click="addBook()" v-else>添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    let initBook = {
        id: 0,
        author: '1',
        name: '1',
        price: '1'
    }
    const vm = new Vue({
        el: "#app",
        // 计算函数 动态变化的数据
        data: {
            book: deepClone(initBook),
            books: [deepClone(initBook)],
            search: "",
            page: 1,
            pageSize: 10,
            totalPage: 1
        },
        watch: {},
        // 计算属性（过滤） 查询功能
        computed: {
            isUpdate() {
                return this.book.id !== undefined && this.book.id !== 0;
            }
        },
        mounted: function () {
            // this.queryList();
        },
        methods: {
            modelShow() {
                $('#exampleModalCenter').modal('show');
            },
            modelHide() {
                $('#exampleModalCenter').modal('hide');
            },
            refresh_pagination: function () {
                $('#pageDiv').pagination({
                    pages: this.totalPage,  // 页数
                    edges: 2, // 边缘页数，不用修改
                    cssStyle: 'pagination',
                    displayedPages: 5, // 展示相连页数，不用修改
                    onPageClick: function () {
                        //点击时调用
                        this.queryList();
                    }
                });
            },
            queryList: function () {
                // 获取数据，刷新页数
                axios.post("/api/list", this.book).then(res => {
                    if (res.success) {
                        this.totalPage = 10;
                        this.books = res.data;
                        this.refresh_pagination();
                    }
                })
            },
            addBook: function () {
                axios.post("/api/add", this.book).then(res => {
                    if (res.success) {
                        this.queryList();
                    }
                })
            },
            delBook: function (book) {
                axios.post("/api/delete", book).then(res => {
                    if (res.success) {
                        this.queryList();
                    }
                })
            },
            // 修改按钮
            editBook: function (book) {
                console.log(this.book)
                this.book = deepClone(book);
                console.log(this.book)
                $('#exampleModalCenter').modal('show');
                console.log(this.book)
            },
            // 修改完成后的 确认按钮点击事件
            updatedBook: function () {
                // 异步请求
                axios.post("/api/update", this.book).then(res => {
                    if (res.success) {
                        this.queryList();
                    }
                })
            }
        },


    });
</script>

</body>
</html>