1、进入xadmin添加测试数据(教师、课程)

2、把以下4个前端页面复制到templates中

先打开这几个页面分析,它们和之前的课程机构列表页是不一样的机构,且没有共同的部分,但是这4个页面却是类似的,因此它们不能基于之前的base.html来做模板,我们再创建一个模板文件org_base.html

3、把org-detail-homepage.html的内容拷贝到org_base.html中

4、编辑org_base.html,替换静态文件(css/js/images)

5、把会变化的内容用block包起来

6、清空org-detail-homepage.html,把org_base.html中用block包起来的部分拷贝到org-detail-homepage.html中

机构详情页,分四个页面,现在我们来完成机构首页这个版块,即org-detail-homepage.html, 前端的页面布局在上面我们已经配置好了

第一步,还是先把这个页面跑起来,当我们点击机构的图片或者名字的时候会跳转到页面

编辑organization.views.py

  1. class OrgHomeView(View):
  2. def get(self, request, org_id):
  3. course_org = CourseOrg.objects.get(id=int(org_id))
  4. all_courses = course_org.course_set.all()[:3] #这里是django的用法,利用外键取出课程,这里取出前3个
  5. all_teachers = course_org.teacher_set.all()[:1]
  6. return render(request, 'org-detail-homepage.html', {
  7. 'all_courses': all_courses,
  8. 'all_teachers': all_teachers,
  9. 'course_org': course_org,
  10. })

配置一条url,编辑organization.urls.py

  1. ...
  2. from .views import OrgHomeView
  3.  
  4. urlpatterns = [
  5. ...
  6. url(r'^home/(?P<org_id>\d+)/$', OrgHomeView.as_view(), name='org_home'), #需要传递课程机构id的参数
  7. ]  

当然,我们需要修改课程机构图片和名字对应的链接,编辑org-list.html

到此,我们点击机构封面或者名字就能够成功跳转到该机构首页了。

现在来编辑org-detail-homepage.html,把内容动态的展示出来

编辑org_base.html


机构课程

编辑org-detail-course.html, 把<div class="right companycenter layout..">这部分保留,其他清空,如下

编辑organizatios.views.py

  1. class OrgCourseView(View):
  2. def get(self, request, org_id):
  3. course_org = CourseOrg.objects.get(id=int(org_id))
  4. all_courses = course_org.course_set.all()
  5. return render(request, 'org-detail-course.html', {
  6. 'all_courses': all_courses,
  7. 'course_org': course_org
  8. })

配置一条url,编辑organization.urls.py

  1. ...
  2. from .views import OrgCourseView
  3.  
  4. urlpatterns = [
  5. ...
  6. url(r'^course/(?P<org_id>\d+)/$', OrgCourseView.as_view(), name='org_course'),
  7. ]

把org_base.html中left部分的链接改掉

编辑org-detail-course.htm动态展示课程

现在我们去浏览器访问,机构首页和机构课程已经能够正常展示数据了,但是他们的导航还存在一个问题,当我们点击机构课程,它并没有变成一个选中的状态。这个其实很简单,我们只能需要再对应的 view中传递一个参数,来判断当前的页面是哪一个

编辑org_base.html

到此。2个页面已经完成了,其他2个页面(机构介绍和机构讲师也是同样的流程),这里就不再叙述了...

提示:机构讲师那里有个课程数,先不用配置,后面再弄

17、Django实战第17天:机构详情展示的更多相关文章

  1. mxonline实战9,我要学习功能块,机构详情展示,收藏功能

    对应github地址:第9天   一. 实现我要学习功能

  2. Django实战(17):ajax !

    现在让我们来通过ajax请求后台服务.当然首选要实现后台服务.关于“加入购物车”,我们需要的服务是这样定义的: url:    http://localhost:8000/depotapp/API/c ...

  3. 使用 TypeScript & mocha & chai 写测试代码实战(17 个视频)

    使用 TypeScript & mocha & chai 写测试代码实战(17 个视频) 使用 TypeScript & mocha & chai 写测试代码实战 #1 ...

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

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

  5. 从零开始部署Django生产环境(适用:《跟老齐学Python Django实战》)

    <跟老齐学Python Django实战>作为市面上少有的Django通俗实战书籍,给了我学习Django很大的帮助.作为一名新入门的菜鸟,全书我重复练习了至少三遍,每次都有新的收获. 前 ...

  6. tail -fn 1000 test.log | grep '关键字' 按照时间段 sed -n '/2014-12-17 16:17:20/,/2014-12-17 16:17:36/p' test.log /var/log/wtmp 该日志文件永久记录每个用户登录、注销及系统的启动、停机的事件

    Linux 6种日志查看方法,不会看日志会被鄙视的 2020-02-11阅读 7.3K0   作为一名后端程序员,和Linux打交道的地方很多,不会看Linux日志,非常容易受到来自同事和面试官的嘲讽 ...

  7. Django+Ajax+Mysql实现数据库数据的展示

    最近老师让搞一个系统,仅仅展示一下数据库的数据 在做海底捞时,是交接的师兄的项目,用的语言是java,框架是SSM(Spring.SpringMVC.MyBatis),这次我准备用Python写,前端 ...

  8. 9.17 Django ORM分组

    2018-9-17 19:53:22 预习:http://www.cnblogs.com/liwenzhou/p/8343243.html 新买个蓝牙挂耳耳机,感觉不错! 放上代码  笔记什么的明天继 ...

  9. 20、Django实战第20天:课程详情页

    1.把course-detail.html复制到templates目录下 2.编辑course-detail.html,分析页面,继承base.html 3.编辑courses.views .... ...

随机推荐

  1. [NOI2016 D2T1]区间

    题目大意:在数轴上有$n$个闭区间$[l_1,r_1],[l_2,r_2],...,[l_n,r_n]$.现在要从中选出 $m$ 个区间,使得这 $m$ 个区间共同包含至少一个位置.输出被选中的最长区 ...

  2. [Leetcode] word break 拆分词语

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  3. 【NOIP模拟赛】与非 乱搞

    biubiu~~~ 正解是线段树维护真值表,但是我觉得对于这道题来说乱搞就够了....... 我们发现如果我们把每一个数都一开始取反就会发现对于最后结果来说 x=x^1,x nand x=x|x ,x ...

  4. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  5. 活泼的CSS 3动态气泡按钮制作

    这一次,我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮.通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名.没有必要JavaScript.四色主 ...

  6. Nginx support TCP Load balance

    1. Install nginx package 2. edit nginx configuration file [root@ip- nginx]# more nginx.conf user ngi ...

  7. JavaScript学习笔记——浅拷贝、深拷贝

    参考自:http://www.cnblogs.com/yichengbo/archive/2014/07/10/3835882.html 一.数组的深浅拷贝 在使用JavaScript对数组进行操作的 ...

  8. jquery学习之add()

    解读: add() 将元素添加到匹配元素的集合中 例1: <!DOCTYPE html> <html> <head> <style> div { wid ...

  9. Spring - IoC(7): 延迟实例化

    默认情况下,Spring IoC 容器启动后,在初始化过程中,会以单例模式创建并配置所有使用 singleton 定义的 Bean 的实例.通常情况下,提前实例化 Bean 是可取的,因为这样在配置中 ...

  10. 【洛谷 P2480】 [SDOI2010]古代猪文(中国剩余定理,Lucas定理)

    题目链接 这题出的有点nb,PKU: Pig Kingdom University , NOIP: National Olympics in Informatic of Pigs... 题意:求\(G ...