Django+Xadmin打造在线教育系统(七)

全局导航&个人中心&全局搜索

配置全局导航

让index页面也继承base页面,注意首页有个单独的__index.js__

base页面的导航栏也进行配置

    <nav>
        <div class="nav">
            <div class="wp">
                <ul>
                    <li ><a href="{% url 'index' %}">首页</a></li>
                    <li >
                        <a href="{% url 'course:list' %}">
                            公开课<img class="hot" src="{% static "images/nav_hot.png" %}">
                        </a>
                    </li>
                    <li >
                        <a href="{% url 'org:teacher_list' %}">授课教师</a>
                    </li>
                    <li class="active" ><a href="{% url 'org:org_list' %}">授课机构</a></li>
                </ul>
            </div>
        </div>
    </nav>

但是现在我们不知道当前是哪一个页面，因为后端没有传值过来

这里可以使用request.path进行判断

比如http://127.0.0.1:8000/org/teacher_list/，则request.path 就是`/org/teacher_list/``

slice:12 是过滤器，取前12位数

利用这种方法可以达到全局的“active”效果，而不用每个子页面都要去设置“active”了

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

全局搜索功能

通过url中加参数keywords来达到全局搜索的功能

以Course搜索为例：

        # 搜索功能
        search_keywords = request.GET.get('keywords', '')
        if search_keywords:
            # icontains是包含的意思（不区分大小写）
            # Q可以实现多个字段，之间是or的关系
            all_course = all_course.filter(
                Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords) | Q(
                    detail__icontains=search_keywords))

搜索的代码放在deco-common.js中

如果自己写的url和js文件中的不同,可自行修改

//顶部搜索栏搜索方法
function search_click(){
    var type = $('#jsSelectOption').attr('data-value'),
        keywords = $('#search_keywords').val(),
        request_url = '';
    if(keywords == ""){
        return
    }
    if(type == "course"){
        request_url = "/course/list?keywords="+keywords
    }else if(type == "teacher"){
        request_url = "/org/teacher/list?keywords="+keywords
    }else if(type == "org"){
        request_url = "/org/list?keywords="+keywords
    }
    window.location.href = request_url
}

课程机构搜索功能

    # 机构搜索功能
    search_keywords = request.GET.get('keywords', '')
    if search_keywords:
        # 在name字段进行操作,做like语句的操作。i代表不区分大小写
        # or操作使用Q
        all_orgs = all_orgs.filter(Q(name__icontains=search_keywords) | Q(desc__icontains=search_keywords))

授课老师搜索功能

        # 搜索功能
        search_keywords = request.GET.get('keywords', '')
        if search_keywords:
            # 在name字段进行操作,做like语句的操作。i代表不区分大小写
            # or操作使用Q
            all_teachers = all_teacher.filter(name__icontains=search_keywords)

个人中心信息展示

新建usercenter-bae.html当模板

进行配置

 path("users/", include('users.urls', namespace="users")),

from django.urls import path
from users.views import UserinfoView
app_name = 'users'
urlpatterns = [
    #用户信息
    path("info/", UserinfoView.as_view(),name='user_info'),
]

class UserinfoView(LoginRequiredMixin,View):
    '''用户个人信息'''
    def get(self,request):
        return render(request,'usercenter-info.html',{})

前端显示个人信息

    <div class="right">
        <div class="personal_des ">
            <div class="head" style="border:1px solid #eaeaea;">
                <h1>个人信息</h1>
            </div>
            <div class="inforcon">
                <div class="left" style="width:242px;">
                    <iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
                    <form class="clearfix" id="jsAvatarForm" enctype="multipart/form-data" autocomplete="off" method="post" action="/users/image/upload/" target='frameFile'>
                        <label class="changearea" for="avatarUp">
                            <span id="avatardiv" class="pic">
                                <img width="100" height="100" class="js-img-show" id="avatarShow" src="{{ MEDIA_URL }}{{ request.user.image }}"/>
                            </span>
                            <span class="fl upload-inp-box" style="margin-left:70px;">
                                <span class="button btn-green btn-w100" id="jsAvatarBtn">修改头像</span>
                                <input type="file" name="image" id="avatarUp" class="js-img-up"/>
                            </span>
                        </label>
                        {% csrf_token %}
                    </form>
                    <div style="border-top:1px solid #eaeaea;margin-top:30px;">
                        <a class="button btn-green btn-w100" id="jsUserResetPwd" style="margin:80px auto;width:100px;">修改密码</a>
                    </div>
                </div>
                <form class="perinform" id="jsEditUserForm" autocomplete="off">
                    <ul class="right">
                        <li>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：
                           <input type="text" name="nick_name" id="nick_name" value="{{ request.user.name }}" maxlength="10">
                            <i class="error-tips"></i>
                        </li>
                        <li>生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：
                           <input type="text" id="birth_day" name="birday" value="{{ request.user.birthday }}" readonly="readonly"/>
                            <i class="error-tips"></i>
                        </li>
                        <li>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
                            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio"  name="gender" value="male"
                                    {% ifequal request.user.gender "male"  %}
                                    checked="checked"
                                    {% endifequal %}
                                    >男</label>
                            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="female"
                                    {% ifequal request.user.gender "female"  %}
                                    checked="checked"
                                    {% endifequal %}
                            >女</label>
                        </li>
                        <li class="p_infor_city">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
                            <input type="text" name="address" id="address" placeholder="请输入你的地址" value="{{ request.user.address }}" maxlength="10">
                            <i class="error-tips"></i>
                        </li>
                        <li>手&nbsp;&nbsp;机&nbsp;&nbsp;号：
                            <input type="text" name="mobile" id="mobile" placeholder="请输入你的手机号码" value="{{ request.user.mobile|default_if_none:'' }}" maxlength="11">
                        </li>
                        <li>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
                            <input class="borderno" type="text" name="email" readonly="readonly" value="{{ request.user.email }}"/>
                            <span class="green changeemai_btn">[修改]</span>
                        </li>
                        <li class="button heibtn">
                            <input type="button" id="jsEditUserBtn" value="保存">
                        </li>
                    </ul>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>

