开始学习的实现
当我们点击开始学习按钮时,要跳转到相应课程的章节信息以及视频资源等内容的页面。
![](https://img.haomeiwen.com/i22697958/51aa019332b193a8.png)
所以首先把哪个页面复制到templates文件夹下:
![](https://img.haomeiwen.com/i22697958/c107aa1f839cd7e8.png)
配置url:
在url中要接受一个位置参数(用户点击具体课程的id)
courses/urls.py:
#导入CourseLessonView
#章节信息
url(r'^(?P<course_id>\d+)/lesson/$',CourseLessonView.as_view(),name='lesson')
courses/view.py:
#课程章节页
class CourseLessonView(View):
'''
章节信息的展示
'''
def get(self,request,course_id,*args,**kwargs):
#获取用户点击的是哪个课程
course = Course.objects.get(id = course_id)
return render(request,'coursevideo.html',{
'course':course
})
返回coursevideo页面。
运行:
127.0.0.1:8000/course/1/lesson
![](https://img.haomeiwen.com/i22697958/e231bbac9d043cdc.png)
成功显示。但是没有样式。
配置coursedetail.html中的开始学习按钮的跳转链接
![](https://img.haomeiwen.com/i22697958/071ab556dc914a8c.png)
运行:
点击立即学习后:
![](https://img.haomeiwen.com/i22697958/9f7ec989ec3018a4.png)
显示。
到这里前后端之间的跳转连接成功。
使用模板继承优化代码
![](https://img.haomeiwen.com/i22697958/aed60718bdbb2305.png)
值得注意的是:在面包屑中设置跳转链接时,要给课程详情的连接中传递一个课程的id,这个课程的也就是coursevideo页面展示内容的课程id。
![](https://img.haomeiwen.com/i22697958/e18f1b232f2570fe.png)
运行:
![](https://img.haomeiwen.com/i22697958/559681416fab20f4.png)
当点击开始学习:
![](https://img.haomeiwen.com/i22697958/a499a906f2a7eeca.png)
现在显示的是假数据。
进行数据绑定
1.首先要替换的内容为:
![](https://img.haomeiwen.com/i22697958/520e446a43be667e.png)
前端代码展示:
![](https://img.haomeiwen.com/i22697958/52666b33f7ee788d.png)
![](https://img.haomeiwen.com/i22697958/7444cf8cfada5055.png)
2.然后就要进行绑定章节信息和章节下的视频了。
首先要在xadmin中添加章节信息和章节包含的视频连接。
给课程--一小时学会Flask增加了三个章节:
![](https://img.haomeiwen.com/i22697958/bf346d7bbcd92b8d.png)
给每一章增加了三个视频内容。
![](https://img.haomeiwen.com/i22697958/2cfd3aa536a5c5d4.png)
前端代码绑定数据:
章节的展示是需要循环显示的
找到这部分代码:
![](https://img.haomeiwen.com/i22697958/94a628cc61746afb.png)
查询章节信息,进行循环遍历,然后绑定:
![](https://img.haomeiwen.com/i22697958/1e5b01af5a019be7.png)
在章节中,还要查询视频信息,遍历显示,并绑定:
![](https://img.haomeiwen.com/i22697958/2e6f75bc22cb95bf.png)
这里也可以在后台view.py中实现,在后台查询好数据后,传到前台,前台代码更简洁。
运行:
![](https://img.haomeiwen.com/i22697958/237a700773c6b800.png)
显示完成。
logout的实现
在登录状态时,有一个退出登录的按钮。
![](https://img.haomeiwen.com/i22697958/68cb6385e06ce023.png)
找到退出按钮的html代码,实在base.html中,用于继承。
在之前的登陆判断中有该部分代码。
base.html:
![](https://img.haomeiwen.com/i22697958/b32730eaa3241deb.png)
修改一下href值:
![](https://img.haomeiwen.com/i22697958/733396995cfd7f43.png)
进入url匹配:
这部分实在总项目中的urls.py的,添加:
from apps.users.views import LoginView,LogoutView
#退出登录
path('logout/',LogoutView.as_view(),name = 'logout'),
在view.py中编写视图类:
在login时使用了django自带的login方法,它也有logout方法供我们使用。
#退出登录
class LogoutView(View):
def get(self,request,*args,**kwargs):
#退出登录
logout(request)
#重定向到index页面
return HttpResponseRedirect(reverse('index'))
运行:
![](https://img.haomeiwen.com/i22697958/e25a760185fb10c8.png)
点击退出:
![](https://img.haomeiwen.com/i22697958/e958ce499d49dab2.png)
完成。
提交GitHub。
补充:
修改coursedetail.html中立即学习按钮放入代码:
![](https://img.haomeiwen.com/i22697958/3d788c5ed4139254.png)
把a标签放在div的外边,这样,只要点击了长方形的框就能够跳转了。
网友评论