（項目）線上教育平臺（八）

来源:https://www.cnblogs.com/Sweltering/archive/2018/11/18/9978831.html
-Advertisement-
Play Games

十、課程詳情頁功能 1、課程列表頁面 1.1 前端頁面配置 將前端頁面course-list.html放到templates目錄下， 課程相關的頁面大致和base.html頁面的機構一致，繼承這個頁面即可，重寫block部分： 1.2 課程列表介面 在course/views.py文件中編寫課程相關 ...


十、課程詳情頁功能

1、課程列表頁面

1.1 前端頁面配置

　　將前端頁面course-list.html放到templates目錄下，

　　課程相關的頁面大致和base.html頁面的機構一致，繼承這個頁面即可，重寫block部分：

1.2 課程列表介面

　　在course/views.py文件中編寫課程相關的介面：

1 from django.views.generic import View
2 
3 # Create your views here.
4 
5 class CourseListView(View):
6     """課程列表頁"""
7     def get(self, request):
8         return render(request, 'course-list.html')

　　首先在MxOnline/urls.py配置課程的一級路由：

1 urlpatterns = [
2     path('course/', include('course.urls', namespace='course')),  # 課程
3 ]

　　然後在course下新建urls.py文件，添加課程列表的路由：

 1 from django.urls import path
 2 
 3 from .views import CourseListView
 4 
 5 
 6 app_name = 'course'
 7 
 8 urlpatterns = [
 9     path('list/', CourseListView.as_view(), name='course_list'),  # 課程列表
10 ]

　　現在在index.html頁面修改跳轉到公開課頁面（課程列表頁）的url：

　　在首頁點擊公開課即可跳轉到課程列表頁。

　　完善課程列表介面：

1 class CourseListView(View):
2     """課程列表頁"""
3     def get(self, request):
4         # 獲取所有的課程
5         all_courses = Course.objects.all()
6         
7         return render(request, 'course-list.html', {
8             'all_courses': all_courses
9         })

　　修改課程列表頁面的前端顯示代碼：

1.3 分頁功能

　　在課程列表介面中完善分頁邏輯：

 1 class CourseListView(View):
 2     """課程列表頁"""
 3     def get(self, request):
 4         # 獲取所有的課程
 5         all_courses = Course.objects.all()
 6 
 7         # 分頁
 8         try:
 9             page = request.GET.get('page', 1)
10         except PageNotAnInteger:
11             page = 1
12         p = Paginator(all_courses, 3, request=request)
13         courses = p.page(page)
14 
15         return render(request, 'course-list.html', {
16             'all_courses': courses
17         })

　　修改課程列表頁面的分頁代碼，在這之前在課程迭代顯示的代碼上需要加上object_list：

1.4 排序功能

　　在課程列表介面中完善排序的邏輯（根據學習人數和點擊數排序）：

 1 class CourseListView(View):
 2     """課程列表頁"""
 3     def get(self, request):
 4         # 獲取所有的課程
 5         all_courses = Course.objects.all()
 6 
 7         # 排序（學習人數，點擊數）
 8         sort = request.GET.get('sort', '')
 9         if sort:
10             if sort == 'students':
11                 all_courses = all_courses.order_by('-students')
12             elif sort == 'hot':
13                 all_courses = all_courses.order_by('-click_nums')
14 
15         # 分頁
16         try:
17             page = request.GET.get('page', 1)
18         except PageNotAnInteger:
19             page = 1
20         p = Paginator(all_courses, 3, request=request)
21         courses = p.page(page)
22 
23         return render(request, 'course-list.html', {
24             'all_courses': courses,
25             'sort': sort
26         })

　　然後修改前端排序選項選中效果的代碼：

1.5 熱門課程推薦功能

　　在課程列表介面中完善熱門課程推薦邏輯：

 1 class CourseListView(View):
 2     """課程列表頁"""
 3     def get(self, request):
 4         # 獲取所有的課程
 5         all_courses = Course.objects.all()
 6 
 7         # 排序（學習人數，點擊數）
 8         sort = request.GET.get('sort', '')
 9         if sort:
