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

来源:https://www.cnblogs.com/derek1184405959/archive/2018/03/25/8644731.html
-Advertisement-
Play Games

八、課程詳情頁功能的實現 8.1.課程列表 (1)配置urls MxOnline/urls中 course裡面新建urls.py 把course-list.html拷貝到templates目錄下 (2)course-list.html繼承base.html 修改title,修改bread裡面,con ...


八、課程詳情頁功能的實現

8.1.課程列表

 (1)配置urls

MxOnline/urls中

path("course/", include('course.urls', namespace="course")),

course裡面新建urls.py

# course/urls.py

from django.urls import path,re_path
from .views import CourseListView

# 要寫上app的名字
app_name = "course"

urlpatterns = [
    path('list/',CourseListView.as_view(),name='course_list'),

]

把course-list.html拷貝到templates目錄下

from django.shortcuts import render
from django.views.generic import View

class CourseListView(View):
    def get(self, request):
        return render(request, "course-list.html")

 

(2)course-list.html繼承base.html

修改title,修改bread裡面,content裡面放course-list獨有的

{#templates/course-list.html#}

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}公開課列表{% endblock %}

{% block custom_bread %}
    <section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="index.html">首頁</a>></li>
                <li>公開課</li>
            </ul>
        </div>
    </section>
{% endblock %}
{% block content %}
<section>
    <div class="wp">
        <div class="list" style="margin-top:0;">
            <div class="left layout">
                <div class="head">
                    <ul class="tab_header">
                        <li class="active"><a href="?sort=">最新 </a></li>
                        <li ><a href="?sort=hot">最熱門</a></li>
                        <li ><a href="?sort=students">參與人數</a></li>
                    </ul>
                </div>
                <div id="inWindow">
                    <div class="tab_cont " id="content">
                    <div class="group_list">

                            <div class="box">
                                <a href="course-detail.html">
                                    <img width="280" height="350" class="scrollLoading" src="{% static 'media/courses/2016/12/mysql.jpg' %}"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2>xadmin進階開發</h2>
                                    </a>
                                    <span class="fl">時長:<i class="key">30</i></span>
                                    <span class="fr">學習人數:2&nbsp;&nbsp;</span>
                                </div>
                                <div class="bottom">
                                    <a href="course-detail.html"><span class="fl">來自慕課網</span></a>
                                    <span class="star fr  notlogin
                                        " data-favid="15">
                                        1
                                    </span>
                                </div>
                            </div>




                    </div>
                    <div class="pageturn">
                        <ul class="pagelist">





                                        <li class="active"><a href="?page=1">1</a></li>





                                        <li><a href="?page=2" class="page">2</a></li>




                                <li class="long"><a href="?page=2">下一頁</a></li>


                        </ul>
                    </div>
                </div>
                </div>
            </div>
            <div class="right layout">
                <div class="head">熱門課程推薦</div>
                <div class="group_recommend">

                    <dl>
                        <dt>
                            <a target="_blank" href="">
                                <img width="240" height="220" class="scrollLoading" src="{% static 'media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg' %}"/>
                            </a>
                        </dt>
                        <dd>
                            <a target="_blank" href=""><h2> django與vuejs實戰項目2</h2></a>
                            <span class="fl">難度:<i class="key">高級</i></span>
                        </dd>
                    </dl>




                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
course-list.html

然後去後臺添加十門課程

(3)列表展示

views.py

# course/views.py

from django.shortcuts import render
from django.views.generic import View
from .models import Course

class CourseListView(View):
    def get(self, request):
        all_courses = Course.objects.all()

        return render(request, "course-list.html",{'all_courses':all_courses})

course-list.html

 <div class="group_list">
    {% for course in all_course %}
    <div class="box">
        <a href="course-detail.html">
            <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
        </a>
        <div class="des">
            <a href="course-detail.html">
                <h2>{{ course.name }}</h2>
            </a>
            <span class="fl">時長:<i class="key">{{ course.learn_times }}</i></span>
            <span class="fr">學習人數:{{ course.students }}&nbsp;&nbsp;</span>
        </div>
        <div class="bottom">
            <a href="course-detail.html"><span class="fl">來自{{ course.course_org.name }}</span></a>
            <span class="star fr  notlogin
                " data-favid="15">
                {{ course.fav_nums }}
            </span>
        </div>
    </div>
    {% endfor %}

