一、先添加教师
二、添加课程
由于,课程没有课程机构的外键,需要现在添加
同步到数据库
然后把4个静态页面拷贝到 templates
=========================================================
1. 建一个 org_base.html
2. 把 C:\Users\hlg\PycharmProjects\MxOnline\templates\org-detail-homepage.html 里面的内容全部拷贝到
C:\Users\hlg\PycharmProjects\MxOnline\templates\org_base.html
3. 建多个block
4.替换静态路径
C:\Users\hlg\PycharmProjects\MxOnline\templates\org_base.html
<!DOCTYPE html> <html> {% load staticfiles %} <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" > <title>{% block title %}机构首页{% endblock %}</title> <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'js/plugins/queryCity/css/cityLayout.css' %}"> {% block custom_css %} {% endblock %} <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script> <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script> {% block custom_js %} {% endblock %} </head> <body> <section class="headerwrap headerwrap2"> <header> <div class="header2 header"> <div class="top"> <div class="wp"> <div class="fl"> <p>联系方式:<b>3333333333</b></p> </div> <a style="color:white" class="fr registerbtn" href="register.html">注册</a> <a style="color:white" class="fr loginbtn" href="login.html">登录</a> </div> </div> <div class="middle companyheader"> <div class="wp"> <img class="fl" style="width: 112px;height: 103px" src="../media/org/2016/11/imooc.png"/> <div class="head fl"> <h1> 慕课网 <img src="../images/authentication.png"/> <img src="../images/gold.png"/> </h1> <p class="fl"> <span class="fl" style="margin-top:8px;color:#848484;">推荐指数: </span> <span class="precision company-credit" data-star-scope="5.0"></span> <span class="key">5.0</span> </p> </div> <div class="btn fr collectionbtn notlogin "data-favid="22" data-fav-type="1"> 收藏 </div> </div> </div> </div> </header> </section> <section> <div class="wp"> <ul class="crumbs"> <li><a href="index.html">首页</a>></li> <li><a href="org-list.html">课程机构</a>></li> <li>{% block page_path %}机构首页{% endblock %}</li> </ul> </div> </section> <section> <div class="wp list personal_list comp"> <div class="left"> <ul> <li class="active2"><a href="org-detail-homepage.html">机构首页</a></li> <li class=""><a href="org-detail-course.html">机构课程</a></li> <li class=""><a href="org-detail-desc.html">机构介绍</a></li> <li class=""><a href="org-detail-teachers.html">机构讲师</a></li> </ul> </div> {% block right_form %} <div class="right companycenter layout grouping" > <div class="head"> <h1>全部课程</h1> <a class="green fr more" href="org-detail-course.html">查看更多 > </a> </div> <div class="brief group_list"> <div class="module1_5 box"> <a href="course-detail.html"><img width="214" src="../media/courses/2016/11/mysql.jpg"/></a> <div class="des"> <a href="course-detail.html"><h2>django入门</h2></a> <span class="fl">课时:<i class="key">0</i></span> <span class="fr">参加人数:3</span> </div> <div class="bottom"> <span class="fl">慕课网</span> <span class="star fr notlogin " data-favid="13" data-fav-type="4"> 0 </span> </div> </div> <div class="module1_5 box"> <a href="course-detail.html"><img width="214" src="../media/courses/2016/11/540e57300001d6d906000338-240-135_mvvGYHL.jpg"/></a> <div class="des"> <a href="course-detail.html"><h2>django实战项目</h2></a> <span class="fl">课时:<i class="key">0</i></span> <span class="fr">参加人数:0</span> </div> <div class="bottom"> <span class="fl">慕课网</span> <span class="star fr notlogin " data-favid="13" data-fav-type="4"> 0 </span> </div> </div> <div class="module1_5 box"> <a href="course-detail.html"><img width="214" src="../media/courses/2016/12/python错误和异常.jpg"/></a> <div class="des"> <a href="course-detail.html"><h2>python错误和异常</h2></a> <span class="fl">课时:<i class="key">0</i></span> <span class="fr">参加人数:0</span> </div> <div class="bottom"> <span class="fl">慕课网</span> <span class="star fr notlogin " data-favid="13" data-fav-type="4"> 0 </span> </div> </div> </div> </div> <div class="right companycenter layout" > <div class="head"> <h1>机构教师</h1> <a class="green fr more" href="org-detail-teachers.html">查看更多 > </a> </div> <div class="diarys"> <div class="module5 share company-diary-box" style="padding:10px 0;"> <div class="left"> <img class="pic" src="../media/teacher/2016/11/aobama_CXWwMef.png"/> <p>昵称:bobby</p> </div> <div class="right"> <div class="top"> <div class="fl"> <a href=""><h1>java开发教程</h1></a> <span>发表于:2015-10-12</span> </div> </div> <div class="middle" style="border-bottom:0;">课程介绍</div> </div> </div> </div> </div> <div class="right companycenter layout" > <div class="head"> <h1>机构介绍</h1> <a class="green fr more" href="org-detail-desc.html">查看更多 > </a> </div> <div class="cont"> <p> </p><h1 class="ue_t" label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">[键入文档标题]</span></h1><p style="text-align:center;"><strong class="ue_t">[键入文档副标题]</strong></p><h3><span class="ue_t" style="font-family:幼圆">[标题 1]</span></h3><p class="ue_t" style="text-indent:2em;">对于“插入”选项卡上的库,在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t" style="text-indent:2em;"><img src="../media/courses/ueditor/57aa86a0000145c512000460_20161210234050_865.jpg" title="" alt="57aa86a0000145c512000460.jpg"/> </p><h3><span class="ue_t" style="font-family:幼圆">[标题 2]</span></h3><p><img src="http://api.map.baidu.com/staticimage?center=116.410899,39.863624&zoom=11&width=530&height=340&markers=116.404,39.915" width="530" height="340"/> </p><p class="ue_t" style="text-indent:2em;">在“开始”选项卡上,通过从快速样式库中为所选文本选择一种外观,您可以方便地更改文档中所选文本的格式。 您还可以使用“开始”选项卡上的其他控件来直接设置文本格式。大多数控件都允许您选择是使用当前主题外观,还是使用某种直接指定的格式。</p><h3><span class="ue_t" style="font-family:幼圆">[标题 3]</span></h3><p>2016-12-10</p><p class="ue_t">对于“插入”选项卡上的库,在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t"><br/> </p><p><br/></p><p><br/></p><a href="/company/desc/22/"><span class="green">[查看更多]</span></a></div> </div> {% endblock %} </section> <!--sidebar start--> <section> <ul class="sidebar"> <li class="qq"> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a> </li> <li class="totop"></li> </ul> </section> <!--sidebar end--> <!--header start--> </div> <!--弹出省省市--> <script src="{% static 'js/selectUi.js' %}" type='text/javascript'></script> <script type="text/javascript" src="{% static 'js/plugins/laydate/laydate.js' %}"></script> <script src="{% static 'js/plugins/layer/layer.js' %}"></script> <script src="{% static 'js/plugins/queryCity/js/public.js' %}" type="text/javascript"></script> <script type="text/javascript" src="{% static 'js/plugins/jquery.raty.js' %}"></script> <script type="text/javascript"> //收藏分享 //收藏分享 function add_fav(current_elem, fav_id, fav_type){ $.ajax({ cache: false, type: "POST", url:"/org/add_fav/", data:{'fav_id':fav_id, 'fav_type':fav_type}, async: true, beforeSend:function(xhr, settings){ xhr.setRequestHeader("X-CSRFToken", "5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy"); }, success: function(data) { if(data.status == 'fail'){ if(data.msg == '用户未登录'){ window.location.href="login.html"; }else{ alert(data.msg) } }else if(data.status == 'success'){ current_elem.text(data.msg) } }, }); } $('.collectionbtn').on('click', function(){ add_fav($(this), 1, 2); }); $(function(){ var $precision = $('.precision'), score = $precision.attr('data-star-scope'), option = { half : true, path : '../images/', precision : true, size : 24, starOff : 'g_star.png', starOn : 'r_star.png', starHalf : 'h_star.png', hints : ['极差', '差', '一般', '好评', '非常满意'], noRatedMsg : '暂时还未获得评价!', readOnly : true, score : score }; $precision.raty(option); $('.jsFavBtn').on('click', function(){ var type = $(this).attr('data-fav-type'); if(type == '1'){ favPraise($(this), 'fav' ,1 , '收藏'); }else if(type == '3'){ favPraise($(this), 'fav' ,3 ); }else if(type == '11'){ favPraise($(this), 'pra', 1); }else if(type == '4'){ favPraise($(this), 'fav' ,4 ); } }); }) </script> <script type="text/javascript"> $(function() { $('.recordbtn1').click(function(){ $('.recordbox1').show(); }); $('.recordbtn2').click(function(){ $('.recordbox2').show(); }); $('.imgslide').unslider({ speed: 500, // The speed to animate each slide (in milliseconds) delay: 3000, // The delay between slide animations (in milliseconds) complete: function() {}, // A function that gets called after every slide animation keys: true, // Enable keyboard (left, right) arrow shortcuts dots: true, // Display dot navigation fluid: false // Support responsive design. May break non-responsive designs }); var unslider = $('.imgslide').unslider(); $('.unslider-arrow').click(function() { var fn = this.className.split(' ')[1]; unslider.data('unslider')[fn](); }); }); </script> </body> </html>
==============================
下面填充机构首页
机构列表页的跳转
C:\Users\hlg\PycharmProjects\MxOnline\templates\org-detail-homepage.html
{% extends 'org_base.html' %} {% block title %}机构首页{% endblock %} {% block right_form %} <div class="right companycenter layout grouping" > <div class="head"> <h1>全部课程</h1> <a class="green fr more" href="org-detail-course.html">查看更多 > </a> </div> <div class="brief group_list"> {% for course in all_courses %} <div class="module1_5 box"> <a href="course-detail.html"><img width="214" 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 }}</span> </div> <div class="bottom"> <span class="fl">{{ course.course_org.name }}</span> <span class="star fr notlogin " data-favid="13" data-fav-type="4"> {{ course.fav_nums }} </span> </div> </div> {% endfor %} </div> </div> <div class="right companycenter layout" > <div class="head"> <h1>机构教师</h1> <a class="green fr more" href="org-detail-teachers.html">查看更多 > </a> </div> {% for teacher in all_teachers %} <div class="diarys"> <div class="module5 share company-diary-box" style="padding:10px 0;"> <div class="left"> <img class="pic" src="{{ MEDIA_URL }}{{ teacher.image }}"/> <p>昵称:{{ teacher.name }}</p> </div> <div class="right"> <div class="top"> <div class="fl"> <a href=""><h1>java开发教程</h1></a> <span>发表于:2015-10-12</span> </div> </div> <div class="middle" style="border-bottom:0;">课程介绍</div> </div> </div> </div> {% endfor %} </div> <div class="right companycenter layout" > <div class="head"> <h1>机构介绍</h1> <a class="green fr more" href="org-detail-desc.html">查看更多 > </a> </div> <div class="cont">{{ course_org.desc }}<a href="/company/desc/22/"><span class="green">[查看更多]</span></a></div> </div> {% endblock %}
url(r'^home/(?P<org_id>\d+)/$', OrgHomeView.as_view(), name='org_home')
class OrgHomeView(View): """ 机构首页 """ def get(self, request, org_id): course_org = CourseOrg.objects.get(id=int(org_id)) # 反向取数据 all_courses = course_org.course_set.all()[:3] all_teachers = course_org.teacher_set.all()[:1] return render(request, 'org-detail-homepage.html',{ "course_org": course_org, "all_courses": all_courses, "all_teachers": all_teachers })