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

2020-05-17 本文已影响0人思君_4cd3

一.课程机构模块

打开apps/courses/models.py文件：
添加课程机构：

from apps.organization.models import CourseOrg
...
course_org = models.ForeignKey(CourseOrg, null=True, blank=True, on_delete=models.CASCADE, verbose_name="课程机构")

迁移数据库：

makemigrations
migrate

打开数据库查看：
进入后台管理课程界面,将课程的课程机构进行添加。
打开course-list.html文件
刷新网址页面：

修改成功

二.公开课分页模块

打开course-list.html文件
添加分页代码：

                     {% if all_courses.has_previous %}
                                <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}"
                                                    class="page">上一页</a></li>
                            {% endif %}
                            {% for page in all_courses.pages %}
                                {% if page %}
                                    {% ifequal page all_courses.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_courses.has_next %}
                                <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}"
                                                    class="page">下一页</a></li>
                            {% endif %}

刷新页面：

成功啦

三.课程排序

打开apps/courses/views.py文件：

        #课程排序
        sort = request.GET.get('sort', "")
        if sort == 'students':
            # 根据参与人数排序  减号代表倒序排序的意思
            # li><a href="?sort=students">参与人数</a></li>
            all_courses = all_courses.order_by('-students')
        elif sort == 'hot':
            # 课程排序  <li><a href="?sort=hot">最热门</a></li>
            # 根据最热门进行排序 参与人数  <
            all_courses = all_courses.order_by('-click_nums')
...
"sort":sort,

刷新页面：
点击最热门，按照收藏数进行排序

点击参与人数，按照学习人数来排名：
修改样式：
打开course-list.html文件：

<li class="{% if sort == '' %}active{% endif %}"><a href="?sort=">最新 </a></li>
                            <li class="{% if sort == 'hot' %}active{% endif %}"><a href="?sort=hot">最热门</a></li>
                            <li class="{% if sort == 'students' %}active{% endif %}"><a href="?sort=students">参与人数</a></li>

刷新网页：

四.课程热门推荐

打开apps/courses/views.py文件：

## 获取热门课程 前3个
        hot_courses = Course.objects.order_by("-click_nums")[:3]
...
"hot_courses":hot_courses,

打开course-list.html文件：

{% for course in hot_courses %}
                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading"
                                         src="{{ course.image.url }}"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2>{{ course.name }}</h2></a>
                                <span class="fl">难度：<i class="key">{{course.get_degree_display}}</i></span>
                            </dd>
                        </dl>
                        {% endfor %}

刷新网页：

五.导航栏样式修改

打开base.html页面:

<ul>
                            <li class="{% if request.path == '/' %}active{% endif %}"><a href="{% url 'index' %}">首页</a></li>
                            <li class="{% if request.path|slice:'7' == '/course' %}active{% endif %}">
                                <a href="{% url 'course:list' %}">
                                    公开课<img class="hot" src="/static/images/nav_hot.png">
                                </a>
                            </li>
                            <li>
                                <a href="teachers-list.html">授课教师</a>
                            </li>
                            <li class="{% if request.path|slice:'4' == '/org' %}active{% endif %}"><a href="{% url 'org:list' %}">授课机构</a></li>
                        </ul>

刷新页面：

六.课程详细页

课程详细页面链接：https://pan.baidu.com/s/1NFpVJHojbLI876ieXOlAVA
提取码：m077

将页面复制到templates文件夹中
开始继承模板，将多余的删除
继承模板：
打开apps/course/urls.py文件配置路由

from apps.courses.views import CourseListView,CourseDetailView
...
url(r'^detail/$', CourseDetailView.as_view(), name='detail'),

打开apps/course/views.py文件

class CourseDetailView(View):
    def get(self, request, *args, **kwargs):
        """获取课程详情页"""
        return render(request, 'course-detail.html')

刷新页面：输入网址：http://127.0.0.1:8000/course/detail/

七.详情页和公开课关联：

打开apps/course/views.py文件

class CourseDetailView(View):
    def get(self, request,course_id, *args, **kwargs):
        """获取课程详情页"""
        # 根据id查询课程
        course = Course.objects.get(id=int(course_id))
        # 点击到课程 的详情就记录一次点击数
        course.click_nums += 1
        course.save()

        return render(request, 'course-detail.html',
                      {"course":course,
                       })

打开course-list.py文件
重新配置路由：

url(r'^(?P<course_id>\d+)/$', CourseDetailView.as_view(), name='detail'),

刷新页面：进入公共课点击公共课出现详情页:

八.详情页面包屑模块：

打开course-detail文件：

<section>
<div class="wp">
    <ul class="crumbs">

        <li><a href="{% url 'index' %}">首页</a>></li>
        <li><a href="{% url 'course:list' %}">公开课</a>></li>
         <li>课程详情</li>

    </ul>