8.2.分頁

        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses,2 , request=request)
        courses = p.page(page)
<div class="pageturn">
                        <ul class="pagelist">
                            {% if all_courses.has_previous %}
                                <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一頁</a></li>
                            {% endif %}

                            {% for page in all_courses.pages %}
                                {% if page %}
                                    {% ifequal page all_courses.number %}
                                        <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                    {% else %}
                                        <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                    {% endifequal %}
                                {% else %}
                                    <li class="none"><a href="">...</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if all_courses.has_next %}
                                <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一頁</a></li>
                            {% endif %}
                        </ul>
                    </div>

8.3.排序

class CourseListView(View):
    def get(self, request):
        all_courses = Course.objects.all().order_by('-add_time')
        # 熱門課程推薦
        hot_courses = Course.objects.all().order_by('-click_nums')[:3]
        # 排序
        sort = request.GET.get('sort', "")
        if sort:
            if sort == "students":
                all_courses = all_courses.order_by("-students")
            elif sort == "hot":
                all_courses = all_courses.order_by("-click_nums")
        # 分頁
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses,2 , request=request)
        courses = p.page(page)
        return render(request, "course-list.html", {
            "all_courses":courses,
            'sort': sort,
            'hot_courses':hot_courses,

        })
<div class="head">
                    <ul class="tab_header">
                        <li class="{% ifequal sort '' %}active{% endifequal %}"><a href="?sort=" >最新 </a></li>
                        <li class="{% ifequal sort 'hot' %}active{% endifequal %}"><a href="?sort=hot" >最熱門 </a></li>
                        <li class="{% ifequal sort 'students' %}active{% endifequal %}"><a href="?sort=students" >參與人數 </a></li>
                    </ul>
                </div>
<div class="head">熱門課程推薦</div>
                <div class="group_recommend">
                    {% for hot_course in hot_courses %}
                    <dl>
                        <dt>
                            <a target="_blank" href="">
                                <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_course.image }}"/>
                            </a>
                        </dt>
                        <dd>
                            <a target="_blank" href=""><h2> {{ hot_course.name }}</h2></a>
                            <span class="fl">難度:<i class="key">{{ hot_course.get_degree_display }}</i></span>
                        </dd>
                    </dl>
                    {% endfor %}
{#templates/course-list.html#}

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}公開課列表{% endblock %}

