对应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. 生产者消费者模式做一个golang的定时器

    在主程序启动的时候开一个goroutine作为消费者,用管道连接生产者和消费者,消费者处于无限循环,从管道中获取channel传过来定时event 注意:channel在消费者创建的时候就连通生产者和 ...

  2. springboot中的任务(异步任务--定时任务--邮件任务)

    1.pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  3. ASP.NET文件上传大小限制

    上传限制 我们以为的文件大小限制 我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web. ...

  4. win8上部署.net4.0程序到iis

    在win8.1上默认的iis版本为8.5版,不做任何配置回报3个错误, 一下是错误提示内容及解决方案 1>HTTP 错误 404.3 – Not Found由于扩展配置问题而无法提供您请求的页面 ...

  5. [Selenium] 针对下拉菜单出现之后又立马消失的问题,通过Javascript改变元素的可见属性

    public void clickDateDropDownButton() { SeleniumUtil.jsClick(driver, page.getDateDropdownButtonOfInv ...

  6. 我读《从Paxos到zookeeper分布式一致性原理与实践》

    从年后拿到这本书开始阅读,到准备系统分析师考试之前,终于读完了一遍,对Zookeeper有了一个全面的认识,整本书从理论到应用再到细节的阐述,内容安排从逻辑性和实用性上都是很优秀的,对全面认识Zook ...

  7. docker 初始化执行.sh修改.properties文件

    1.testmysql.properties rootuser=aarootpass=bb 2.用环境变量修改testmysql.properties里面的rootuser和rootpass的值的脚本 ...

  8. BZOJ 1503 郁闷的出纳员 (treap)

    1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 13370  Solved: 4808[Submit][Stat ...

  9. Long-distance navigation and magnetoreception in migratory animals(迁徙动物中的长距离导航和磁感应)

    摘要:For centuries, humans have been fascinated by how migratory animals find their way over thousands ...

  10. 用 pyqt4 编写的一个翻译小工具

    有时候我们在开发时遇到一些陌生的英文单词或者不容易看出某些长句的中文意思时该怎么办呢?打开桌面上的翻译软件?打开浏览器里收藏着的翻译网址或者直接贴上百度的搜索框去查?这些方法固然可以,还很常见,但如果 ...