web应用框架——Django实践项目（五）

一.点击导航栏进行跳转授课机构

1跳转

• 打开templates/base.html文件

  
  
  

  将这里改成url形式

二.分页

1.找分页的app

https://github.com/jamespacileo/django-pure-pagination
这个网站有所用到的代码

• 在这里，我们都已经下载了

  
  

• 查找所有软件 pip list

  
  
• 注册app，打开MXOline/settings.py

'pure_pagination',

在最后添加如下代码：

# 分页相关的设置
PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 3, # 主分页部分显示几个
    'MARGIN_PAGES_DISPLAYED': 2, # 省略号前面或者后面显示几个
    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

• 打开apps/organizations/views.py文件
  添加如下代码:

from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
...
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_orgs, per_page=5, request=request)  # 每页显示多少个
        orgs = p.page(page)
       return render(request, 'org-list.html',
                      {'all_orgs':orgs,'org_nums':org_nums,'all_citys':all_citys})

• 在templates目录下找到org_list.html
  找到分页代码：
  将代码注释掉：

  
  

• 这个时候我们运行一下程序：
  他会报一个这样的错误：

  
  
  

  往下翻，这里显示我们所写的代码出了问题：

  
  
  这里说明我们遍历的有些问题：
  
  这个时候再刷新一下：
  

  网页就会出来了

• 我们在原来注释掉的代码上面加上这句代码:

{{ all_orgs.render }}

然后运行一下：
在最底端会出现这个样式：

我们想要的不是这个样式，将之前注释的代码再恢复回来：

• 我们将刚刚添加大代码删掉:

  
  
  

  也将下面四条<li>删掉

  
  
• 在这个位置上填写如下代码：

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

• 刷新页面：

  
  

• 添加机构信息

  
  

• 修改每页显示的机构数：

  
  

• 刷新页面可看到：

  
  
  

  已经显示分页啦，接下来我们弄中间的省略号

• 打开MXOline/settings.py改变这两个值

  
  

• 刷新页面

  
  

三.筛选

下面我们将修改这里，点击类别进行筛选

• 点击培训机构

  
  
  

  我们可以看到他的接口已经写好了

  
  

1.机构类别的筛选

• 打开MXOline/views.py

#获取点击的类目
        category = request.GET.get("ct","")
        if category:
            all_orgs = all_orgs.filter(category=category)

这个时候再次点击每个类别，就可以显示：

但是我们可以看到，点击个人的时候，他并没有变绿色：

所以我们写一个判断：

• 打开org_list.html文件

<div class="cont">
                                <a href="?city={{ city_id }}"><span
                                        class="{% ifequal category '' %}active2{% endifequal %}">全部</span></a>

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

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

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

                            </div>

• 打开MXOline/views.py文件

  
  

• 刷新页面：

  
  
  

  显示绿色啦~

2.地区筛选

• 打开MXOline/views.py

# 对所在城市进行筛选
        city_id = request.GET.get('city', "")
        if city_id:
            if city_id.isdigit():
                all_orgs = all_orgs.filter(city_id=int(city_id))

• 顺便把对象写上：

  
  
• 打开org_list.html文件

<div class="cont">
                                <a href="?ct={{ category }}"><span class="active2">全部</span></a>
                                {% for city in all_citys %}
                                    <a href="?city={{ city.id }}&ct={{ category }}"><span class="">{{ city.name }}</span></a>
                                {% endfor %}
                            </div>

• 刷新页面：

  
  

3.修改总数：

当我们进行筛选的时候，会出现这样的错误：

• 打开MXOline/views.py

org_nums = all_orgs.count()

• 刷新页面：

  
  
  

  这样就对上了！

四.排序

实现机构类别，所在地区，以及这个排序进行三级联动

• 打开MXOline/apps/organizations/views.py

 # 对课程机构近排序
        sort = request.GET.get('sort',"")
        if sort == 'students':
            # 根据学生人数排序  减号代表倒序排序的意思
            all_orgs = all_orgs.order_by('-students')
        elif sort == 'courses':
            # 根据课程数进行排序
            all_orgs = all_orgs.order_by('-course_nums')

...
return render(request, 'org-list.html',
                      {'city_id':city_id,
                       'all_orgs':orgs,
                       'org_nums':org_nums,
                       'all_citys':all_citys,
                       'category':category,
                       'sort':sort,
                       'hot_orgs':hot_orgs,
                       })

• 这个时候刷新界面已经可以达到排序的效果了：

  
  
• 打开org_list.html文件：

<li class="{% if sort == '' %}active{% endif %}><a href="?ct=&city=">全部</a></li>
                                <li class="{% if sort == 'students' %}active{% endif %}"><a href="?sort=students&ct={{ category }}&city={{ city_id }}">学习人数 &#8595;</a></li>
                                <li class="{% if sort == 'courses' %}active{% endif %}"><a href="?sort=courses&ct={{ category }}&city={{ city_id }}">课程数 &#8595;</a></li>