修改密码和修改头像

    #用户图像上传
    path("image/upload/", UploadImageView.as_view(),name='image_upload'),

新建一个用于保存图片的form

这里继承的是ModelForm,该类具有save功能

# 用于文件上传，修改头像
class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['image']

class UploadImageView(LoginRequiredMixin,View):
    '''用户图像修改'''
    def post(self,request):
        # 这时候用户上传的文件就已经被保存到image_form了 ，为modelform添加instance值直接保存
        image_form = UploadImageForm(request.POST, request.FILES, instance=request.user)
        if image_form.is_valid():
            image_form.save()
            # 所有验证通过的字段放在cleaned data
            # # 取出cleaned data中的值,一个dict
            # image = image_form.cleaned_data['image']
            # request.user.image = image
            # request.user.save()
            return HttpResponse('{"status":"success"}', content_type='application/json')
        else:
            return HttpResponse('{"status":"fail"}', content_type='application/json')

#用户个人中心修改密码
    path("update/pwd/", UpdatePwdView.as_view(),name='update_pwd'),

# 在个人中心修改用户密码
class UpdatePwdView(View):
    def post(self, request):
        modiypwd_form = ModifyPwdForm(request.POST)
        if modiypwd_form.is_valid():
            pwd1 = request.POST.get("password1", "")
            pwd2 = request.POST.get("password2", "")
            # 如果两次密码不相等，返回错误信息
            if pwd1 != pwd2:
                return HttpResponse('{"status":"fail", "msg":"密码不一致"}', content_type='application/json')
            # 如果密码一致
            user =request.user
            # 加密成密文
            user.password = make_password(pwd2)
            # save保存到数据库
            user.save()
            return HttpResponse('{"status":"success"}', content_type='application/json')
        # 验证失败说明密码位数不够。
        else:
            return HttpResponse('{"status":"fail", "msg":"填写错误请检查"}', content_type='application/json')

Ajxa代码放在deco-user.js里面

如果url不正确可自行配置'

如果遇到403,检查base中的csrf_token是否填写

发送修改邮箱验证码

有两个接口需要完成。点击获取验证码时，后台需要向用户新邮箱发送验证码。

邮箱如果出错，会返回错误信息。

输入了邮箱和验证码，验证是否匹配。

给EmailVerifyRecord再添加一个选择类型

    SEND_CHOICES = (
        ("register", "注册"),
        ("forget", "找回密码"),
        ("update_email", "修改邮箱")
    )

    #发送邮箱验证码
    path("sendemail_code/", SendEmailCodeView.as_view(),name='sendemail_code'),

# 发送邮箱验证码view
class SendEmailCodeView(LoginRequiredMixin, View):
    def get(self,request):
        # 取出需要发送的邮件
        email = request.GET.get("email", "")
        # 不能是已注册的邮箱
        if UserProfile.objects.filter(email=email):
            return HttpResponse('{"email":"邮箱已经存在"}', content_type='application/json')
        send_register_eamil(email, "update_email")
        return HttpResponse('{"status":"success"}', content_type='application/json')

修改utils/email_send.py

    if send_type == "update_email":
        email_title = "慕课在线 修改邮箱"
        email_body = "验证码:{0}".format(code)
        # 使用Django内置函数完成邮件发送。四个参数：主题，邮件内容，从哪里发，接受者list
        send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
        # 如果发送成功
        if send_status:
            pass

