美文网首页
第五章 在线教育平台(列表详情页的开发

第五章 在线教育平台(列表详情页的开发

作者: Xia0JinZi | 来源:发表于2018-03-19 19:51 被阅读0次

列表详情页的开发

标签: django


授课机构列表

django template继承

模板继承

base.html

{% block title %}<head> 你好 </head>{% endblock %}

extend.html

{% extends 'base.html' %}

文件上传位置

setting

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

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">

    <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>

</head>
<body>
<section class="headerwrap ">
    <header>
        <div  class=" header">
            <div class="top">
                <div class="wp">
                    <div class="fl"><p>服务电话:<b>33333333</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">
                <div class="wp">
                    <a href="index.html"><img class="fl" src="/static/images/logo.jpg"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="/static/images/search_btn.png"/>
                    </div>
                </div>
            </div>


            <nav>
                <div class="nav">
                    <div class="wp">
                        <ul>
                            <li ><a href="index.html">首页</a></li>
                            <li >
                                <a href="course-list.html">
                                    公开课<img class="hot" src="/static/images/nav_hot.png">
                                </a>
                            </li>
                            <li >
                                <a href="teachers-list.html">授课教师</a>
                            </li>
                            <li class="active" ><a href="org-list.html">授课机构</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

            </div>
    </header>
</section>
<!--crumbs start-->

    {% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>
            </ul>
        </div>
    </section>
    {% endblock %}


{% block custom_content %}

{% endblock %}
<footer>
        <div class="footer">
            <div class="wp">
                <ul class="cont">
                    <li class="logo"><a href=""><img src="/static/images/footlogo.png"/></a></li>
                    <li class="code"><img src="/static/images/code.jpg"/><p class="center">扫描关注微信</p></li>
                    <li class="third"><img class="fl" src="/static/images/tell.png"/><p class="tell">33333333</p><p class="time">周一至周日 9:00-18:00</p></li>
                </ul>

            </div>
            <p class="line"></p>
            <div class="wp clear">
                <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2016 ICP备案证书号:蜀ICP备xxxxx号-1</span>
            </div>
        </div>
    </footer>

<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>
<script src="/static/js/selectUi.js" type='text/javascript'></script>
<script src="/static/js/deco-common.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 src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="/static/js/deco-common.js"  type="text/javascript"></script>

<script>
    $(function(){
        $('#jsStayBtn').on('click', function(){
            $.ajax({
                cache: false,
                type: "POST",
                url:"/org/add_ask/",
                data:$('#jsStayForm').serialize(),
                async: true,
                success: function(data) {
                    if(data.status == 'success'){
                        $('#jsStayForm')[0].reset();
                        alert("提交成功")
                    }else if(data.status == 'fail'){
                        $('#jsCompanyTips').html(data.msg)
                    }
                },
            });
        });
    })

</script>

</body>
</html>

org_list.html

{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
    </section>
{% endblock %}

{% block custom_content %}
    <section>
    <div class="wp butler_list_box list">
    <div class='left'>
        <div class="listoptions">
            <ul>
                <li>
                    <h2>机构类别</h2>
                    <div class="cont">
                        <a href="?city="><span class="active2">全部</span></a>

                            <a href="?ct=pxjg&city="><span class="">培训机构</span></a>

                            <a href="?ct=gx&city="><span class="">高校</span></a>

                            <a href="?ct=gr&city="><span class="">个人</span></a>

                    </div>
                </li>
                <li>
                    <h2>所在地区</h2>
                    <div class="more">更多</div>
                    <div class="cont">
                        <a href="?ct="><span class="active2">全部</span></a>
                            {% for city in all_citys %}
                                <a href="?city=1&ct="><span class="">{{ city.name }}</span></a>
                            {% endfor %}
                    </div>
                </li>
            </ul>
        </div>
        <div class="all">共<span class="key">{{ org_nums }}</span>家</div>
        <div class="butler_list company list">
        <div class="layout">
            <div class="head">
                <ul class="tab_header">
                    <li class="active"><a href="?ct=&city=">全部</a> </li>
                    <li class=""><a href="?sort=students&ct=&city=">学习人数 &#8595;</a></li>
                    <li class=""><a href="?sort=courses&ct=&city=">课程数 &#8595;</a></li>
                </ul>
            </div>

            {% for course_org in all_courses %}
                  <dl class="des difdes">
                    <dt>
                        <a href="org-detail-homepage.html">
                            <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ course_org.image }}"/>
                        </a>
                    </dt>
                    <dd>
                        <div class="clearfix">
                             <a href="org-detail-homepage.html">
                                 <h1>{{ course_org.name }}</h1>
                                 <div class="pic fl">

                                         <img src="/static/images/authentication.png"/>

                                         <img src="/static/images/gold.png"/>

                                 </div>
                             </a>
                        </div>
                        <ul class="cont">
                            <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li>
                            <li class="c8" style="padding-left:18px;">{{ course_org.address }}</li>
                            <li class="pic10" style="padding-left:18px;">经典课程:

                                    <a href="/diary/19/">c语言基础入门</a>

                                    <a href="/diary/16/">数据库基础</a>

                            </li>
                        </ul>
                    </dd>
                    <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
                </dl>
            {% endfor %}




        </div>
         <div class="pageturn">
            <ul class="pagelist">





                            <li class="active"><a href="?page=1">1</a></li>





                            <li><a href="?page=2" class="page">2</a></li>





                            <li><a href="?page=3" class="page">3</a></li>




                    <li class="long"><a href="?page=2">下一页</a></li>


            </ul>
        </div>
        </div>
    </div>
    <div class="right companyright">
            <div class="head">我要学习</div>
            <form class="rightform" id="jsStayForm">
                <div>
                    <img src="/static/images/rightform1.png"/>
                    <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25" />
                </div>
                <div>
                    <img src="/static/images/rightform2.png"/>
                    <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
                </div>
                <div>
                    <img src="/static/images/rightform3.png"/>
                    <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50" />
                </div>
                <p class="error company-tips" id="jsCompanyTips"></p>
                <input class="btn" type="text" id="jsStayBtn" value="立即咨询 >" />
            <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
            </form>
        </div>

        <div class="right companyrank layout">
            <div class="head">授课机构排名</div>


                <dl class="des">
                    <dt class="num fl">1</dt>
                    <dd>
                        <a href="/company/2/"><h1>慕课网</h1></a>
                        <p>北京市</p>
                    </dd>
                </dl>

                <dl class="des">
                    <dt class="num fl">2</dt>
                    <dd>
                        <a href="/company/2/"><h1>慕课网2</h1></a>
                        <p>深圳市</p>
                    </dd>
                </dl>

                <dl class="des">
                    <dt class="num fl">3</dt>
                    <dd>
                        <a href="/company/2/"><h1>北京大学</h1></a>
                        <p>北京市</p>
                    </dd>
                </dl>




        </div>
        </div>
</section>
{% endblock %}

结构列表页动态数据展示

class OrgListView(View):
    """
    机构列表显示
    """
    def get(self, request):
        all_courses = CourseOrg.objects.all()
        org_nums = all_courses.count()
        all_citys = CityDict.objects.all()
        return render(request, 'org_list.html', {
            'all_courses': all_courses,
            'all_citys': all_citys,
            'org_nums': org_nums
        })

图片访问路径url设置

    url(r'^org_list/$', OrgListView.as_view(), name='org_list'),
    # medias watch
    url(r'^media/(?P<path>.*)/$', serve, {'document_root': MEDIA_ROOT})

列表分页功能实现

基于开源的django-pure-pagination,对于数据进行分页信息展示。具体操作github说明齐全。 地址

添加app注册,修改返回结果,修改前端界面

apps
'pure_pagination'


from pure_pagination import Paginator, EmptyPage, PageNotAnInteger

class OrgListView(View):
    """
    机构列表显示
    """
    def get(self, request):
        all_courses = CourseOrg.objects.all()
        # 分页功能展示
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1

        p = Paginator(all_courses, 5, request=request)

        all_orgs = p.page(page)

        org_nums = all_courses.count()
        all_citys = CityDict.objects.all()
        return render(request, 'org_list.html', {
            'all_courses': all_orgs,
            'all_citys': all_citys,
            'org_nums': org_nums
        })

 <div class="pageturn">
    <ul class="pagelist">
        {% if all_courses.has_previous %}
            <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一页</a></li>
        {% endif %}
        {% for page in all_courses.pages %}
            {% if page %}
                {% ifequal page all_courses.number %}
                    <li class="active"><a href="">{{ page }}</a></li>
                {% else %}
                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                {% endifequal %}
            {% else %}
                <li class="none"><a href="">...</a></li>
            {% endif %}
        {% endfor %}
        {% if all_courses.has_next %}
            <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一页</a></li>
        {% endif %}
    </ul>
</div>

删选条件排序

异步页面刷新方式,通过连接传递参数的方式,不同条件之间需要通过关联筛选。

{% extends 'common/base.html' %}
{% load staticfiles %}
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
    </section>
{% endblock %}

{% block custom_content %}
    <section>
    <div class="wp butler_list_box list">
    <div class='left'>
        <div class="listoptions">
            <ul>
                <li>
                    <h2>机构类别</h2>
                    <div class="cont">
                        <a href="?city_id={{ city_id }}"><span class="{% ifequal category '' %}active2{% endifequal %}">全部</span></a>

                            <a href="?ct=pxjg&city_id={{ city_id }}"><span class="{% ifequal category 'pxjg' %}active2{% endifequal %}">培训机构</span></a>

                            <a href="?ct=gx&city_id={{ city_id }}"><span class="{% ifequal category 'gx' %}active2{% endifequal %}">高校</span></a>

                            <a href="?ct=gr&city_id={{ city_id }}"><span class="{% ifequal category 'gr' %}active2{% endifequal %}">个人</span></a>

                    </div>
                </li>
                <li>
                    <h2>所在地区</h2>
                    <div class="more">更多</div>
                    <div class="cont">
                        <a href="?ct={{ category }}"><span class="{% ifequal city_id '' %}active2{% endifequal %}">全部</span></a>
                            {% for city in all_citys %}
                                <a href="?city_id={{ city.id }}&ct={{ category }}"><span class="{% ifequal city_id city.id|stringformat:'i' %} active2 {% endifequal %}">{{ city.name }}</span></a>
                            {% endfor %}
                    </div>
                </li>
            </ul>
        </div>
        <div class="all">共<span class="key">{{ org_nums }}</span>家</div>
        <div class="butler_list company list">
        <div class="layout">
            <div class="head">
                <ul class="tab_header">
                    <li class="{% ifequal sort '' %}active{% endifequal %}"><a href="?ct={{ category }}&city_id={{ city_id }}">全部</a> </li>
                    <li class="{% ifequal sort 'students' %}active{% endifequal %}"><a href="?sort=students&ct={{ category }}&city_id={{ city_id }}">学习人数 &#8595;</a></li>
                    <li class="{% ifequal sort 'courses' %}active{% endifequal %}"><a href="?sort=courses&ct={{ category }}&city_id={{ city_id }}">课程数 &#8595;</a></li>
                </ul>
            </div>

            {% for course_org in all_courses.object_list %}
                  <dl class="des difdes">
                    <dt>
                        <a href="org-detail-homepage.html">
                            <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ course_org.image }}"/>
                        </a>
                    </dt>
                    <dd>
                        <div class="clearfix">
                             <a href="org-detail-homepage.html">
                                 <h1>{{ course_org.name }}</h1>
                                 <div class="pic fl">

                                         <img src="/static/images/authentication.png"/>

                                         <img src="/static/images/gold.png"/>

                                 </div>
                             </a>
                        </div>
                        <ul class="cont">
                            <li class="first"><p class="pic9">课程数:<span>1</span></p><p class="c7">学习人数:<span>1000</span></p></li>
                            <li class="c8" style="padding-left:18px;">{{ course_org.address }}</li>
                            <li class="pic10" style="padding-left:18px;">经典课程:

                                    <a href="/diary/19/">c语言基础入门</a>

                                    <a href="/diary/16/">数据库基础</a>

                            </li>
                        </ul>
                    </dd>
                    <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
                </dl>
            {% endfor %}




        </div>
         <div class="pageturn">
            <ul class="pagelist">
                {% if all_courses.has_previous %}
                    <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一页</a></li>
                {% endif %}
                {% for page in all_courses.pages %}
                    {% if page %}
                        {% ifequal page all_courses.number %}
                            <li class="active"><a href="">{{ page }}</a></li>
                        {% else %}
                            <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                        {% endifequal %}
                    {% else %}
                        <li class="none"><a href="">...</a></li>
                    {% endif %}
                {% endfor %}
                {% if all_courses.has_next %}
                    <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
        </div>
    </div>
    <div class="right companyright">
            <div class="head">我要学习</div>
            <form class="rightform" id="jsStayForm">
                <div>
                    <img src="/static/images/rightform1.png"/>
                    <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25" />
                </div>
                <div>
                    <img src="/static/images/rightform2.png"/>
                    <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
                </div>
                <div>
                    <img src="/static/images/rightform3.png"/>
                    <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50" />
                </div>
                <p class="error company-tips" id="jsCompanyTips"></p>
                <input class="btn" type="text" id="jsStayBtn" value="立即咨询 >" />
            <input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
            </form>
        </div>

        <div class="right companyrank layout">
            <div class="head">授课机构排名</div>

                {% for org in hot_orgs %}
                    <dl class="des">
                        <dt class="num fl">{{ forloop.counter }}</dt>
                        <dd>
                            <a href="/company/2/"><h1>{{ org.name }}</h1></a>
                            <p>{{ org.address }}</p>
                        </dd>
                    </dl>
                {% endfor %}

        </div>
        </div>