10             if sort == 'students':
11                 all_courses = all_courses.order_by('-students')
12             elif sort == 'hot':
13                 all_courses = all_courses.order_by('-click_nums')
14 
15         # 熱門課程
16         hot_courses = all_courses.order_by('-click_nums')[:2]
17 
18         # 分頁
19         try:
20             page = request.GET.get('page', 1)
21         except PageNotAnInteger:
22             page = 1
23         p = Paginator(all_courses, 3, request=request)
24         courses = p.page(page)
25 
26         return render(request, 'course-list.html', {
27             'all_courses': courses,
28             'sort': sort,
29             'hot_courses': hot_courses
30         })

　　修改課程列表頁面熱門課程推薦顯示的代碼：

2、課程詳情頁面

2.1 前端頁面配置

　　將前端頁面course-detail.html放到templates目錄下，

　　繼承base.html頁面，重寫block部分：

2.2 課程詳情介面

1 class CourseDetailView(View):
2     """課程詳情"""
3     def get(self, request, course_id):
4         return render(request, 'course-detail.html')

　　配置url：

1 from .views import CourseDetailView
2 
3 urlpatterns = [
4     re_path('course/(?P<course_id>\d+)/', CourseDetailView.as_view(), name='course_detail'),  # 課程詳情
5 ]

　　修改課程列表頁中點擊課程進入課程詳情頁面的url：

　　現在點擊課程之後，就可以進入課程詳情頁面。

　　前端顯示需要有課程類別，章節數和學習這門課程的用戶信息，需要在課程model中增加這三個數據的欄位：

 1 class Course(models.Model):
 2     """課程"""
 3     DEGREE_CHOICES = (
 4         ('cj', '初級'),
 5         ('zj', '中級'),
 6         ('gj', '高級')
 7     )
 8 
 9     name = models.CharField('課程名', max_length=50)
10     desc = models.CharField('課程描述', max_length=300)
11     detail = models.TextField('課程詳情')
12     degree = models.CharField('課程難度', choices=DEGREE_CHOICES, max_length=2)
13     learn_times = models.IntegerField('學習時長（分鐘數）', default=0)
14     students = models.IntegerField('學習人數', default=0)
15     fav_nums = models.IntegerField('收藏人數', default=0)
16     click_nums = models.IntegerField('點擊數', default=0)
17     image = models.ImageField('封面圖', upload_to='courses/%Y/%m', max_length=100)
18     course_org = models.ForeignKey(CourseOrg, verbose_name='所屬機構', on_delete=models.CASCADE, null=True, blank=True)
19     category = models.CharField('課程類別', max_length=20, default='')
20     add_time = models.DateTimeField('添加時間', default=datetime.now)
21 
22     class Meta:
23         verbose_name = '課程'
24         verbose_name_plural = verbose_name
25 
26     # 獲取章節數
27     def get_zj_nums(self):
28         return self.lesson_set.all().count()
29 
30     # 獲取學慣用戶
31     def get_learn_users(self):
32         return self.usercourse_set.all()[:5]
33 
34     def __str__(self):
35         return self.name

　　遷移資料庫。

　　完善課程詳情介面：

 1 class CourseDetailView(View):
 2     """課程詳情"""
 3     def get(self, request, course_id):
 4         # 根據前端的課程id獲取該課程
 5         course = Course.objects.get(id=int(course_id))
 6 
 7         # 只要點擊該課程，點擊數就加1
 8         course.click_nums += 1
 9         course.save()
10 
11         return render(request, 'course-detail.html', {
12             'course': course
13         })

　　修改課程詳情頁面數據顯示的代碼：

　　刷新頁面，可以看到這個課程的詳細信息。

　　右側授課機構要顯示機構教師的數量，所以需要在機構的model中添加一個獲取教師數量的函數：

 1 class CourseOrg(models.Model):
 2     """課程機構"""
 3     CATEGORY_CHOICES = (
 4         ('pxjg', '培訓機構'),
 5         ('gx', '高校'),
 6         ('gr', '個人')
 7     )
 8     name = models.CharField('機構名稱', max_length=50)
 9     category = models.CharField('機構類別', max_length=20, choices=CATEGORY_CHOICES, default='pxjg')