修改邮箱

    #修改邮箱
    path("update_email/", UpdateEmailView.as_view(),name='update_email'),

# 修改邮箱的view:
class UpdateEmailView(LoginRequiredMixin, View):
    def post(self, request):
        email = request.POST.get("email", "")
        code = request.POST.get("code", "")
        existed_records = EmailVerifyRecord.objects.filter(email=email, code=code, send_type='update_email')
        if existed_records:
            user = request.user
            user.email = email
            user.save()
            return HttpResponse('{"status":"success"}', content_type='application/json')
        else:
            return HttpResponse('{"email":"验证码无效"}', content_type='application/json')

个人信息修改

# 个人中心信息修改
class UserInfoForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['nick_name','gender','birthday','address','mobile']

给UserinfoView添加post方法

class UserinfoView(LoginRequiredMixin,View):
    '''用户个人信息'''
    def get(self,request):
        return render(request,'usercenter-info.html',{})
    def post(self, request):
        # 需要指明instance。不然无法修改，而是新增用户
        user_info_form = UserInfoForm(request.POST, instance=request.user)
        if user_info_form.is_valid():
            user_info_form.save()
            return HttpResponse('{"status":"success"}', content_type='application/json')
        else:
            return HttpResponse(json.dumps(user_info_form.errors), content_type='application/json')

我的课程

# 用户中心我的课程
path('mycourse/', MyCourseView.as_view(), name="mycourse"),

# 个人中心页我的课程
class MyCourseView(LoginRequiredMixin, View):
    def get(self, request):
        user_courses = UserCourse.objects.filter(user=request.user)
        return render(request, "usercenter-mycourse.html", {
            "user_courses":user_courses,
        })

    {% block custom_right_content %}
        <div class="right" >
            <div class="personal_des Releasecont">
                <div class="head">
                    <h1>我的课程</h1>
                </div>
            </div>
            <div class="personal_des permessage">
                <div class="companycenter">
                    <div class="group_list brief">
                        {% for cours in user_courses %}
                            <div class="module1_5 box">
                                <a href="course-detail.html">
                                    <img width="214" height="190" class="scrollLoading" src="{{ MEDIA_URL }}{{ cours.course.image }}"/>
                                </a>
                                <div class="des">
                                    <a href="course-detail.html"><h2>{{ cours.course.name }}</h2></a>
                                    <span class="fl">课时：<i class="key">{{ cours.course.learn_times }}</i></span>
                                    <span class="fr">学习人数：{{ cours.course.students }}</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl">{{ cours.course.course_org.name }}</span>
                                    <span class="star fr  notlogin" data-favid="15">{{ cours.course.course_org.fav_nums }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}

我的收藏--课程机构

 # 我的收藏--课程机构
    path('myfav/org/', MyFavOrgView.as_view(), name="myfav_org"),

# 我收藏的课程机构
class MyFavOrgView(LoginRequiredMixin, View):
    def get(self, request):
        org_list = []
        fav_orgs= UserFavorite.objects.filter(user=request.user, fav_type=2)
        # 上面的fav_orgs只是存放了id。我们还需要通过id找到机构对象
        for fav_org in fav_orgs:
            # 取出fav_id也就是机构的id。
            org_id = fav_org.fav_id
            # 获取这个机构对象
            org = CourseOrg.objects.get(id=org_id)
            org_list.append(org)
        return render(request, "usercenter-fav-org.html", {
            "org_list": org_list,
        })

我的收藏--授课讲师

Teacher添加一个方法

    def get_course_nums(self):
        return self.course_set.all().count()

# 我收藏的授课讲师
path('myfav/teacher/', MyFavTeacherView.as_view(), name="myfav_teacher"),

class MyFavTeacherView(LoginRequiredMixin, View):
    '''我收藏的授课讲师'''
    def get(self, request):
        teacher_list = []
        fav_teachers = UserFavorite.objects.filter(user=request.user, fav_type=3)
        for fav_teacher in fav_teachers:
            teacher_id = fav_teacher.fav_id
            teacher = Teacher.objects.get(id=teacher_id)
            teacher_list.append(teacher)
        return render(request, "usercenter-fav-teacher.html", {
            "teacher_list": teacher_list,
        })

我的收藏--公开课程

 #我的收藏--课程
    path('myfav/course/', MyFavCourseView.as_view(), name="myfav_course"),

class MyFavCourseView(LoginRequiredMixin,View):
    """
    我收藏的课程
    """
    def get(self, request):
        course_list = []
        fav_courses = UserFavorite.objects.filter(user=request.user, fav_type=1)
        for fav_course in fav_courses:
            course_id = fav_course.fav_id
            course = Course.objects.get(id=course_id)
            course_list.append(course)
        return render(request, 'usercenter-fav-course.html', {
            "course_list":course_list,
        })