</section>
{% endblock %}
class OrgListView(View):
    """
    机构列表显示
    """
    def get(self, request):
        all_courses = CourseOrg.objects.all()

        # 排序方式筛选
        # 右侧机构边栏排序(只取前三)
        hot_orgs = all_courses.order_by('-click_nums')[:3]

        # 学习人数及课程数排序
        sort = request.GET.get('sort', '')
        if sort:
            if sort == 'students':
                all_courses = all_courses.order_by('-students')
            elif sort == 'courses':
                all_courses = all_courses.order_by('-course_nums')

        # 筛选条件
        # 城市筛选
        city_id = request.GET.get('city_id', '')
        if city_id:
            all_courses = all_courses.filter(city_id=int(city_id))

        # 结构类别筛选
        category = request.GET.get('ct', '')
        if category:
            all_courses = all_courses.filter(category=category)

        # 分页功能展示
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses, 5, request=request)
        all_orgs = p.page(page)

        org_nums = all_courses.count()
        all_citys = CityDict.objects.all()
        return render(request, 'org_list.html', {
            'all_courses': all_orgs,
            'all_citys': all_citys,
            'org_nums': org_nums,
            'city_id': city_id,
            'category': category,
            'hot_orgs': hot_orgs,
            'sort': sort
        })