</div>
</section>

刷新页面：

面包屑完成

九.细节完善

1.图片：

打开course-list.html
刷新页面

2.细节

刷新页面

3.章节数

打开apps/course/model.py文件

    def lesson_nums(self):
        #章节数
        return self.lesson_set.all().count()

打开course-detail.html文件
刷新页面：

十.收藏状态

打开apps/course/views.py文件

from apps.operations.models import UserFavorite
...
# 获取收藏状态
        has_fav_course = False
        has_fav_org = False
        if request.user.is_authenticated:
            # 查询用户是否收藏了该课程和机构 fav_type=1证明是课程收藏，如果有，证明用户收藏了这个课
            if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=1):
                has_fav_course = True
            if UserFavorite.objects.filter(user=request.user, fav_id=course.id, fav_type=2):
                has_fav_org = True
...
"has_fav_course": has_fav_course,
                       "has_fav_org": has_fav_org,

打开course-detail.html文件

{% if has_fav_course %}已收藏{% else %}收藏{% endif %}
...
{% if has_fav_org %}已收藏{% else %}收藏{% endif %}

打开数据库
刷新页面
再次添加数据库
刷新页面

十一.课程收藏和机构收藏的实现

打开course_detail.html文件
在最后写上Ajax请求

{% block custom_js %}
<script>

    function add_fav(current_elem, fav_id, fav_type) {
        $.ajax({
            cache: false,
            type: 'POST',
            url: '{% url 'op:fav' %}',
            async: true,
            data: {'fav_id':fav_id,'fav_type':fav_type },
            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)
                }
            }
                })
    }
    {#课程收藏的实现#}
    $(document).ready(function () {
        $('#jsLeftBtn').on('click', function () {
            add_fav($(this), {{ course.id }}, 1)
        })
    })

    {#机构收藏的实现#}
    $(document).ready(function () {
        $('#jsRightBtn').on('click', function () {
             add_fav($(this), {{ course.course_org.id }}, 2)
        })
    })
</script>
{% endblock %}

在Mxoline/apps/operations文件夹下新建一个urls.py文件
打开urls.py文件写入代码：

from django.conf.urls import url

from apps.operations.views import AddFavView

urlpatterns = [
    url(r'^fav/$', AddFavView.as_view(), name='fav'),
]

打开MXOline/MXOline/urls.py文件

# 用户操作相关
    url(r'^op/', include(('apps.operations.urls', 'operations'), namespace='op')),

在operations文件夹中新建一个forms.py文件
写入代码：

from apps.operations.models import UserFavorite
from django import forms
class UserFavForm(forms.ModelForm):
    class Meta:
        model = UserFavorite
        fields = ["fav_id","fav_type"]

打开operations/views.py文件

from django.shortcuts import render
from django.views.generic.base import View
from apps.operations.forms import UserFavForm
from django.http import JsonResponse
from apps.operations.models import UserFavorite
from apps.courses.models import Course
from apps.organization.models import CourseOrg
from apps.organization.models import Teacher
class AddFavView(View):
    """
    用户收藏实现
    """
    # 先判断用户是否登录
    def post(self, request, *args, **kwargs):
        if not request.user.is_authenticated:
            return JsonResponse({
                "status":"fail",
                "msg": "用户未登录"
            })
        use_fav_form = UserFavForm(request.POST)
        if use_fav_form.is_valid():
            fav_id = use_fav_form.cleaned_data["fav_id"]
            fav_type = use_fav_form.cleaned_data["fav_type"]
            # 判断用户是否已经收藏
            existed_records = UserFavorite.objects.filter(user=request.user,fav_id=fav_id,fav_type=fav_type )
            if existed_records:
                # 收藏这条信息删除
                existed_records.delete()
                if fav_type == 1:
                    course = Course.objects.get(id = fav_id)
                    course.fav_nums -= 1
                    course.save()
                elif fav_type == 2:
                    cousre_org = CourseOrg.objects.get(id=fav_id)
                    cousre_org.fav_nums -= 1

                elif fav_type == 3:
                    teacher =Teacher.objects.get(id=fav_id)
                    teacher.fav_nums -= 1
                    teacher.save()
                return JsonResponse(
                    { "status":"success",
                    "msg": "收藏"}
                )
            else:
                user_fav = UserFavorite()
                user_fav.fav_id = fav_id
                user_fav.fav_type = fav_type
                user_fav.user = request.user
                user_fav.save()
                return JsonResponse(
                    {"status": "success",
                     "msg": "已收藏"}
                )

        else:
            return JsonResponse(
                {"status": "fail",
                 "msg": "参数错误"}
            )