Django(六)rest_framework序列化及调用接口

配置rest_framework

  • 安装:
    – pip install djangorestframework
    – pip install django-filter

  • 建立serializers.py,代码如下:

from rest_framework import serializers
from stu.models import Student
class StudentSerializer(serializers.ModelSerializer,):
    s_name = serializers.CharField(error_messages={
        'blank': '用户名不能为空',     # ---> 对空白进行处理
        'max_length': '用户名不能超过10个字符串'   # ---> 对最大长度进行处理   / 还可以对最小长度进行处理等...
    }, max_length=10)  # --->在这进行处理,避免数据库抛出错误信息.
    s_tel = serializers.CharField(error_messages={
        'blank': '电话不能为空'
    })
    class Meta:
        model = Student     # ---> 调用Student模型
        fields = ['id', 's_name', 's_tel']      # ---> 序列化fileds中的字段, fields中的字段都将被序列化
    def to_representation(self, instance):   # ---> 创建了一个Student模型的对象
        data = super().to_representation(instance)   # ---> 将object对象转化成dict类型
        # ---> 这里要处理异常, 因为Student表中创建了数据,可能studentinfo里面没有数据, 所以序列化的时候可能会出现问题, 处理如下:
        try:
            data['s_addr'] = instance.studentinfo.i_addr  # ---> 通过一个Student的实例化对象去调用studentinfo的i_addr属性
        except Exception as e:
            data['s_addr'] = ''
        return data
  • 在当前项目中的views.py文件中加入代码如下:
class StudentsEdit(mixins.ListModelMixin,    # -->用于序列化 用于get检索所有信息进行排列
                   mixins.RetrieveModelMixin, #-->用于get检索 可以根据id进行检索
                   mixins.UpdateModelMixin,  #-->用于patch, put更新
                   mixins.DestroyModelMixin, #--> 用于delete去删除数据
                   mixins.CreateModelMixin,  #--> 用于post去创建数据
                   viewsets.GenericViewSet  #--->用于去get所有的queryset信息,可以进行过滤,
                   ):
    # 查询所有信息
    queryset = Student.objects.all()    # --->得到一个学生表的全部数据
    # 序列化
    serializer_class = StudentSerializer    # ---> 将serializer_class 赋值为 创建好的序列化Student的序列化模型 StudentSerializer
    # 以上的信息是由继承的所有父类的方法自动去调用的, 必须固定写 queryset 和 serializer_class , 否则会出错.
  • 在urls.py中设置路径代码:
from rest_framework.routers import SimpleRouter
router = SimpleRouter()
router.register(r'^student', views.StudentsEdit
                )
urlpatterns = [
    url(r'^stuPage/', login_required(views.stuPage)),
    url(r'^index/', login_required(views.index)),
    url(r'^addstu/', login_required(views.addStu), name='add'),
    url(r'^addstuInfo/(?P<stu_id>\d+)/', login_required(views.addStuInfo), name='addinfo'),
    url(r'^ajax/', views.ajax),
    url(r'^api-auth/', include('rest_framework.urls')),
    url(r'^api/', include(StudentResource().urls))
    ]