每个app中url统一处理,modelform使用

  • url 统一处理include的使用

单个app中的url

# _*_ encoding:utf-8 _*_

__author__ = 'wrj008'
__date__ = '2018/3/13 14:45'

from django.conf.urls import url, include
from .views import OrgListView


urlpatterns = [
    url(r'^list/$', OrgListView.as_view(), name='org_list'),
]

统一结构中的url

    url(r'^org/', include('organization.urls', namespace='org')),
  • modelform 使用 通过forms 继承model的形式,并添加过滤函数条件完成表单验证。本次的form提交 是异步操作,返回使用json格式的数据。
# _*_ encoding:utf-8 _*_

__author__ = 'wrj008'
__date__ = '2018/3/13 14:49'
from django import forms
import re

from operation.models import UserAsk


class UserAskForm(forms.ModelForm):
    class Meta:
        model = UserAsk
        fields = ['name', 'mobile', 'course_name']

    def clean_mobile(self):
        mobile = self.cleaned_data['mobile']
        REGEX_MOBILE = '^1[358]\d{9}$|^147\d{8}$|^176\d{8}$'
        p = re.compile(REGEX_MOBILE)
        if p.match(mobile):
            return mobile
        else:
            raise forms.ValidationError(u'手机号不合法', code='invalid_mobile')

