django rest-framework前後端數據交互--前端渲染HTML

django rest-framework 前後端數據交互實例

---

主要參考django-rest-framework官網教程，

1.rest-framework安裝

項目虛擬環境中使用pip命令安裝包

pip install djangorestframework

---

2.rest-framework後端配置

settings.py配置
在文件的INSTALLED_APPS中註冊rest_framework,並根據需要選擇在REST_FRAMEWORK中添加功能。

# file：settings.py
# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.course',
    'rest_framework',
]

REST_FRAMEWORK = {
    # Use Django's standard `django.contrib.auth` permissions,
    # or allow read-only access for unauthenticated users.
    'DEFAULT_PERMISSION_CLASSES': [
    	'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly',
    ]
}

序列化serializers
在app文件夾中新建一個文件，命名爲：serializers.py，編寫需要的序列化代碼，這裏以課程老師爲例：

# file: course/models.py
from django.db import models


class Teacher(models.Model):
	"""定義一個老師模型"""
	username = models.CharField(max_length=100)  # 老師名稱
	jobtitle = models.CharField(max_length=100)  # 職位
	profile = models.TextField()  # 簡介
	avatar = models.URLField()  # 圖像

# file: course/serializers.py
from rest_framework import serializers
from .models import Teacher


class TeacherSerializers(serializers.ModelSerializer):
    """教師序列化"""

    class Meta:
        model = Teacher
        fields = ("id", "username", "jobtitle", "profile", "avatar")

視圖配置

# flie: course/views.py

from apps.course.models import Teacher
from apps.course.serializers import TeacherSerializers
from rest_framework import generics


class CourseTeacherList(generics.ListCreateAPIView):
    """課程老師信息的增刪改查"""
    queryset = Teacher.objects.all()
    serializer_class = TeacherSerializers


class CourseTeacherListDetail(generics.RetrieveUpdateDestroyAPIView):
    """查找更新一個實例"""
    queryset = Teacher.objects.all()
    serializer_class = TeacherSerializers

路由配置

# file: course/urls.py
......

urlpatterns += [
    path('course_teacher/', course_views.CourseTeacher.as_view(), name='course_teacher'),
    path('course_teacher_list/', course_views.CourseTeacherList.as_view(), name='course_teacher_list'),
    path('course_teacher_list/<pk>/', course_views.CourseTeacherListDetail.as_view(), name='course_teacher_list_detail'),
]
urlpatterns = format_suffix_patterns(urlpatterns)

返回參數

- application/json
- text/html

rest-framework框架默認返回的是text/html格式，如果需要返回json或者api格式的，在路由後加上參數?format=json或 ?format=api.完整的url實例如下：