urlpatterns += router.urls  # -->将路径加入进去
  • 配置好以上文件以后, 就可以在 localhost:8000/stu/student/ 中看到如下信息了,里面的内容与序列化有关:
    这里写图片描述

  • 通过ajax方式调用接口对数据进行增删改查,html前端代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    {% csrf_token %}
    <button id="get">获取学生信息</button>
    <a href="javascript:;" onclick="add_stu()">添加学生信息</a>
    <div id="message">
    </div>
    <div id="div_update_stus">
    </div>
    <div id="div_add_stus">
    </div>
        <script src="/static/js/jquery.min.js" ></script>
        <script type="text/javascript">
        function del_stu(id){
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            alert(id);
            $.ajax({
                url:'/stu/student/' + id + '/',
                type:'delete',
                headers:{'X-CSRFToken': csrf},
                dataType:'json',
                success:function(msg){
                    alert('删除成功');
                },
                error:function (msg) {
                    alert('删除失败')
                }
            });
        }
        function update_stu(i){
            s= '姓名:<input type="text" id="s_name" name="name" > 电话:<input type = "text" id="s_tel" name="tel"> <input type="button" value="提交" onclick="update(' + i + ')">';
            $('#div_update_stus').html(s)
        }
        function update(i){
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            s_name = $('#s_name').val();
            s_tel = $('#s_tel').val();
            $.ajax({
                url:'/stu/student/' + i + '/',
                type:'PATCH',
                data:{'s_name': s_name, 's_tel': s_tel},
                dataType:'json',
                headers:{'X-CSRFToken':csrf},
                success:function(msg){
                    alert('修改成功')
                },
                error:function (msg) {
                    alert('修改失败')
                }
            });
        }
        function add_stu(){
            s= '姓名:<input type="text" id="s_name" name="name" > 电话:<input type = "text" id="s_tel" name="tel"> <input type="button" value="提交" onclick="add()">';
            $('#div_add_stus').html(s)
        }
        function add(){
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            s_name = $('#s_name').val();
            s_tel = $('#s_tel').val();
            $.ajax({
                url:'/stu/student/',
                type:'POST',
                data:{'s_name': s_name, 's_tel': s_tel},
                dataType:'json',
                headers:{'X-CSRFToken':csrf},
                success:function(msg){
                    {#如果添加成功了返回msg是获取到响应的所有的对象#}
                    {#alert(msg);#}
                    alert('添加成功')
                },
                error:function (msg) {
                    alert('添加失败')
                }
            });
        }
            $(function(){
                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                var myurl = '/stu/student/';
                $('#get').on('click', function(){
                    $.ajax({url:myurl, type:'get', headers:{'X-CSRFToken': csrf}, async:true,  dataType:'json',success:function(data){
                            console.log(data.data);
                            var s = '<table><tr><td>id</td><td>姓名</td><td>电话</td><td>操作</td></tr>';
                            for(var i=0; i < data.data.length; i +=1){
                                console.log(data[i]);
                                s += '<tr><td>' + data[i].id + '</td><td>' + data[i].s_name +  '</td><td>' + data[i].s_tel +
                                    '</td><td>' + '<a href="javascript:;" onclick="update_stu(' + data[i].id + ')">编辑</a>|' +
                                    '<a href="javascript:;" onclick="del_stu(' + data[i].id + ')">删除</a>' + '</td></tr>';
                            }
                            s += '</table>';
                            $('#message').html(s);
                        }
                    })
                });
            })
        </script>
    </body>
</html>
  • 浏览器中可以进行的操作如下:
    这里写图片描述
  • 点击获取和添加可以进行查看和修改:
    这里写图片描述

自定义api接口返回的结果:

  • 配置setting.py
    – 代码如下:
# 配置restful api 返回结果

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': (
        'utils.RenderResponse.CustomJsonRenderer',
    )
}
  • 建立RenderResponse.py文件
    – 代码如下
from rest_framework.renderers import JSONRenderer
class CustomJsonRenderer(JSONRenderer):
    def render(self, data, accepted_media_type=None, renderer_context=None):
        """
        格式
        {
            'code': xxx,
            'msg': 请求成功.
            data: {返回数据}
        }

        """
        if renderer_context:   # ---> renderer_context 如果有内容:
            if isinstance(data, dict):      # --->推断data是否是dict类型
                msg = data.pop('msg', '请求成功')   # --->如果有msg,删除键,返回值,命名msg=值,没有msg键,命名msg = '请求成功'   pop(删除的键, 没有键返回的默认值)
                code = data.pop('code', 0)         # --->如果有code,删除code键, 返回值,命名code=值, 如果没有code键,则重新命名code = '0'
            else:                            #
                msg = '请求成功'
                code = 0
            response = renderer_context['response']  # ---> 获取response信息
            response.status_code = 200           # ---> 将response.ststus_code, 如果请求成功的全部返回200的状态码
            res = {
                'code':code,
                'msg':msg,
                'data':data
            }
            return super().render(res, accepted_media_type, renderer_context)  # --->调用父类的render方法,和跳转的render不是一个方法, 下同
        else:
            return super().render(data, accepted_media_type,renderer_context)
  • 定义了响应返回格式以后,通过http://localhost:8000/stu/student/ 或者 postman去访问, 返回的格式如下, 如果需要进行ajax以上的操作,可以直接用data.data就可以获取到和上面一样的数据了:
    这里写图片描述
  • postman
    这里写图片描述

请求方式

这里写图片描述

浏览器响应状态码

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_41637554/article/details/80200064