异步实现数据交互 使用

class AddUserAskView(View):
    def post(self,request):
        user_from = UserAskForm(request.POST)
        if user_from.is_valid():
            user = user_from.save(commit=True)
            return HttpResponse({'status': 'success'}, content_type='application/json')
        else:
            return HttpResponse({'status': 'fail', 'msg': u'添加错误'}, content_type='application/json')

机构详情页功能实现

机构详情页
  • 机构首页

已基础也为准,其中首页返回内容,需要通过外键的反查询方案实行,通过django的外键的set功能实现外键表内容的获取。

基础页

<!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 custon_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_URL }}{{ org_detail.image }}"/>
            <div class="head fl">
                <h1>
                    {{ org_detial.name }}
                    <img src="/static/images/authentication.png"/>
                    <img src="/static/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 custom_bread %}机构首页{% endblock %}</li>
        </ul>
    </div>
</section>

<section>
    <div class="wp list personal_list comp">
        <div class="left">
            <ul>
                <li class="{% ifequal current_page 'home' %}active2{% endifequal %}"><a href="{% url 'org:org_home' org_detail.id%}">机构首页</a></li>
                <li class="{% ifequal current_page 'course' %}active2{% endifequal %}"><a href="{% url 'org:org_course' org_detail.id%}">机构课程</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 custom_right %}{% 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        : '{% static '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>

详情页

{% extends 'common/org_detail_base.html' %}
{% block title %} 机构首页 {% endblock %}
{% block custom_bread %}机构首页{% endblock %}
{% block custom_right %}
    <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_course %}
                <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_time }}</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_teacher %}
            <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">&nbsp; &nbsp; <p>&nbsp; &nbsp;</p>{{ org_detail.desc }}<a href="/company/desc/22/"><span class="green">[查看更多]</span></a></div>