host: http://127.0.0.1:9000/cms/course_teacher_list/?format=json
Content-Type: application/json
response:
	[{"id":1,"username":"馬化騰","jobtitle":"CEO","profile":"騰訊創始人","avatar":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1071899407,1665501066&fm=58&bpow=748&bpoh=1055"}]

---

3.rest-framework前端配置

使用javascript實現數據的提交、更新、獲取、刪除
使用template.js模板渲染HTML數據，在使用rest-framework框架提供的數據和方法，對數據表進行get,post,put,delete等方法

HTML文件

<!-- file: templates/course_teacher.html -->
{% block head %}
    <script src="https://unpkg.com/[email protected]/dist/qiniu.min.js"></script>
    <script src="{% static 'js/template-web.js' %}"></script>
    <script src="{% static 'js/template.js' %}"></script>
    <script src="{% static 'js/course_teacher.js' %}"></script>
{% endblock %}

{% block content %}

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
             	<button id="teacher-button" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#exampleModal">添加教師信息</button>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="exampleModalLabel">添加老師信息</h4>
                      </div>
                      <div class="modal-body">
                        <form id="course-teacher-data" action="" method="">
                          <div class="form-group">
                              <label for="recipient-name" class="control-label">姓名:</label>
                            <textarea type="text" class="form-control" name="teacher-name"></textarea>
                          </div><div class="form-group">
                            <label for="recipient-name" class="control-label">職稱:</label>
                            <textarea type="text" class="form-control" name="teacher-job-title"></textarea>
                          </div><div class="form-group">
                            <label for="recipient-name" class="control-label">簡介:</label>
                            <textarea class="form-control" name="teacher-profile"></textarea>
                          </div>
                          <div class="form-group">
                            <label for="form-group" class="control-label">頭像:</label>
                              <div class="input-group">
                                  <textarea type="text" name="teacher-avatar" class="form-control" id="thumbnail-form"></textarea>
                                  <span class="input-group-btn">
                                      <label class="btn btn-default btn-file">
                                          上傳圖片 <input hidden="" type="file" class="btn btn-default" id="upload-btn">
                                      </label>
                                  </span>
                              </div>

                          </div>
                            <div class="form-group" id="progress-group" style="display: none;">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                                    0%
                                                </div>
                                            </div>
                                        </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                                <button id="submit-btn-teacher" type="button" class="btn btn-primary">提交</button>
                            </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="box-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>職稱</th>
                            <th>簡介</th>
                            <th>操作</th>
                            <th>頭像</th>
                        </tr>
                    </thead>
                    <tbody id="course-teacher-list">
                    <script id="course-teacher-list-tmpl" type="text/html">

                    {% verbatim %}
                    {{ each course_teachers as teacher }}
                        <tr  data-pk="{{ teacher.id }}" data-name="{{ teacher.username }}" data-jobtitle="{{ teacher.jobtitle }}" data-profile="{{ teacher.profile }}" data-avatar="{{ teacher.avatar }}">
                            <td>{{ teacher.id }}</td>
                            <td>{{ teacher.username }}</td>
                            <td>{{ teacher.jobtitle }}</td>
                            <td>{{ teacher.profile }}</td>
                            <td><img src="{{ teacher.avatar}}" alt="" style="height: 40px"></td>
                            <td>
                            	<button id="edit-btn" type="button" class="btn btn-warning btn-xs edit-btn">編輯</button>
                            	<button class="btn btn-danger btn-xs delete-btn">刪除</button>
                            </td>
                        </tr>
                    {{ /each }}
                    {% endverbatim %}
                    </script>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    
{% endblock %}

JavaScript文件：

// file: static/js/course_teacher.js
// 獲取cookies
function getCookies(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : undefined;
}

// 使用七牛雲上傳文件
$(function (){
 // ......
})

// 設置全局變量flag，用於判別submitBtnFun();函數的提交方法'post','put'
// 當flag = 0; method = 'post';
// 當flag = 1; method = 'put';
window.flag = 0;


// 數據提交方法
function submitBtnFun(event,teacherId) {
        event.preventDefault();
        var teacherName = $("textarea[name='teacher-name']").val();
        var teacherJobTitle = $("textarea[name='teacher-job-title']").val();
        var teacherProfile = $("textarea[name='teacher-profile']").val();
        var teacherAvatar = $("textarea[name='teacher-avatar']").val();
        var data = {
               'username': teacherName,
               'jobtitle': teacherJobTitle,
                'profile': teacherProfile,
                'avatar': teacherAvatar
            };
        if(teacherId !== ""){
            url = '/cms/course_teacher_list/'+ teacherId + '/'
        }else{
            url = '/cms/course_teacher_list/'
        }
        if(window.flag===0){
            method = 'post'
        }if(window.flag === 1){
            method = 'put'
    }
        $.ajax({
            url: url,
            type: method,
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json",
            headers: {
               "X-CSRFToken": getCookies("csrftoken")
            },
            success: function (resp) {
                if(resp){
                    console.log("數據提交成功！");
                    window.location.reload(); // 重新加載當前界面
                }else{
                    console.log("添加老師信息失敗！");
                }
            }
        });
    }


// 老師信息js渲染方法
function getTeacherInfo () {
    $.get("/cms/course_teacher_list/?format=json", function (resp) {
        if(resp){
            $("#course-teacher-list").html(template("course-teacher-list-tmpl", {course_teachers:resp}));
        }else {
            console.log("django-rest-framework沒有返回數據！");
        }
    });
}


// 獲取老師信息
$(document).ready(function () {
    getTeacherInfo();


// 添加老師信息
$(function addTeacher () {
    $("#submit-btn-teacher").click(function () {
        submitBtnFun(event, '');
    })
});


// 編輯老師信息
$(function editTeacher () {
     $("body").on('click',".edit-btn",function () {
        window.flag = 1;  // 設置全局變量flag=1，用於判別提交方法爲'put'
        var currentBtn = $(this);

        // 獲取當前老師信息
        var tr = currentBtn.parent().parent();
        var teacherId = tr.attr('data-pk');
        var teacherName = tr.attr('data-name');
        var teacherJobTitle = tr.attr('data-jobtitle');
        var teacherProfile = tr.attr('data-profile');
        var teacherAvatar = tr.attr('data-avatar');

        // // 獲取編輯from表單各標籤信息
        var teacherNameFrom = $("textarea[name='teacher-name']");
        var teacherJobTitleFrom = $("textarea[name='teacher-job-title']");
        var teacherProfileFrom = $("textarea[name='teacher-profile']");
        var teacherAvatarFrom = $("textarea[name='teacher-avatar']");
        var formTitle = $('#exampleModalLabel');
        formTitle.value = "修改老師信息";
        teacherNameFrom.html(value = teacherName);
        teacherJobTitleFrom.html(value = teacherJobTitle);
        teacherProfileFrom.html(value = teacherProfile);
        teacherAvatarFrom.html(value = teacherAvatar);
        $('#teacher-button').click();
        $('#submit-btn-teacher').click(function () {
        submitBtnFun(event,teacherId);
        });
    });
});


// 刪除老師信息
$(function () {
    $("body").on('click',".delete-btn",function () {
        var currentBtn = $(this);
        var tr = currentBtn.parent().parent();
        var teacherId = tr.attr('data-pk');
        xfzalert.alertConfirm({
           'text': '確定刪除該老師的信息嗎？',
            // 如果確定執行函數
           'confirmCallback':function () {
               $.ajax({
                    url: '/cms/course_teacher_list/' + teacherId + '/',
                    type: 'delete',
                    contentType: 'application/json',
                    headers: {
                        "X-CSRFToken": getCookies('csrftoken')
                    },
                    success: function () {
                        console.log("刪除成功！");
                        window.location.reload();
                    },
                    fail: function () {
                        console.log("刪除數據失敗！")
                    }
               })
           }
        });
    })
});