Django接口开发

使用接口分页：

1.首先安装djangorestframework模块。

pip install djangorestframework django-filter Markdown

2.安装app

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'StoreApp',
    'ckeditor',
    'ckeditor_uploader',
    'BuyerApp',
    'rest_framework',

]

3.编写配置

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES':[
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ],
    'DEFAULT_PAGINATION_CLASS':'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE':5
}

4.编写api的路由（在主路由中）

urlpatterns = [
    path('admin/', admin.site.urls),
    path('storeapp/',include("StoreApp.urls")), #后台
    path('buyerapp/',include("BuyerApp.url")), #前台
    path('ckeditor/',include('ckeditor_uploader.urls')),
    re_path('^API',include(router.urls)), #restful 的根路由
    re_path('^api-auth',include('rest_framework.urls')) #接口认证
]

5.编写具体模型的路由（主路由中）

from rest_framework import routers
from StoreApp.views import UserViewSet
from StoreApp.views import TypeViewSet

router = routers.DefaultRouter() #声明一个默认的路由注册器
router.register(r'goods',UserViewSet) #注册写好的接口视图
router.register(r'goodsType',TypeViewSet) #注册写好的接口视图

6.在视图类

from StoreApp.serializers import *
from rest_framework import viewsets

class UserViewSet(viewsets.ModelViewSet):
    queryset = Goods.objects.all()  #具体返回的数据
    serializer_class = UserSerializer  #指定过滤的类

class TypeViewSet(viewsets.ModelViewSet):
    """
       返回具体查询的内容
    """
    queryset = GoodsType.objects.all()
    serializer_class = GoodsTypeSerializer

7.编写对应的过滤器

"""
当前文件只是为了规定接口的模型和数据字段
"""
from rest_framework import serializers
from StoreApp.models import *

class UserSerializer(serializers.HyperlinkedModelSerializer):
    """
    声明数据
    """
    class Meta: #元类
        model = Goods #要进行接口序列化的模型
        fields = ['goods_name','goods_price','goods_number','goods_date','goods_safeDate','id'] #序列要返回的字段


class GoodsTypeSerializer(serializers.HyperlinkedModelSerializer):
    """
    声明查询的表和返回的字段
    """
    class Meta:
        model = GoodsType
        fields = ['name','descripton']

8.在配置当中添加分页配置

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES':[
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ],
    'DEFAULT_PAGINATION_CLASS':'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE':5   #以每5条数据为一页
}

接口开发实例：

1.编写路由：

urlpatterns += [
    path('agl/',ajax_goods_list),
]

2.视图：

def ajax_goods_list(request):
    return render(request,"storeapp/ajax_list_goods.html")

3.前端页面（基于当前的接口使用vue-resource进行接口请求和数据绑定）

{% extends "storeapp/base.html" %}

{% block title %}
   商品列表页
{% endblock %}

{% block label %}
    <a class="btn btn-warning" href="/storeapp/add_goods/">添加商品</a>
{% endblock %}

{% block content %}
    {% verbatim myblock %}
    <div id="goods">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                    <td>商品数量</td>
                    <td>出厂日期</td>
                    <td>保质期</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody>
                 <tr v-for="goods in goods_list">
                    <td>
                        <a href="/storeapp/goods/{{ goods.id }}/">{{ goods.goods_name }}</a>
                    </td>
                    <td>
                        <input type="text" v-bind:value="goods.goods_price" >
                    </td>
                    <td>{{ goods.goods_number }}</td>
                    <td>{{ goods.goods_date }}</td>
                    <td>{{ goods.goods_safeDate }}</td>
                    <td>
                        <a class="btn btn-danger" href="/storeapp/set_goods/down/?id={{ goods.id }}">下架</a>
                        <!---
                        {% ifequal state "up" %}
                        <a class="btn btn-danger" href="/storeapp/set_goods/down/?id={{ goods.id }}">下架</a>
                        {% else %}
                            <a class="btn btn-danger" href="/storeapp/set_goods/up/?id={{ goods.id }}">上架</a>
                        {% endifequal %}
                        <a class="btn btn-primary" href="/storeapp/set_goods/delete/?id={{ goods.id }}">销毁</a>
                        -->
                    </td>
                </tr>

            </tbody>

        </table>
        <div class="dataTables_paginate paging_simple_numbers">
            <ul class="pagination">
                <li class="paginate_button page-item " v-for="p in page_range">
                    <a class="page-link" href="#" v-on:click="get_page_data(p)">{{ p }}</a>
                 <!--   <a class="page-link" href="?keywords={{ keywords }}&page={{ p }}">{{ p }}</a> -->
                </li>
            </ul>
        </div>
    </div>
    {% endverbatim myblock%}
{% endblock %}

{% block style %}
    <script src="/static/storeapp/js/vue.min.js"></script>
    <script src="/static/storeapp/js/vue-resource.js"></script>
    <script>
        Vue.use(VueResource); //使用vueresource对象
        var vue = new Vue(
            {
                el:"#goods", //指定绑定的范围对象
                data:{
                goods_list:[],
                page_range:[]
        }, //具体绑定的数据对象
                created:function () {
                    this.$http.get("/APIgoods/").then(
                        function (data) {
                            console.log(data.data);
                            this.goods_list = data.data.results;
                            page_number = Math.ceil(data.data.count/5);
                            {#var page_range = [...new Array(page_number).keys()];#}
                            var page_range = Array.from({length:page_number},(item, index)=> index+1);
                            this.page_range = page_range
                        },
                        function (error) {
                            console.log(error);
                        }
                    )
                },//初始化方法
                methods:{
                    get_page_data:function (page) {
                        this.$http.get("/APIgoods/?page="+page).then(
                            function (data) {
                                console.log(data.data);
                                this.goods_list = data.data.results;
                                page_number = Math.ceil(data.data.count/5);
                                {#var page_range = [...new Array(page_number).keys()];#}
                                var page_range = Array.from({length:page_number},(item, index)=> index+1);
                                this.page_range = page_range
                            },
                            function (error) {
                                console.log(error)
                            }
                        )
                    }

                } //可以被v-on绑定的方法
            }
        );

        {#$.ajax(#}
        {#    {#}
        {#        url:"/APIgoods/",#}
        {#        type:"get",#}
        {#        data:"",#}
        {#        success:function (data) {#}
        {#            console.log(data)#}
        {#        },#}
        {#        errors:function (error) {#}
        {#            console.log(error)#}
        {#        }#}
        {#    }#}
        {#)#}
    </script>
{% endblock %}