</div>
{% endblock %}

内容返回

class OrgDetailHomeView(View):
    """
    机构详情页
    """
    def get(self, request, org_id):
        current_page = 'home'
        org_detail = CourseOrg.objects.get(id=int(org_id))
        all_course = org_detail.course_set.all()[:3]
        all_teacher = org_detail.teacher_set.all()[:1]
        return render(request, 'org-detail-homepage.html', {
            'all_course': all_course,
            'all_teacher': all_teacher,
            'org_detail': org_detail,
            'current_page': current_page
        })
  • 机构课程

与机构首页基本相似

详情页

{% extends 'common/org_detail_base.html' %}
{% block title %} 机构课程 {% endblock %}
{% block custom_bread %}机构课程{% endblock %}
{% block custom_right %}
    <div class="right companycenter layout" >
        <div class="head">
            <h1>机构课程</h1>
        </div>
        <div class="brief group_list">
            {% for course in all_course %}
                <div class="module1_5 box">
                    <a class="comp-img-box" href="course-detail.html">

                        <img width="214" height="195" 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_time }}</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 class="pageturn">
                <ul class="pagelist">
                    <li class="active"><a href="?page=1">1</a></li>
                </ul>
            </div>
    </div>
{% endblock %}


返回结果

class OrgDetailCourseView(View):
    """
    机构课程页
    """
    def get(self, request, org_id):
        current_page = 'course'
        org_detail = CourseOrg.objects.get(id=int(org_id))
        all_course = org_detail.course_set.all()
        return render(request, 'org-detail-course.html', {
            'all_course': all_course,
            'org_detail': org_detail,
            'current_page': current_page
        })
  • 机构介绍

