接口分页功能

接口的分页配置：在配置中添加分页配置

DEFAULT_PAGINATION_CLASS 为rest_framework自带的分页器

PAGE_SIZE为单页的数量

至此，以上完成了后端开发的工作。

总结一下：

接口访问逻辑：

1.请求接口api，匹配到具体路由，找到对应的视图函数。

2.视图进行查询数据操作，并将数据传递给过滤器。

3.过滤器返回类中定义的具体数据。

接口分页步骤：

1,.首先安装djangorestframework，紧接着settings中安装app，编写配置，

2.然后编写api的路由，和具体模型的路由。

3.编写视图类

4.根据视图类，编写对应的过滤器。

5.在配置当中配置中添加分页配置。

前端接口使用

前端开发需要基于当前的接口使用vue-resource进行接口请求和数据绑定。

1.数据绑定需要首先解决django和vue的代码冲突问题。

2.解决绑定的范围问题，

3.各种绑定的使用

将要使用的变量放入{{     }}中。

v-for="i in range(10)"

v-on:click=func(arg)

vue绑定

Vue.use(VueResource); //使用vueresource对象
    var vue = new Vue(
        {
            el: "#goods", //指定绑定的范围对象
            data: {
                goods_list: [],
                page_range: []
            }, //具体绑定的数据对象
            created:function () {
                this.$http.get("/APIgoods/").then( //发起ajax get请求
                    function (data) {
                        this.goods_list = data.data.results; //将接受的数据绑定到vue对象上
                        page_number = Math.ceil(data.data.count/10);
                        var page_range = [...new Array(page_number).keys()];#js快速生成序列
                        this.page_range = page_range //将接受的数据绑定到vue对象上
                    }, //如果请求成功执行的函数
                    function (error) {
                        console.log(error)
                    }
                )
            }, //初始化方法
            methods: {
                get_page_data:function (page) {
                    this.$http.get("/APIgoods/?page="+page).then(
                    function (data) {
                        this.goods_list = data.data.results;
                        page_number = Math.ceil(data.data.count/10);
                        var page_range = [...new Array(page_number).keys()];
                        this.page_range = page_range
                    },
                    function (error) {
                        console.log(error)
                    }
                )
                } //可以被v-on绑定的方法
            }
        }
    );
</script>

vue和vueresource区别：

1.vue也可以绑定ajax,但是不可以重复绑定。

2.vuerescourse可以重复绑定。