我的消息页面

#我的消息
    path('my_message/', MyMessageView.as_view(), name="my_message"),

class MyMessageView(LoginRequiredMixin, View):
    '''我的消息'''
    def get(self, request):
        all_message = UserMessage.objects.filter(user= request.user.id)
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_message, 4,request=request)
        messages = p.page(page)
        return  render(request, "usercenter-message.html", {
        "messages":messages,
        })

取消收藏

修改usercenter-bae.html模板中的Ajax代码

修改HTML文件

注册时发生欢迎消息

# 写入欢迎注册消息
           user_message = UserMessage()
           user_message.user = user_profile.id
           user_message.message = "欢迎注册!!"
           user_message.save()

页面顶部小喇叭

所有页面都要读取一个共同的变量：未读消息的数量。我们需要向request中注入这个变量

所有页面都有request.user对象。所以我们在userprofile中自定义方法，

# 获取用户未读消息的数量
def unread_nums(self):
    from operation.models import UserMessage
    return  UserMessage.objects.filter(user=self.id).count()

退出

# 退出功能url
path('logout/', LogoutView.as_view(), name="logout"),

class LogoutView(View):
    def get(self, request):
        # django自带的logout
        logout(request)
        # 重定向到首页,
        return HttpResponseRedirect(reverse("index"))

点击数加1

课程 CourseInfoView

course.students += 1
course.save()

TeacherDetailView

teacher.click_nums += 1
teacher.save()

OrgHomeView

course_org.click_nums += 1
course_org.save()

收藏数

organization/views.py中的 AddFavView

        if exist_records:
            # 如果记录已经存在， 则表示用户取消收藏
            exist_records.delete()
            if int(type) == 1:
                course = Course.objects.get(id=int(id))
                course.fav_nums -= 1
                if course.fav_nums < 0:
                    course.fav_nums = 0
                course.save()
            elif int(type) == 2:
                org = CourseOrg.objects.get(id=int(id))
                org.fav_nums -= 1
                if org.fav_nums < 0:
                    org.fav_nums = 0
                org.save()
            elif int(type) == 3:
                teacher = Teacher.objects.get(id=int(id))
                teacher.fav_nums -= 1
                if teacher.fav_nums < 0:
                    teacher.fav_nums = 0
                teacher.save()
            return HttpResponse('{"status":"success", "msg":"收藏"}', content_type='application/json')
        else:
            user_fav = UserFavorite()
            # 过滤掉未取到fav_id type的默认情况
            if int(type) > 0 and int(id) > 0:
                user_fav.fav_id = int(id)
                user_fav.fav_type = int(type)
                user_fav.user = request.user
                user_fav.save()
                if int(type) == 1:
                    course = Course.objects.get(id=int(id))
                    course.fav_nums += 1
                    course.save()
                elif int(type) == 2:
                    org = CourseOrg.objects.get(id=int(id))
                    org.fav_nums += 1
                    org.save()
                elif int(type) == 3:
                    teacher = Teacher.objects.get(id=int(id))
                    teacher.fav_nums += 1
                    teacher.save()
                return HttpResponse('{"status":"success", "msg":"已收藏"}', content_type='application/json')

修改消息已读

class MyMessageView(LoginRequiredMixin, View):
    '''我的消息'''
    def get(self, request):
        all_message = UserMessage.objects.filter(user= request.user.id)
        # 用户进入个人中心消息页面，清空未读消息记录
        all_unread_messages = all_message.filter(has_read=False)
        for unread_message in all_unread_messages:
            unread_message.has_read = True
            unread_message.save()
        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_message, 4, request=request)
        messages = p.page(page)
        return  render(request, "usercenter-message.html", {
            "messages":messages,
        })

个人中心左侧active状态

    <div class="left">
        <ul>
            <li {% ifequal  '/users/info/' request.path %}
            class="active2"
            {% endifequal %}><a href="{% url 'users:user_info' %}">个人资料</a></li>
            <li {% ifequal  '/users/mycourse/' request.path %}
            class="active2"
            {% endifequal %}><a href="{% url 'users:mycourse' %}">我的课程</a></li>
            <li {% ifequal  '/users/myfav/' request.path|slice:'13' %}
            class="active2"
            {% endifequal %}><a href="{% url 'users:myfav_org' %}">我的收藏</a></li>
            <li {% ifequal  '/users/my_message/' request.path %}
            class="active2"
            {% endifequal %}>
                <a href="{% url 'users:my_message' %}" style="position: relative;">
                    我的消息
                </a>
            </li>
        </ul>
    </div>