对应github地址:第10天

 
一. 课程列表页
 
1. 拷贝course-list.html到templates目录中
2. 编写url和view
在courses/views.py中新加
 
在mxonline/urls.py中加入
新建courses/urls.py
 
 
3. 修改course-list.html
然后访问http://127.0.0.1:8000/course/list即可访问相应页面,但是此时是没样式的,我们发现course-list.html和org-list.html样式其实是相似的,可以拷贝一下模板标签,然后修改一下内容
 
F12找到课程展示内容的代码,把代码块拷贝到{% block content %}中
 
 
4. 动态展示课程
网页基本结构如下,class="left"是课程的展示部分,class="right"是热门课程推荐部分
 
每一个课程展示都是class="box"的<div>,所以只须用一个for循环就好
 
 
5. 分页功能
 
5.1 课程分页
把organization/views.py的分页功能拷贝到courses/views.py中,稍微修改下
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
 
修改course-list.html中的for循环,此时的all_course已经不是queryset,而是purepage对象,所以有一个object_list函数用于分页
 
 
5.2 添加页码
把org-list.html中页码的代码拷贝过来,把all_orgs改成all_courses就好。 因为两个页面的css和html很相似
 
 
 
6. 按要求进行搜索排序
 
6.1 拷贝机构OrgView中的排序代码到courses/views.py->CourseListView中,并在放在分页代码前面,修改下变量名
 
并且把sort放到return render中
 
 
6.2 修改course-list.html导航栏代码
 
修改课程默认按添加顺序排序排序,这样html中"最新"代码中sort为空即可
 
 
 
7. 页面右侧-热门课程推荐
CourseListView中定义新的变量hot_courses,并且放在return render中
 
在course-list.html中搜索热门课程,把热门课程的<dl>标签块放在for循环中
 
这里要注意的是{{ hot_course.get_degree_display }}
这里的难度是一个choice选项,如果直接写hot_course.degree,会取出在数据库保存的"cj","zj","gj",如果想取到后面的文字,在django就必须写上面的固定写法
 
 
 
 
 
 
二.  课程详情页1
 
1. 拷贝course-detail.html到templates目录
2. 模板继承
把course-list.html中的内容拷贝过来,替换面包屑和content的模板内容,在course-detail.html中面包屑代码后面有两个section代码块,放在content模板标签内
 
3. 配置view和url
courses/views.py中新写
 
courses/urls.py中添加
 
4. 为了能够在course-list.html中点击课程可以跳转到相应课程详情页,需要修改href标签内容,原先所有的href="course-detail.html"都替换为如下的url模板标签
 
因为我们传了一个course.id到'course:course_detail',所以需要修改CourseDetailView的get函数里的参数,在其中加上参数course_id(从courses/urls.py中获取的url部分内容)
 
 
5. 课程详情页中动态获取课程信息
 
5.1 继续修改课程view,从数据库中找到指定id的课程信息并传到前端页面
 
 
5.2 修改course-detail.html中的静态地址为标签变量
 
1)需要注意的是课程章节数的信息之前在model中并没有定义,但是在Lesson类中有一个外键关联到Course,而在Lesson中有相应的章节信息,那么可以在courses/models.py-> class Course中定义一个函数
之后可在course-detail.html中直接调用
 
2)课程类别原先在定义model时也没定义,所以加一个字段,然后进行数据迁移
 
3)学习用户和章节数相似,也需要在courses/models.py中定义一个函数,原因是在operation/models.py中的UserCourse有一个外键关联到Course
 
4)course-detail.html相关代码修改如下
 
 
注意:
{{ user_course.user.image }}是因为在UserCourse中有一个外键user关联到UserProfile,而在UserProfile中有一个image字段
 
 
6. 在后台用户管理/用户课程中添加数据,以及更改用户头像,
 
7. 点击课程后,后台课程属性click_time加1
course/views.py-> class CourseDetailView
 
 
 
 

