Django接口开发

在工作当中，逐渐多的出现不使用页面展示数据，直接使用数据接口，这样的好处：

1、首先可以实现动静分离。将数据库和查询和页面渲染彻底分开。

2、网站可以支持脚本批量开发。

最原始的接口搭建是使用类视图搭建接口，后来发现接口规范很难约束。就有前辈写了接口框架，使用框架进行规范的接口开发。这个叫restful。django拥有restful的插件djangorestframework。

# 下载相应模块
Pip install djangorestframework
Pip install django-filter
Pip install Markdown  

1，配置settings

2，使用接口需要有数据库模型

3，编写接口逻辑（路由 urls中）

from Store.models import Goods
from Store.models import GoodsType
from rest_framework import routers, serializers, viewsets

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


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

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

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


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

urlpatterns = [
    re_path('^API', include(router.urls)), #restful 的根路由  
]

按照功能对项目进行划分

为保持项目的独立性，可移植性，按照功能对项目进行划分

1，创建serializers文件，用来存放接口的过滤器

2，在视图当中查询接口要返回的数据，并制定过滤器

3，在路由当中注册接口

4，在web端使用接口，通常要用到ajax和vue

数据通过接口返回，然后前端使用ajax进行请求，使用vue进行渲染

①数据绑定首先要解决django和vue的代码冲突问题

②解决绑定的范围问题

③Vue绑定的代码

{% extends 'shopapp/base.html' %}

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


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

                <tr v-for='goods in goods_list'>

                    <td ><a href="/shop/gs/{{ 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="/shop/sg/down/?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>
               </li>

            </ul>
        </div>
    </div>
    {% endverbatim myblock %}
{% endblock %}
{% block script %}
    <script src="/static/shopapp/js/vue.min.js"></script>
    <script src="/static/shopapp/js/vue-resource.js"></script>
    <script>
        Vue.use(VueResource); // 使用vueresoure对象
        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/5);
                            var page_range = Array.from({length:page_number},(item,index)=>index+1);
                            {#var page_range = [...new Array(page_number).keys()];#}
                            this.page_range = page_range;// 将接收的数据绑定到Vue对象
                            console.log(data.data);

                        },
                        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/5);
                                var page_range = Array.from({length:page_number},(item,index)=>index+1);{#分页，页面从1开始#}
                                {#var page_range = [...new Array(page_number).keys()]; // 魔术方法 分页，页面从0开始#}
                                this.page_range = page_range;

                            },
                            function (error) {
                                console.log(error)
                            }
                        )

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

                }

            }
        )

    </script>

{% endblock %}