1. 程式人生 > >Django+xadmin打造線上教育平臺(六)

Django+xadmin打造線上教育平臺(六)

目錄

程式碼

九、課程章節資訊

9.1.模板和urls

 拷貝course-comments.html 和 course-video.html放入 templates目錄下

先改course-video.html,同樣繼承base.html,然後裡面有屬於自己的樣式,也要保留

(1)配置url和檢視

  # 課程章節資訊頁
    re_path('info/(?P<course_id>\d+)/', CourseInfoView.as_view(), name="course_info"),
class CourseInfoView(View):
    
'''課程章節資訊''' def get(self, request, course_id): course = Course.objects.get(id=int(course_id)) return render(request, "course-video.html", { "course": course, })

(2)配置相關的連結

首先修改course-vedio.html中custom_bread裡面的連結

{% block custom_bread %}
    <section
> <div class="wp"> <div class="crumbs"> <ul> <li><a href="index.html">首頁</a>></li> <li><a href="{% url 'course:course_list' %}">公開課程</a>></li> <
li><a href="{% url 'course:course_detail' course.id %}">課程詳情</a>></li> <li>章節資訊</li> </ul> </div> </div> </section> {% endblock %}
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}課程列表{% endblock %}

{% block custom_bread %}
    <section>
        <div class="wp">
        <div class="crumbs">
            <ul>
                <li><a href="index.html">首頁</a>></li>
                <li><a href="{% url 'course:course_list' %}">公開課程</a>></li>
                <li><a href="{% url 'course:course_detail' course.id %}">公開課程</a>></li>
                <li>課程詳情</li>
            </ul>
        </div>
    </div>
    </section>
{% endblock %}

{% block css_learn %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}" />
{% endblock %}

{% block content %}
    <div id="main">
    <div class="course-infos">
        <div class="w pr">
            <div style="height: 15px" class="path">
            </div>
            <div class="hd">
                <h2 class="l">django與vuejs實戰專案2</h2>
            </div>
            <div class="statics clearfix">
                <div class="static-item ">
                    <span class="meta-value"><strong>高階</strong></span>
                    <span class="meta">難度</span>
                    <em></em>
                </div>
                <div class="static-item static-time">
                    <span class="meta-value">0分鐘</span>
                    <span class="meta">時長</span>
                    <em></em>
                </div>
                <div class="static-item">
                    <span class="meta-value"><strong>13</strong></span>
                    <span class="meta">學習人數</span>
                    <em></em>
                </div>
            </div>
        </div>
    </div>
    <div class="course-info-main clearfix w has-progress">

        <div class="info-bar clearfix">
        <div class="content-wrap clearfix">
            <div class="content">
                <div class="mod-tab-menu">
                    <ul class="course-menu clearfix">
                        <li><a class="ui-tabs-active active" id="learnOn"  href="course-video.html"><span>章節</span></a></li>
                        <li><a id="commentOn" class="" href="course-comment.html"><span>評論</span></a></li>
                    </ul>
                </div>
                <div id="notice" class="clearfix">
                    <div class="l"> <strong>課程公告:</strong> <a  href="javascript:void(0)">Spring的文件以及相關的jar檔案已上傳</a> </div>
                </div>

                <div class="mod-chapters">

                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>第一章 基礎知識</strong>
                        </h3>
                        <ul class="video">

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">1.1 hello world (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">1.2 基本概念 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">django settings.py 配置 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                        </ul>
                    </div>

                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>第二章 進階開發</strong>
                        </h3>
                        <ul class="video">

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">2.1 test (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">2.2 test2 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                        </ul>
                    </div>

                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>第三章 需求分析和資料庫設計</strong>
                        </h3>
                        <ul class="video">

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.1 django app設計 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.2 django model設計 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.3 django users models設計 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.4 django course models設計 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">3.5 organization models設計 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                        </ul>
                    </div>

                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>第四章 django基礎知識回顧</strong>
                        </h3>
                        <ul class="video">

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">4.1 django settings配置 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">4.2 models設計 (20)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                        </ul>
                    </div>

                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>第五章 通過xadmin搭建後臺管理系統</strong>
                        </h3>
                        <ul class="video">

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">5.1 django admin講解 (10)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                            <li>
                                <a target="_blank" href='/video/3662' class="J-media-item studyvideo">5.2 xadmin的安裝和註冊 (0)
                                    <i class="study-state"></i>
                                </a>
                            </li>

                        </ul>
                    </div>

                </div>

            </div>
            <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>資料下載</h4>
                        <ul class="downlist">

                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;前端頁面</span>
                                <a href="../media/course/resource/2016/11/media.zip" class="downcode" target="_blank" download="" data-id="274" title="">下載</a>
                            </li>

                        </ul>
                    </div>
                    <div class="box mb40">
                        <h4>講師提示</h4>
                        <div class="teacher-info">
                            <a href="/u/315464/courses?sort=publish" target="_blank">
                                <img src='../media/teacher/2016/11/aobama_CXWwMef.png' width='80' height='80' />
                            </a>
        <span class="tit">
          <a href="/u/315464/courses?sort=publish" target="_blank">bobby</a>
        </span>
                            <span class="job">xxx</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>課程須知</dt>
                                <dd class="autowrap">python基礎你需要有</dd>
                            </dl>
                            <dl>
                                <dt>老師告訴你能學到什麼?</dt>
                                <dd class="autowrap">django的進階開發</dd>
                            </dl>
                        </div>
                    </div>


                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">該課的同學還學過</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">

                                    <li class="curr">
                                        <a href="course-detail.html" target="_blank">
                                            <img src="../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg" alt="django與vuejs實戰專案2">
                                            <span class="name autowrap">django與vuejs實戰專案2</span>
                                        </a>
                                    </li>

                                    <li class="curr">
                                        <a href="course-detail.html" target="_blank">
                                            <img src="../media/courses/2016/12/python面向物件.jpg" alt="python面向物件">
                                            <span class="name