• 刷新网页，这样他们三个就进行了联动筛选：

  
  

五.授课机构排名

接下来我们来修改它

• 在org_list.html中找到他所在的位置，并将多余的删除，只留下一个：

  
  
  

• 刷新页面：

  
  
• 打开MXOline/apps/organizations/views.py

hot_orgs = all_orgs.order_by("-click_nums")[:3]
...
'hot_orgs':hot_orgs,

• 打开org_list.html文件

 {% 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 %}

• 刷新页面：

  
  

六.URL重构

• 打开MXOline/MXOline/urls.py文件：
  修改如下地方:

  
  

• 在MXOline/apps/organizations/目录下新建一个urls.py文件

  
  
• 在里面配置url

from django.conf.urls import url
from apps.organization.views import OrgView

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

• 打开base.html文件
  修改如下代码：

  
  

• 刷新界面:

  
  
  

  我们可以看到路由已经改变

七.立即咨询

下面我们将修改这个板块：

• 配置url:

from django.conf.urls import url
from apps.organization.views import OrgView,AddAsk

urlpatterns = [
    url(r'^list/',OrgView.as_view(),name='list'),
    url(r'^add_ask/$', AddAsk.as_view(), name='add_ask'),
]

• 创建视图：

class AddAsk(View):
    """处理用户咨询模块"""
    def post(self, request, *args, **kwargs):
        pass

• 创建表单：
  新建一个forms.py文件：

  
  

from django import forms
class AddAskForm(forms.ModelForm):
    mobile = forms.CharField(max_length=11, min_length=11, required=True)
    class Meta:
        pass

• 创建用户操作app

startapp operations

• 注册app

'operations.apps.OperationsConfig',

• 将新创建的app移动到apps文件夹下：

  
  
• 打开operations/models.py文件：

from django.db import models

from django.contrib.auth import get_user_model

from apps.users.models import BaseModel
from apps.courses.models import Course

UserProfile = get_user_model()


class Banner(BaseModel):
    title = models.CharField(max_length=100, verbose_name="标题")
    image = models.ImageField(upload_to="banner/%Y/%m", max_length=200, verbose_name="轮播图")
    url = models.URLField(max_length=200, verbose_name="访问地址")
    index = models.IntegerField(default=0, verbose_name="顺序")

    class Meta:
        verbose_name = "轮播图"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.title


class UserAsk(BaseModel):
    name = models.CharField(max_length=20, verbose_name="姓名")
    mobile = models.CharField(max_length=11, verbose_name="手机")
    course_name = models.CharField(max_length=50, verbose_name="课程名")

    class Meta:
        verbose_name = "用户咨询"
        verbose_name_plural = verbose_name

    def __str__(self):
        return "{name}_{course}({mobile})".format(name=self.name, course=self.course_name, mobile=self.mobile)


class CourseComments(BaseModel):
    user = models.ForeignKey(UserProfile, on_delete=models.CASCADE, verbose_name="用户")
    course = models.ForeignKey(Course, on_delete=models.CASCADE, verbose_name="课程")
    comments = models.CharField(max_length=200, verbose_name="评论内容")

    class Meta:
        verbose_name = "课程评论"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.comments


class UserFavorite(BaseModel):
    user = models.ForeignKey(UserProfile, on_delete=models.CASCADE, verbose_name="用户")
    fav_id = models.IntegerField(verbose_name="数据id")
    fav_type = models.IntegerField(choices=((1,"课程"),(2,"课程机构"),(3,"讲师")), default=1, verbose_name="收藏类型")

    class Meta:
        verbose_name = "用户收藏"
        verbose_name_plural = verbose_name

    def __str__(self):
        return "{user}_{id}".format(user=self.user.username, id=self.fav_id)


class UserMessage(BaseModel):
    user = models.ForeignKey(UserProfile, on_delete=models.CASCADE, verbose_name="用户")
    message = models.CharField(max_length=200, verbose_name="消息内容")
    has_read = models.BooleanField(default=False, verbose_name="是否已读")

    class Meta:
        verbose_name = "用户消息"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.message


class UserCourse(BaseModel):
    user = models.ForeignKey(UserProfile, on_delete=models.CASCADE, verbose_name="用户")
    course = models.ForeignKey(Course, on_delete=models.CASCADE, verbose_name="课程")

    class Meta:
        verbose_name = "用户课程"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.course.name

• 迁移数据库

makemigrations
migrate

• 修改forms.py文件

from apps.operations.models import UserAsk
from django import forms
class AddAskForm(forms.ModelForm):
    mobile = forms.CharField(max_length=11, min_length=11, required=True)
    class Meta:
        model = UserAsk
        fields = ["name", "mobile", "course_name"]

• 修改views.py文件

from django.http import JsonResponse
from apps.organization.forms import AddAskForm
...
class AddAsk(View):
    """处理用户咨询模块"""
    def post(self, request, *args, **kwargs):
        userask_form = AddAskForm(request.POST)
        if userask_form.is_valid():
            userask_form.save(commit=True)
            return JsonResponse({
                "status":"success",
                "msg":"提交成功"
            })
        else:
            return JsonResponse({
                "status": "fail",
                "msg": "添加出错"
            })

