axios的基本使用 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="container">
            <el-table :data="books" height="300" :stripe="true" :border="true">
                <el-table-column label="图书编号" prop="id"></el-table-column>
                <el-table-column label="图书名称" prop="name"></el-table-column>
                <el-table-column label="图书作者" prop="author"></el-table-column>
                <el-table-column label="图书价格" prop="price"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot:default="data">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" ></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="count" :page-size="3" @current-change="changePage"></el-pagination>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    books:[],
                    count:0,
                    pageSize:3,
                    pageNum:1
                },
                beforeMount:function(){
                    //使用axios查询图书信息
                    //axios.get(url).then(fn).catch(fn);
                    axios.get("http://localhost:8080/book/list?pageNum=1&pageSize="+this.pageSize).then(function(res){
                        vm.count = res.data.data.count;
                        vm.books = res.data.data.data;
                    });
                },
                methods:{
                    changePage:function(pn){
                        this.pageNum = pn;
                        console.log(this.pageNum);
                        axios.get("http://localhost:8080/book/list?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(function(res){
                            vm.count = res.data.data.count;
                            vm.books = res.data.data.data;
                        });
                    }
                }
            });
        </script>
    </body>
</html>

 

posted @ 2020-07-21 22:41  beFuckingRich  阅读(416)  评论(0)    收藏  举报