操作与之前的操作一样,只是返回结果变少了。

class OrgDetailCourseView(View):
    """
    机构课程页
    """
    def get(self, request, org_id):
        current_page = 'course'
        org_detail = CourseOrg.objects.get(id=int(org_id))
        has_fav = False
        if request.user.is_authenticated():
            if UserFavorite.objects.filter(user=request.user, fav_id=org_detail.id, fav_type=2):
                has_fav = True
        all_course = org_detail.course_set.all()
        return render(request, 'org-detail-course.html', {
            'all_course': all_course,
            'org_detail': org_detail,
            'current_page': current_page,
            'has_fav': has_fav
        })
  • 机构讲师

操作与之前的操作一样,只是返回结果变少了。

class OrgDetailDescView(View):
    """
    机构详情页
    """
    def get(self, request, org_id):
        current_page = 'desc'
        org_detail = CourseOrg.objects.get(id=int(org_id))
        has_fav = False
        if request.user.is_authenticated():
            if UserFavorite.objects.filter(user=request.user, fav_id=org_detail.id, fav_type=2):
                has_fav = True
        return render(request, 'org-detail-desc.html', {
            'org_detail': org_detail,
            'current_page': current_page,
            'has_fav': has_fav
        })

用户收藏以及取消收藏

<!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_js %}{% 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>
    
</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>
                    {% if request.user.is_authenticated %}
                        <div class="personal">
                            <dl class="user fr">
                                <dd>bobby<img class="down fr" src="/static/images/top_down.png"/></dd>
                                <dt><img width="20" height="20" src="/static/media/image/2016/12/default_big_14.png"/></dt>
                            </dl>
                            <div class="userdetail">
                                <dl>
                                    <dt><img width="80" height="80" src="/static/media/image/2016/12/default_big_14.png"/></dt>
                                    <dd>
                                        <h2>django</h2>
                                        <p>bobby</p>
                                    </dd>
                                </dl>
                                <div class="btn">
                                    <a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
                                    <a class="fr" href="/logout/">退出</a>
                                </div>
                            </div>
                        </div>
                        {% else %}
                            <a style="color:white" class="fr registerbtn" href="{% url 'register' %}">注册</a>
                            <a style="color:white" class="fr loginbtn" href="/login/">登录</a>
                    {% endif %}
                </div>
            </div>
            
            
    <div class="middle companyheader">
        <div class="wp">
            <img class="fl" style="width: 112px;height: 103px" src="{{ MEDIA_URL }}{{ org_detail.image }}"/>
            <div class="head fl">
                <h1>
                    {{ org_detial.name }}
                    <img src="/static/images/authentication.png"/>
                    <img src="/static/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" id="fav_add">
                 {% if has_fav %}已收藏{% else %}收藏{% endif %}
            </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 custom_bread %}机构首页{% endblock %}</li>
        </ul>
    </div>
</section>

<section>
    <div class="wp list personal_list comp">
        <div class="left">
            <ul>
                <li class="{% ifequal current_page 'home' %}active2{% endifequal %}"><a href="{% url 'org:org_home' org_detail.id%}">机构首页</a></li>
                <li class="{% ifequal current_page 'course' %}active2{% endifequal %}"><a href="{% url 'org:org_course' org_detail.id%}">机构课程</a></li>
                <li class="{% ifequal current_page 'desc' %}active2{% endifequal %}"><a href="{% url 'org:org_desc' org_detail.id%}">机构介绍</a></li>
                <li class="{% ifequal current_page 'teacher' %}active2{% endifequal %}"><a href="{% url 'org:org_teacher' org_detail.id%}">机构讲师</a></li>
            </ul>
        </div>
    {% block custom_right %}{% 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/unslider.js"></script>
<script type="text/javascript" src="/static/js/plugins/jquery.raty.js"></script>
<script type="text/javascript">
    //收藏分享


$('.collectionbtn').on('click', function(){
    add_fav($(this), {{ org_detail.id }}, 2);
});

//收藏分享
function add_fav(current_elem, fav_id, fav_type){
    $.ajax({
        cache: false,
        type: "POST",
        url:"{% url 'org:add_fav' %}",
        data:{'fav_id':fav_id, 'fav_type':fav_type},
        dataType: "json",
        async: true,
        beforeSend:function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken"," {{ csrf_token }}");
        },
        success: function(data) {
            if(data.status == 'fail'){
                if(data.msg == '用户未登录'){
                    window.location.href="{% url 'login' %}";
                }else{
                    alert(data.msg)
                }
            }else if(data.status == 'success'){
                current_elem.text(data.msg)
            }
        },
    });

}