mxonline实战10,课程列表页,课程详情页1的更多相关文章

  1. 如何用Baas快速在腾讯云上开发小程序-系列4:实现客户侧商品列表、商品详情页程序

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/431172001487671163 来源:腾云阁 h ...

  2. mxonline实战13,授课讲师列表页,详情页,index页面全局导航

    对应github地址:第13天   把teacher-list.html和teacher-detail.html拷贝过来   一. 授课讲师列表页   1. 修改html文件 把org-list.ht ...

  3. 25、Django实战第25天:讲师详情页

    1.复制teacher-detail.html到templates目录下 2.编辑teacher-detail.html,继承base.html 3.编辑organization.view.py cl ...

  4. keep-alive 实现从列表页到详情页,然后再回到列表页并保持原来列表页的页码数,并且只刷新数据

    思路: keep-alive应用场景介绍 <keep-alive> 不会在函数式组件中正常工作,因为它们没有缓存实例.结合router,缓存部分页面 activated 和 deactiv ...

  5. Meteor 从一个列表页进入详情页怎样高速显示详情

    无论是做android开发,还是做网页web开发,都 会有列表,都须要点击列表进入列表项的详情页面,查看具体信息,能常情况下,我们都是将这一列表项的id传到详情页,由详情页再到数据库查询具体信息. 在 ...

  6. Flask实战第62天:帖子详情页布局

    在templates/front/下创建详情页面front_pdetail.html 编辑front.views.py创建详情页的视图函数 from flask import abort ... @b ...

  7. vue keep-alive从列表页进入详情页,再返回列表页时,还是之前滚动的位置

    //router.js { path: '/oppo-music', component: () => import('@/views/OppoMusic.vue'), meta: { titl ...

  8. mui列表跳转到详情页优化方案

    原理 因为列表页到详情页是多对一的形式,即列表页的多条数据列表对应的是一个详情页,只是数据不同而:因此,可以在加载列表页时预加载详情页,即创建一个详情页的webview,但是不显示出来,点击列表的时候 ...

  9. Python Django CMDB项目实战之-1如何开启一个Django-并设置base页、index页、文章页面

    1.环境 win10 python 2.7.14 django 1.8.2 需要用到的依赖包:MySQLdb(数据库的接口包).PIL/pillow(处理图片的包) 安装命令: pip install ...

随机推荐

  1. 博客搬家到blog.wu8685.com

    博客园算是我最开始来的地方了吧,当时还在学校,为了找工作会看一些理论方面的东西,所以写的都是偏理论的心得. 后来参加了工作,开始忙起来,也就没有时间来更新了.其实忙都是借口,这点还是需要反思的. 大概 ...

  2. [Selenium]刷新页面 Refresh page

    5 different ways to refresh a webpage using Selenium Webdriver   Here are the 5 different ways, usin ...

  3. 【美食技术】家庭自制DIY鸡蛋饼和疙瘩汤早餐视频教程

    鸡蛋饼制作方法 食材准备面粉 150g鸡蛋饼  鸡蛋饼鸡蛋 2个盐 适量水 适量(约300ml)油 20g荵花适量也可根据自己喜好准备一些调味料. 做法 鸡蛋饼是一种家常点心,做法很多,这里提供3种. ...

  4. 斜杠反斜杠,去空格\xa0,连接函数join()

    1斜杠反斜杠 斜杠:/.反斜杠:\. 反斜杠\,在windows系统中用来表示目录. 而在unix系统中,/表示目录.由于web遵循unix命名,所以在网址(URL)中,/表示目录. 在unix系统中 ...

  5. Text Relatives II

    [Text Relatives II] When your app determines that the user has requested the edit menu—which could b ...

  6. RabbitMQ的一些说明

    下载安装包后,运行会提示你下再ErLang环境,根据提示下载安装就可以了 RabbitMQ 自己的插件包中带一 个WebUI的管理工具,在RabbitMQ安装目录(bin)下运行 rabbitmq-p ...

  7. MYSQL - JSON串中查找key对应的值

    1.建表 -- 建表 drop table if exists ta_product2; CREATE TABLE ta_product2( id int primary key auto_incre ...

  8. HTML5 Canvas之猜数字游戏

    主要的内容描述的是如何渲染一个矩形的边框和填充背景,以及文字. 代码中有详细的注释: 效果图: 以下是代码: <!DOCTYPE html> <html lang="cn& ...

  9. OpenSSL命令---crl2pkcs7

    用途: 本命令根据CRL或证书来生成pkcs#7消息. 用法: openssl crl2pkcs7 [-inform PEM|DER ] [-outform PEM|DER ] [-in filena ...

  10. jenkin+docker+git持续集成环境搭建

    1.安装Jenkins(需要在Jenkins容器中安装maven,java环境不用安装,Jenkins初次启动时会自动安装) 参考:docker中安装Jenkins 2.配置git 3.安装docke ...