10     desc = models.TextField('機構描述')
11     students = models.IntegerField('學習人數', default=0)
12     course_nums = models.IntegerField('課程數', default=0)
13     click_nums = models.IntegerField('點擊數', default=0)
14     fav_nums = models.IntegerField('收藏數', default=0)
15     image = models.ImageField('封面圖', upload_to='org/%Y/%m', max_length=100)
16     address = models.CharField('地址', max_length=150)
17     city = models.ForeignKey(CityDict, verbose_name='所在城市', on_delete=models.CASCADE)
18     add_time = models.DateTimeField('添加時間', default=datetime.now)
19 
20     class Meta:
21         verbose_name = '課程機構'
22         verbose_name_plural = verbose_name
23 
24     # 獲取教師數量
25     def get_teacher_nums(self):
26         return self.teacher_set.all().count()
27 
28     def __str__(self):
29         return self.name

　　修改課程詳情頁面右側機構的顯示代碼：

　　右側相關課程推薦，那麼如何判斷推薦的課程呢，需要給課程添加一個tag欄位，如果該欄位相同，那就推薦相同的tag的課程即可，在課程的model中添加欄位：

 1 class Course(models.Model):
 2     """課程"""
 3     DEGREE_CHOICES = (
 4         ('cj', '初級'),
 5         ('zj', '中級'),
 6         ('gj', '高級')
 7     )
 8 
 9     name = models.CharField('課程名', max_length=50)
10     desc = models.CharField('課程描述', max_length=300)
11     detail = models.TextField('課程詳情')
12     degree = models.CharField('課程難度', choices=DEGREE_CHOICES, max_length=2)
13     learn_times = models.IntegerField('學習時長（分鐘數）', default=0)
14     students = models.IntegerField('學習人數', default=0)
15     fav_nums = models.IntegerField('收藏人數', default=0)
16     click_nums = models.IntegerField('點擊數', default=0)
17     image = models.ImageField('封面圖', upload_to='courses/%Y/%m', max_length=100)
18     course_org = models.ForeignKey(CourseOrg, verbose_name='所屬機構', on_delete=models.CASCADE, null=True, blank=True)
19     category = models.CharField('課程類別', max_length=20, default='')
20     tag = models.CharField('標簽', max_length=10, default='')
21     add_time = models.DateTimeField('添加時間', default=datetime.now)
22 
23     class Meta:
24         verbose_name = '課程'
25         verbose_name_plural = verbose_name
26 
27     # 獲取章節數
28     def get_zj_nums(self):
29         return self.lesson_set.all().count()
30 
31     # 獲取學慣用戶
32     def get_learn_users(self):
33         return self.usercourse_set.all()[:5]
34 
35     def __str__(self):
36         return self.name

　　然後在課程詳情介面中添加課程推薦的邏輯：

 1 class CourseDetailView(View):
 2     """課程詳情"""
 3     def get(self, request, course_id):
 4         # 根據前端的課程id獲取該課程
 5         course = Course.objects.get(id=int(course_id))
 6 
 7         # 只要點擊該課程，點擊數就加1
 8         course.click_nums += 1
 9         course.save()
10 
11         # 課程推薦，根據tag判斷
12         tag = course.tag
13         if tag:
14             relate_courses = Course.objects.filter(tag=tag)[1:3]
15         else:
16             relate_courses = []
17 
18         return render(request, 'course-detail.html', {
19             'course': course,
20             'relate_courses': relate_courses
21         })

　　修改課程詳情頁面右側推薦課程顯示的代碼：

2.3 課程和機構收藏功能

　　在課程詳情介面中添加收藏的邏輯：

 1 class CourseDetailView(View):
 2     """課程詳情"""
 3     def get(self, request, course_id):
 4         # 根據前端的課程id獲取該課程
 5         course = Course.objects.get(id=int(course_id))
 6 
 7         # 只要點擊該課程，點擊數就加1
 8         course.click_nums += 1
 9         course.save()
