怎么写接口

rest framework

工作当中，逐渐多的出现不使用页面展示数据，直接使用数据接口，这样的好处：
1、首先可以实现动静分离。将数据库和查询和页面渲染彻底分开。
2、网站可以支持脚本批量开发。
请求接口的方式

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

djangorestframework
Pip install djangorestframework
Pip install django-filter
Pip install Markdown          

配置settings

使用接口尽量需要有数据库模型

编写接口逻辑

from django.contrib import admin
from django.urls import path,include,re_path
from Buyer.views import index
from Store.models import Goods
from Store.models import GoodsType

from rest_framework import routers, serializers, viewsets

# Serializers define the API representation.
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 = [
    path('admin/', admin.site.urls),
    path('Store/', include("Store.urls")),
    path('Buyer/', include('Buyer.urls')),
    path('ckeditor/',include('ckeditor_uploader.urls')),
    re_path('^API', include(router.urls)), #restful 的根路由
    re_path('^api-auth',include('rest_framework.urls')) #接口认真
]
urlpatterns += [
    re_path(r"^$",index)
]

按照功能对项目进行划分：
创建serializers文件，用来存放接口的过滤器

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

在路由当中注册接口

在web端使用接口，通常要用到ajax和vue
数据通过接口返回
然后前端使用ajax进行请求，使用vue进行渲染
这里我使用的是vueResource
大家在使用代码的时候，先导入vue，在导入vueResource的js配置

Vue.use(VueResource);
var vue = new Vue(
    {
        el: "#goods",
        data: {
            goods_list: []
        },
        created:function () {
            this.$http.get("/APIgoods/").then(
                function (data) {
                    this.goods_list = data.data;
                    console.log(data.data)
                },
                function (error) {
                    console.log(error)
                }
            )
        },
        methods: {

        }
    }
);

接口的分页配置

使用接口分页
首先安装djangorestframework模块

然后安装app

然后编写配置

然后编写api的路由
urls

再编写具体模型的路由
Urls

在视图类

编写对应的过滤器

然后在配置当中添加分页配置

DEFAULT_PAGINATION_CLASS rest_framework自带的分页器
PAGE_SIZE 单页的数量
上面是后端开发要完成的工作
前端开发需要基于当前的接口使用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()];
                        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>

Postman基本使用和接口数据过滤下次再讲