讲师收藏
在这实现这个讲师收藏之前把将是所属机构和讲师的课程以及讲师排行榜数据从数据库中查询并显示到前端来。
讲师收藏按钮
在之前的讲师详情页面,有一个左侧的讲师收藏按钮和右侧的机构收藏按钮。
分析:讲师收藏属于用户操作部分,在之前的课程收藏和机构收藏已经实现了,在operations/view/中的AddFavView类实现了这三个的收藏:
class AddFavView(View):
'''
用户收藏实现:
前台使用ajax请求post方法,把该请求的数据存到数据库中,这相当于提交了一个表单
1.当用户点击收藏按钮时,ajax请求提交,也就是进入该视图类了。
2.首先判断用户是否登录,如果没有登陆,那么就跳转到login页面进行登录。
3.如果用户登录了,那么就实例化表单验证,
如果该表单对象是不合法的,那么就返回错误信息
如果该表单对象是合法的,那么就会获取该表单中的fav_id和fav_type进一步操作。
4,获取到以后到数据库中查询用户是否已经收藏了该数据,也就是在数据库中查询是否有这条收藏记录,
如果有,那么就删除该条记录,(从已收藏到未收藏)
如果没有,就插入该条记录。(未收藏到已收藏)
'''
# POST方法
def post(self, request, *args, **kwargs):
# 先判断用户是否登录
if not request.user.is_authenticated:
return JsonResponse({
'status': 'fail',
'msg': '用户未登录'
})
# 实例化表单验证类
user_fav_form = UserFavForm(request.POST)
if user_fav_form.is_valid(): # 如果是合法的
fav_id = user_fav_form.cleaned_data['fav_id']
fav_type = user_fav_form.cleaned_data['fav_type']
#判断用户是否已经收藏
exist = UserFavorite.objects.filter(user=request.user,fav_id = fav_id,fav_type=fav_type)
if exist: #如果已经收藏,就删除该信息
exist.delete()
#当数据库中已经有该记录时,就删除该记录,改为未收藏状态。
if fav_type ==1:
course = Course.objects.get(id=fav_id)
course.fav_nums-=1
course.save()
elif fav_type == 2:
courseorg = CourseOrg.objects.get(id=fav_id)
courseorg.fav_nums -= 1
courseorg.save()
elif fav_type == 3:
teacher = Teacher.objects.get(id=fav_id)
teacher.fav_nums-=1
teacher.save()
return JsonResponse({
'status':'success',
'msg':'收藏'
})
else:
#添加数据,创建对象
userfav = UserFavorite()
userfav.user = request.user
userfav.fav_id = fav_id
userfav.fav_type = fav_type
userfav.save()
return JsonResponse({
'status': 'success',
'msg': '已收藏'
})
else:
return JsonResponse({
'status': 'fail',
'msg': '参数错误'
})
所以我们只需要在前台的教师详情页面使用ajax请求给这个视图类发送请求即可:
<script type="text/javascript">
//收藏分享
function add_fav(current_elem, fav_id, fav_type) {
$.ajax({
cache: false,
type: "POST",
url: "{% url 'op:fav' %}",
data: {'fav_id': fav_id, 'fav_type': fav_type},
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)
}
},
});
}
$(document).ready(function () {
$('#jsLeftBtn').on('click', function () {
add_fav($(this), {{ teacher.id }}, 3);
});
});
$(document).ready(function () {
$('#jsRightBtn').on('click', function () {
add_fav($(this), {{ teacher.org.id }}, 2);
});
});
</script>
注意点:发送的地址为op/fav,也就是用户操作app中的AddFavView类中。
讲师收藏状态的实现
我们实现了讲师收藏按钮的添加,然后我们要进行显示到前端页面,也就是说当用户进入页面后,收藏按钮的收藏状态要进行实时显示,所以在后端的的讲师详情的view中在进入该讲师详情页时,需要在数据库中查询该讲师的收藏状态,并传递到前台来相应显示。
organizations/views.py:
#讲师详情
class TeacherDetailView(View):
def get(self, request,teacher_id, *args, **kwargs):
teacher = Teacher.objects.get(id=int(teacher_id)) #获取用户点击的讲师信息
#讲师收藏
has_fav_Teacher = False
has_fav_org = False
if request.user.is_authenticated: #如果用户通过验证
#查询用户是否收藏了该课程或该机构
#fav_type=1 证明课程收藏,如果查出来,说明已经收藏了这个课
if UserFavorite.objects.filter(user=request.user,fav_id=int(teacher_id),fav_type=3):
has_fav_Teacher = True
if UserFavorite.objects.filter(user=request.user, fav_id=int(teacher.org.id), fav_type=2):
has_fav_org = True
#讲师排行
hot_teachers = Teacher.objects.all().order_by('-click_nums')[:3]
return render(request,'teacher-detail.html',{
'teacher':teacher, #讲师信息
'has_fav_Teacher':has_fav_Teacher, #用户是否收藏该讲师
'hot_teachers':hot_teachers #讲师排行
})
在前端根据has_fav_Teacher和has_fav_org的值在前端进行相应的显示:
讲师:
![](https://img.haomeiwen.com/i22697958/ec3300b61441f4ef.png)
机构:
![](https://img.haomeiwen.com/i22697958/61e4096c830a3e11.png)
如果值为真,那么就说明后端查询数据库时有这条记录,也就是该用户收藏了该讲师或机构,那么就显示已收藏,反之显示收藏(未收藏状态)。
运行:
点击讲师和机构的收藏按钮后:
![](https://img.haomeiwen.com/i22697958/8654f78cc9495e0b.png)
数据库:
![](https://img.haomeiwen.com/i22697958/da70483291497373.png)
刷新页面:
![](https://img.haomeiwen.com/i22697958/d6adc6cc2246a956.png)
不发生变化。
个人中心--个人收藏
个人收藏的页面分为三个页面:
- 收藏课程
- 收藏机构
- 收藏讲师
在这里我们着重讲一个,其他两个就仿照这个进行编写即可。
收藏课程页面
编写url:
#个人收藏
url(r'^myfav_org/$',MyFavOrgView.as_view(),name='myfav_org'),
url(r'^myfav_course/$',MyFavCourseView.as_view(),name='myfav_course'),
url(r'^myfav_teacher/$',MyFavTeacherView.as_view(),name='myfav_teacher'),
编写视图view
在users/views.py:
#收藏
#收藏机构
class MyFavOrgView(LoginRequiredMixin,View):
login_url = '/login/'
def get(self, request, *args, **kwargs):
#查询数据库中当前用户收藏的机构信息
user_orgs = UserFavorite.objects.filter(user=request.user,fav_type=2)
org_list = []
#遍历这些信息取出id,并根据id在机构类中过滤用户收藏的机构
for fav_org in user_orgs:
org = CourseOrg.objects.get(id=fav_org.fav_id) #id是唯一的,所以使用get
org_list.append(org)
return render(request,'usercenter-fav-org.html',{
'org_list':org_list,
})
#收藏课程
class MyFavCourseView(LoginRequiredMixin,View):
login_url = '/login/'
def get(self, request, *args, **kwargs):
# 查询数据库中当前用户收藏的课程信息
user_course = UserFavorite.objects.filter(user=request.user, fav_type=1)
course_list = []
# 遍历这些信息取出id
for fav_course in user_course:
#根据id在课程类中过滤用户收藏的课程
course = Course.objects.get(id=fav_course.fav_id)
course_list.append(course)
return render(request,'usercenter-fav-course.html',{
'course_list':course_list,
})
#收藏讲师
class MyFavTeacherView(LoginRequiredMixin,View):
login_url = '/login/'
def get(self, request, *args, **kwargs):
# 查询数据库中当前用户收藏的讲师信息
user_teacher = UserFavorite.objects.filter(user=request.user, fav_type=3)
teacher_list = []
# 遍历这些信息取出id
for fav_teacher in user_teacher:
# 根据id在课程类中过滤用户收藏的课程
teacher = Teacher.objects.get(id=fav_teacher.fav_id)
teacher_list.append(teacher)
return render(request,'usercenter-fav-teacher.html',{
'teacher_list':teacher_list
})
三个视图类大概都是一个意思
分析:
1.个人中心的页面是需要登陆状态下访问的,所以要进行登陆验证(LoginRequiredMixin)
2.在get方法中首先根据当前用户和收藏类型在用户收藏类中查询有关记录。
3.需要查询课程信息,那么我们想课程类和用户收藏之间的唯一关系就是id,所以遍历这些记录,每循环一次,取出该课程id,并根据id值在课程类中取到该课程,并加到一个list中。最后将list传给前台。
在前台:
这里以课程收藏揶页为例:
使用模板继承后,进行数据填充和选项卡的高亮:
数据填充和跳转链接(课程详情(id)):
![]()
选项卡的高亮,并设置跳转链接:
![]()
最后一个问题:
当用户点击我的收藏时,会有一个默认的显示页--自己设置(这里设置课程收藏页)
在usercenter_base.html:
![]()
设置跳转链接即可。
在授课机构中有一个判断是否认证和金牌:
{% if org.is_auth %}
<img src="{% static 'images/authentication.png' %}"/>
{% endif %}
{% if org.is_gold %}
<img src="{% static 'images/gold.png' %}"/>
{% endif %}
网友评论