{% block custom_bread %}
    <section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="index.html">首頁</a>></li>
                <li>公開課</li>
            </ul>
        </div>
    </section>
{% endblock %}
{% block content %}
<section>
    <div class="wp">
        <div class="list" style="margin-top:0;">
            <div class="left layout">
                <div class="head">
                    <ul class="tab_header">
                        <li class="{% ifequal sort '' %}active{% endifequal %}"><a href="?sort=" >最新 </a></li>
                        <li class="{% ifequal sort 'hot' %}active{% endifequal %}"><a href="?sort=hot" >最熱門 </a></li>
                        <li class="{% ifequal sort 'students' %}active{% endifequal %}"><a href="?sort=students" >參與人數 </a></li>
                    </ul>
                </div>
                <div id="inWindow">
                    <div class="tab_cont " id="content">
                    <div class="group_list">
                            {% for course in all_courses.object_list %}
                            <div class="box">
                                <a href="course-detail.html">
                                    <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html">
                                        <h2>{{ course.name }}</h2>
                                    </a>
                                    <span class="fl">時長:<i class="key">{{ course.learn_times }}</i></span>
                                    <span class="fr">學習人數:{{ course.students }}&nbsp;&nbsp;</span>
                                </div>
                                <div class="bottom">
                                    <a href="course-detail.html"><span class="fl">來自{{ course.course_org.name }}</span></a>
                                    <span class="star fr  notlogin
                                        " data-favid="15">
                                        {{ course.fav_nums }}
                                    </span>
                                </div>
                            </div>
                            {% endfor %}
                    </div>
                    <div class="pageturn">
                        <ul class="pagelist">
                            {% if all_courses.has_previous %}
                                <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一頁</a></li>
                            {% endif %}

                            {% for page in all_courses.pages %}
                                {% if page %}
                                    {% ifequal page all_courses.number %}
                                        <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                    {% else %}
                                        <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                    {% endifequal %}
                                {% else %}
                                    <li class="none"><a href="">...</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if all_courses.has_next %}
                                <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一頁</a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
                </div>
            </div>
            <div class="right layout">
                <div class="head">熱門課程推薦</div>
                <div class="group_recommend">
                    {% for hot_course in hot_courses %}
                    <dl>
                        <dt>
                            <a target="_blank" 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 學著寫了一下,終於搞定了,順便分享一下!taglib是tp框架自定義標簽功能,如果你用過cms,肯定見過類似: 或者: 這樣的操作,這對於開發工作是挺方便的,所以覺得有必要看下tp的taglib,教程如下:1 、在common(我是在common,你自己看,反正是用命名空間載入)里新建目錄tagli ...
  • 簡介 CDN,Content Distribute Network,可以直譯成內容分髮網絡,CDN解決的是如何將數據快速可靠從源站傳遞到用戶的問題。用戶獲取數據時,不需要直接從源站獲取,通過CDN對於數據的分發,用戶可以從一個較優的伺服器獲取數據,從而達到快速訪問,並減少源站負載壓力的目的。 動機 ...
  • 推導表達式其實就是簡化一些迴圈判斷操作等 生成一個數字1-10的列表,可以有多少種方法? 現在看下推導表達式 有些人,可能會說,直接range( 1, 11 )就好了,多此一舉,如果我們要篩選出奇數? 當然,range依然能夠做到: 那,如果要得到偶數,需要遍歷每一項,判斷 他等價於如下的推導表達式 ...
  • 自 JDK5 推出以來,註解已成為Java生態系統不可缺少的一部分。雖然開發者為Java框架(例如Spring的@Autowired)開發了無數的自定義註解,但編譯器認可的一些註解非常重要。 在本文中,我們將看到5個Java編譯器支持的註解,並瞭解其期望用途。順便,我們將探索其創建背後的基本原理,圍 ...
  • Java Web學習 一、搭建java web開發環境: (1)安裝jdk (2)安裝Tomcat伺服器(Apache的開源項目),安裝Tomcat並設置環境變數 (3)安裝EclipseEE(或者MyEclipse) 二、WEB-INF安全目錄介紹(只有伺服器可以訪問) (1)web.xml文件( ...
  • 這篇文章主要是為了溫習下平衡二叉樹,同時添加了樹型列印的介面,讓平衡二叉樹的添加和刪除更容易理解。 接下來的篇幅很長,需要有很多的耐心,做好了準備接下來往下看吧。 通俗的來說: 二叉樹就是節點度最大為2的樹,也就是最多包含兩個子樹,左子樹和右子樹,包含了空樹。 二叉排序樹(Binary Sort T ...
  • 一.java.util.logging.Logger簡介 java.util.logging.Logger不是什麼新鮮東西了,1.4就有了,可是因為log4j的存在,這個logger一直沉默著, 其實在一些測試性的代碼中,jdk自帶的logger比log4j更方便。 二.Logger的級別 比log ...
  • c++中自帶了一些非常強大卻鮮為人知的功能庫—pd_ds庫 裡面含有紅黑樹(rb_tree),哈希表(gp_hash_table),可持久化平衡樹(rope)等超強數據結構 但是有一件非常令人頭痛的事情—頭文件太長了!根本背不過! 不過前些日子看到一位大佬的代碼 他引用了這樣一個頭文件 不查不知道, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...