10 
11         # 課程推薦，根據tag判斷
12         tag = course.tag
13         if tag:
14             relate_courses = Course.objects.filter(tag=tag)[1:3]
15         else:
16             relate_courses = []
17 
18         # 課程收藏，機構收藏
19         has_fav_course = False
20         has_fav_org = False
21         # 未登錄由前端跳轉到登錄頁面
22         if request.user.is_authenticated:
23             if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1):
24                 has_fav_course = True
25             if UserFavorite.objects.filter(user=request.user, fav_id=course.course_org.id, fav_type=2):
26                 has_fav_org = True
27 
28         return render(request, 'course-detail.html', {
29             'course': course,
30             'relate_courses': relate_courses,
31             'has_fav_course': has_fav_course,
32             'has_fav_org': has_fav_org
33         })

　　將base.html頁面中的{% block custom_js %}{% endblock %}，放到最下麵的位置，因為是js代碼，要最後載入，然後在課程詳情頁面中重寫ajax的js代碼：

　　然後修改課程詳情頁面課程收藏，機構收藏的代碼：

 


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

-Advertisement-
Play Games
更多相關文章
  • 基於C++ Qt實現的紅色警戒3修改器(Github開源)
    前言 這部修改器製作有一段時間了，但是一直沒出教程。今天利用周末空閑寫篇教程，給後來者指路的同時也加深自己對游戲修改器的理解，大佬就隨便看看吧 瀏覽了一下網路，形形色色的單機游戲修改器教程，但是基本只實現了一到兩個功能，GUI圖形界面也沒有。網站上能下載到的實現很多功能的修改器卻又不開源，對新手不夠 ...
  • 數字信號處理專題（2）——利用FPGA進行基本運算及特殊函數定點運算
    一、前言 FPGA以擅長高速並行數據處理而聞名，從有線/無線通信到圖像處理中各種DSP演算法，再到現今火爆的AI應用，都離不開卷積、濾波、變換等基本的數學運算。但由於FPGA的硬體結構和開發特性使得其對很多演算法不友好，之前本人零散地總結和轉載了些基本的數學運算在FPGA中的實現方式，今天做一個系統的總 ...
  • Python中的tuple
    tuple_lst = [ ('元祖容器可哈希',), ('元祖中的元素不可直接修改',), ('元祖可迭代',), ('查',), ('練習',), ] 元祖容器可哈希 >>>hash((1,)) 3430019387558 元祖中的元素不可直接修改 >>>tu = (1, 2, 3, [4]) ...
  • configparser
    一、configparser 該模塊適用格式與windows ini文件類似的配置文件，可以包含一個或多個節（section），每個節可以有多個參數（鍵=值） 二、創建對象 三、寫入到文件 四、讀取文件信息 1. 讀取文件 2. 讀取章節信息 DEFAULT章節特殊，它是給每個章節都配備的信息 3. ...
  • Python3 jupyter notebook 伺服器搭建
    1. jupyter notebook 安裝 創建 jupyter 目錄 創建獨立的 Python3 運行環境，並激活進入該環境 安裝 jupyter 2. jupyter notebook 配置 創建 notebooks 目錄 用於保存網頁端創建的 ipynb 文件。 生成配置文件 生成的配置文件 ...
  • php中==和===的含義及區別
    比較兩個變數的值和類型；==比較兩個變數的值，不比較數據類型。 比如 $a = '123'; $b = 123; $a $b為假； $a == $b為真； 有些情況下不能使用==，可以使用 ，比如： <?php $a = 'abc'; $b= 'a'; if(strpos($a,$b) false) ...
  • shelve
    一、 shelve shelve提供python的持久化操作。 持久化：把數據寫到硬碟上 shelve操作與字典非常類似 文件關閉後無法讀取其內容 遍歷： 二、 writeback 把修改的內容自動回寫到文件中 1. 修改內容 shelve.open()預設writeback=False，所以，在默 ...
  • ORM查詢之基於對象的正向查詢與反向查詢
    一、為什麼有正向查詢和反向查詢？ 舉例有兩張表，一張表叫書籍表，一張表叫出版社表，他們關係是一對多的關係，書籍是一，出版社是多，因為一本書應該只有一個出版社對應，而出版社可以有多本書對應。 那麼在實際代碼中定義他們關係的類中，設置外鍵的那個屬性"publisher"是在多的那個類中，也就是在書籍這個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類