一 功能描述
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 %}
五 测试