$(function(){
    var $precision = $('.precision'),
        score = $precision.attr('data-star-scope'),
        option =  {
                    half        : true,
                    path        : '{% static '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>

class AddFavView(View):
    """
    添加收藏
    """
    def post(self, request):
        fav_id = request.POST.get('fav_id', 0)
        fav_type = request.POST.get('fav_type', 0)
        if not request.user.is_authenticated():
            return HttpResponse({'status': 'fail', 'msg': '用户未登录'}, content_type='application/json')

        existed_record = UserFavorite.objects.filter(user=request.user, fav_id=int(fav_id), fav_type=int(fav_type))
        if existed_record:
            existed_record.delete()
            return HttpResponse({'status': 'success', 'msg': '收藏'}, content_type='application/json')
        else:
            user_fav = UserFavorite()
            if int(fav_id) > 0 and int(fav_type) > 0:
                user_fav.user = request.user
                user_fav.fav_id = int(fav_id)
                user_fav.fav_type = int(fav_type)
                user_fav.save()
                return HttpResponse({'status': 'success', 'msg': '已收藏'}, content_type='application/json')
            else:
                return HttpResponse({'status': 'fail', 'msg': '收藏错误'}, content_type='application/json')

其他页面收藏显示选择一个做讲解,通过添加一个变量做标识,如果用户登录并且已经收藏,那么则变量为true,如果没有则false

class OrgDetailTeacherView(View):
    """
    机构教师页
    """
    def get(self, request, org_id):
        current_page = 'teacher'
        org_detail = CourseOrg.objects.get(id=int(org_id))
        has_fav = False
        if request.user.is_authenticated():
            if UserFavorite.objects.filter(user=request.user, fav_id=org_detail.id, fav_type=2):
                has_fav = True
        all_teacher = org_detail.teacher_set.all()
        return render(request, 'org-detail-teachers.html', {
            'all_teacher': all_teacher,
            'org_detail': org_detail,
            'current_page': current_page,
            'has_fav': has_fav
        })
  • 用户登录注册显示
{% if request.user.is_authenticated %}
    <div class="personal">
        <dl class="user fr">
            <dd>bobby<img class="down fr" src="/static/images/top_down.png"/></dd>
                <dt><img width="20" height="20" src="/static/media/image/2016/12/default_big_14.png"/></dt>
        </dl>
        <div class="userdetail">
            <dl>
                 <dt><img width="80" height="80" src="/static/media/image/2016/12/default_big_14.png"/></dt>
                    <dd>
                        <h2>django</h2>
                        <p>bobby</p>
                    </dd>
            </dl>
            <div class="btn">
                <a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
                <a class="fr" href="/logout/">退出</a>
            </div>
       </div>
       </div>
{% else %}
    <a style="color:white" class="fr registerbtn" href="{% url 'register' %}">注册</a>
    <a style="color:white" class="fr loginbtn" href="/login/">登录</a>
{% endif %}

  • 本篇博客原视频博主[慕课在线教育平台]
  • 本篇博客撰写人: XiaoJinZi 转载请注明出处
  • 学生能力有限 附上邮箱: 986209501@qq.com 不足以及误处请大佬指责

相关文章

网友评论

      本文标题:第五章 在线教育平台(列表详情页的开发

      本文链接:https://www.haomeiwen.com/subject/cgapqftx.html