一 功能描述

1 在“課程管理”列表的“操作”列中增加一個“檢視”圖示。

2 單擊“檢視”圖示能夠列出該課程標題下的所有課程內容標題。

3 在“課程內容標題”列表頁面，單擊每個標題名稱，就可以檢視該課程內容的詳細資訊。

二 課程內容標題列表

1 編寫檢視類

# TemplateResponseMixin提供了一種模板渲染機制，在子類中，可以指定模板檔案和渲染資料
class ListLessonsView(LoginRequiredMixin, TemplateResponseMixin, View):
    login_url = "/account/login/"
    # 定義模板檔案
    template_name = 'course/manage/list_lessons.html'
    # 響應前端GET請求的方法，應該要識別課程標題，所以傳入了引數course_id
    def get(self, request, course_id):
        # 根據course_id得到當前“課程標題物件”
        course = get_object_or_404(Course, id=course_id)
        # 通過該語句將該資料渲染到模板中
        return self.render_to_response({'course':course})
 

2 編寫前端模板

{% extends "article/base.html" %}
{% block title %}List Lessons{% endblock %}
{% block content %}
<div>
    <div class='text-center'>
      <h1>{{ course.title }}</h1>
        <p>課程內容列表</p>
    </div>
    <table class="table table-hover" style="margin-top:10px">
        <tr>
            <td>序號</td>
            <td>內容標題</td>
            <td>釋出日期</td>
        </tr>
        {% for lesson in course.lesson.all %}
        <!--得到所有Lesson的例項-->
        <tr id={{ forloop.counter }}>
            <td>{{ forloop.counter }}</td>
            <td><a href="{% url 'course:detail_lesson' lesson.id %}">{{ lesson.title }}</a></td>
            <td>{{ lesson.created|date:"Y-m-d" }}</td>
        </tr>
        {% endfor %}
    </table>
</div>
{% endblock %}
 

3 配置URL

from django.conf.urls import url
from django.views.generic import TemplateView
from .views import AboutView, CourseListView, ManageCourseListView, CreateCourseView, DeleteCourseView, CreateLessonView, ListLessonsView, DetailLessonView
from .views import StudentListLessonView

urlpatterns = [
    url(r'about/$', AboutView.as_view(), name="about"),
    url(r'course-list/$', CourseListView.as_view(), name="course_list"),
    url(r'manage-course/$', ManageCourseListView.as_view(), name="manage_course"),
    url(r'create-course/$', CreateCourseView.as_view(), name="create_course"),
    # 預設情況DeleteView類接收以pk或者slug作為引數傳入的值，並且通過GET方式訪問一個刪除的
    # 確認頁面，然後以POST方式提交刪除表單，才能完成刪除
    url(r'delete-course/(?P<pk>\d+)/$', DeleteCourseView.as_view(), name="delete_course"),
    # 建立課程內容
    url(r'create-lesson/$', CreateLessonView.as_view(), name="create_lesson"),
    # 課程標題列表
    url(r'list-lessons/(?P<course_id>\d+)/$', ListLessonsView.as_view(), name="list_lessons"),
]
 

4 編輯檢視列表入口

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}管理課程{% endblock %}

{% block content %}
<div>
    <div class='text-right'><a href="{% url 'course:create_course' %}"><button type="button" class="btn btn-primary">新增課程</button></a></div>
    <table class="table table-hover" style="margin-top:10px">
        <tr>
            <td>序號</td>
            <td>課程標題</td>
            <td>釋出日期</td>
            <td>操作</td>
        </tr>
        {% for course in courses %}
        <tr id={{ forloop.counter }}>
            <td>{{ forloop.counter }}</td>
            <td>{{ course.title }}</a></td>
            <td>{{ course.created|date:"Y-m-d" }}</td>
            <td>
                <a name="edit" href="#"><span class="glyphicon glyphicon-pencil"></span></a>
                <a class="delete" nane="delete" href="{% url 'course:delete_course' course.id %}" ><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a>
                <!--檢視課程內容列表入口-->
                <a href="{% url 'course:list_lessons' course.id %}"><span class="glyphicon glyphicon-search" style="margin-left:20px;"></span></a>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript">
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
$(document).ready(function() {
    var csrftoken = getCookie('csrftoken');
    function csrfSafeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        crossDomain: false, // obviates need for sameOrigin test
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    var onDelete = function(){
        alert("確實要刪除嗎?");
        $.post(this.href, function(data) {
            // 前端得到反饋結果，就完成了刪除和頁面重新整理
            if (data.result == "ok"){
              window.location.reload();
            } else {
                alert("出現了一些問題");
            }
        }).fail(function() {
            alert("error");
        });
        return false;
    }
    $(".delete").click(onDelete);
})
</script>
{% endblock %}

五 測試