image.png

• 打开org_list.html文件

{% block custom_js %}
    <script>
        $(function () {
            $(document).ready(function () {
                $('#jsStayBtn').on('click', function () {
                    $.ajax({
                        cache: false,
                        type: 'POST',
                        url: '{% url 'org:add_ask' %}',
                        async: true,
                        data: $('#jsStayForm').serialize(),
                        success: function (data) {
                            if (data.status == 'success'){
                                $('#jsStayForm')[0].reset();
                                $('#jsCompanyTips').html(data.msg)
                            }else if(data.status == 'fail'){
                                $('#jsCompanyTips').html(data.msg)

                            }
                        }
                    })
                })
            })

        })
    </script>
{% endblock %}

• 刷新网页，提交信息：

  
  

• 打开数据库，查看提交信息：

  
  
  

  那他为什么会提交两个呢？是因为我们写的ajax请求和base.html里面的ajax请求重复了，我们把base里面的删掉

  
  

• 刷新页面从新提交：

  
  

八.跳转课程列表

课程页面链接：https://pan.baidu.com/s/1cK53FoL6IXZIF1N9NR8b7A
提取码：okoa

• 我们将课程页面放入到templates文件夹中：

  
  
• 配置url

# 课程相关页面
    url(r'^course/', include(('apps.courses.urls', 'courses'), namespace='course')),

• 在courses文件夹下建一个urls.py文件

  
  

from django.conf.urls import url
from apps.organizations.views import OrgView, AddAsk
from apps.courses.views import CourseListView
urlpatterns = [
    url(r'^list/$', CourseListView.as_view(), name='list'),

]

• 在courses/views.py文件下写：

from pure_pagination import Paginator, EmptyPage, PageNotAnInteger
from django.shortcuts import render
from django.views.generic.base import View
from apps.courses.models import Course
# Create your views here.
class CourseListView(View):
    def get(self, request, *args, **kwargs):
        """获取课程列表信息"""
        all_courses = Course.objects.order_by("-add_time")

        # 对课程机构进行分页
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_courses,per_page=5, request=request) # 每页显示多少个
        courses = p.page(page)

        return render(request, 'course-list.html',
                      {"all_courses":courses,
                       })

• 刷新网页，输入网址：http://127.0.0.1:8000/course/list/
  
  显示出来了
• 继承模板：
• 打开course-list.html文件

{% extends 'base.html' %}
{% block custom_bread %}
<section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="index.html">首页</a>></li>
                <li>公开课</li>
            </ul>
        </div>
    </section>
{% endblock %}
{% block content %}
<section>
        <div class="wp">
            <div class="list" style="margin-top:0;">
                <div class="left layout">
                    <div class="head">
                        <ul class="tab_header">
                            <li class="active"><a href="?sort=">最新 </a></li>
                            <li><a href="?sort=hot">最热门</a></li>
                            <li><a href="?sort=students">参与人数</a></li>
                        </ul>
                    </div>
                    <div id="inWindow">
                        <div class="tab_cont " id="content">
                            <div class="group_list">
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>
                                <div class="box">
                                    <a href="course-detail.html">
                                        <img width="280" height="350" class="scrollLoading"
                                             src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>python入门2</h2>
                                        </a>
                                        <span class="fl">时长：<i class="key">0</i></span>
                                        <span class="fr">学习人数：0&nbsp;&nbsp;</span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕学网666</span></a>
                                        <span class="star fr  notlogin
                                        " data-favid="15">
                                        0
                                    </span>
                                    </div>
                                </div>


                            </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 class="long"><a href="?page=2">下一页</a></li>


                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right layout">
                    <div class="head">热门课程推荐</div>
                    <div class="group_recommend">

                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading"
                                         src="../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> django与vuejs实战项目2</h2></a>
                                <span class="fl">难度：<i class="key">高级</i></span>
                            </dd>
                        </dl>

                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading"
                                         src="../media/courses/2016/12/python面向对象.jpg"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> python面向对象</h2></a>
                                <span class="fl">难度：<i class="key">中级</i></span>
                            </dd>
                        </dl>

                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading"
                                         src="../media/courses/2016/12/python文件处理.jpg"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> python文件处理</h2></a>
                                <span class="fl">难度：<i class="key">中级</i></span>
                            </dd>
                        </dl>


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

• 我们找到模块的地方：

  
  

• 将模板删减为一个

  
  

• 刷新页面

  
  

• 添加课程信息：

  
  

• 填写循环

  
  

• 刷新页面：

  
  

• 修改页面信息：

  
  

• 刷新页面：

  
  

• 添加跳转链接,打开base.html文件：

  
  

以上所以代码可在我的github上查看：

https://github.com/zhaoXiY/MXOline

（此文章仅作为个人学习笔记使用，如有错误欢迎指正~）