|
|
# 开发文档
|
|
|
|
|
|
整个开发过程包括：搭建环境、注册登录功能、首页功能、详情页功能。
|
|
|
|
|
|
## 1.搭建环境
|
|
|
|
|
|
带领大家搭建开发环境。我们会依次安装python、pip、django、mysql和其他的一些必要类库。
|
|
|
|
|
|
<!--more-->
|
|
|
|
|
|
### 安装python
|
|
|
安装 Python 非常简单，去 [Python 官方网站](https://www.python.org/downloads/) 找到 Python3 的下载地址，根据你的系统选择32位或者64位的安装包，下载好后双击安装即可。
|
|
|
|
|
|
安装完毕后，在命令行输入 python -v ，如果输出了 Python 的版本号，说明 Python 已安装成功。
|
|
|
```
|
|
|
$ python3 -V
|
|
|
Python 3.7.0
|
|
|
```
|
|
|
### 安装pip
|
|
|
如果已经安装了python3， 那么pip3会自动的被安装。
|
|
|
|
|
|
### 安装django
|
|
|
安装django非常简单，一条命令搞定。
|
|
|
```
|
|
|
pip3 install django
|
|
|
```
|
|
|
### 安装mysql
|
|
|
由于该项目使用的是mysql数据库，所以需要安装mysql。
|
|
|
|
|
|
如果你使用的是Windows或macOS系统，那么可以去 [MySQL官网](https://dev.mysql.com/downloads/mysql/) 直接下载安装包，一步步安装即可（笔者安装的是MySQL 5.7）。安装过程中会提示创建输账号和密码，一定要记得创建哦～。
|
|
|
|
|
|
如果你使用的是Ubuntu系统，可以使用apt-get命令安装
|
|
|
```
|
|
|
sudo apt-get install mysql-server
|
|
|
```
|
|
|
安装完毕后，可使用`mysql -V`查看mysql版本号。
|
|
|
|
|
|
然后创建数据库，命名为video
|
|
|
```
|
|
|
CREATE DATABASE video CHARACTER SET utf8;
|
|
|
```
|
|
|
|
|
|
### 安装PyCharm
|
|
|
|
|
|
PyCharm 是一款功能强大的 Python 编辑器，具有跨平台性。 我们项目所有功能的开发都是在pycharm上面完成的。
|
|
|
|
|
|
到[PyCharm官网](https://www.jetbrains.com/pycharm/download/)下载PyCharm安装包。
|
|
|
选择对应系统（Windows/Mac）的版本下载。一般学习用直接安装社区版本即可足够用。
|
|
|
|
|
|
下载之后，双击点下一步安装即可。
|
|
|
|
|
|
### 其他安装
|
|
|
|
|
|
另外，下面这些是项目开发过程中会用到的类库，放到了requirements.txt里面
|
|
|
|
|
|
```
|
|
|
django_ratelimit==1.1.0 （限制流量的类库）
|
|
|
|
|
|
PyMySQL==0.9.2 (连接mysql数据库的驱动)
|
|
|
|
|
|
django_chunked_upload==1.1.3 （文件上传库）
|
|
|
|
|
|
sorl-thumbnail==12.5.0 （图片显示工具）
|
|
|
|
|
|
pillow==5.3.0 （图片显示）
|
|
|
```
|
|
|
可以使用pip3直接安装
|
|
|
|
|
|
如`pip3 install -r requiredments.txt`
|
|
|
|
|
|
### 创建Django工程
|
|
|
|
|
|
一切就绪，我们创建django工程，仅需要一行命令
|
|
|
|
|
|
```
|
|
|
django-admin startproject videoproject
|
|
|
```
|
|
|
创建之后，可使用pycharm打开videoproject文件夹，查看文件结构
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pycharm是很强大的，有自带的命令行工具（Terminal），版本控制工具（Version Control）。
|
|
|
|
|
|
打开Terminal，输入
|
|
|
```
|
|
|
python3 manage.py runserver
|
|
|
```
|
|
|
来启动项目，**在之后的开发中，我们会经常用到该命令行来调试程序。**
|
|
|
|
|
|
命令行输出
|
|
|
```
|
|
|
Starting development server at http://127.0.0.1:8000/
|
|
|
Quit the server with CONTROL-C.
|
|
|
```
|
|
|
然后在浏览器地址栏输入http://127.0.0.1:8000/ 即可看到django默认首页了。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 项目配置
|
|
|
|
|
|
项目的配置文件位于`videoproject/videoproject/settings.py`
|
|
|
|
|
|
#### 配置编码
|
|
|
首先需要配置的是文字编码格式，django默认的编码是英语格式，我们把它改成中文格式，需要修改下面几个变量的值。
|
|
|
```
|
|
|
LANGUAGE_CODE = 'zh-hans' # zh-hans为中文编码
|
|
|
TIME_ZONE = 'Asia/Shanghai' # 国际时区改成中国时区
|
|
|
USE_I18N = True
|
|
|
USE_L10N = True
|
|
|
USE_TZ = False
|
|
|
```
|
|
|
|
|
|
#### 配置static
|
|
|
然后还需要配置资源文件目录，用于存储CSS、Javascript、Images等文件。这里我们设置目录为/static/
|
|
|
```
|
|
|
STATIC_URL = '/static/'
|
|
|
STATICFILES_DIRS = (
|
|
|
os.path.join(BASE_DIR, "static"),
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### 配置数据库
|
|
|
然后还需要配置数据库信息，django默认使用的是sqlite数据库，我们修改为mysql数据库。找到DATABASES节点，修改为如下代码。其中，NAME为数据库名，USER为mysql的用户名，PASSWORD为密码，HOSY为127.0.0.1，PORT为3306
|
|
|
```
|
|
|
DATABASES = {
|
|
|
'default': {
|
|
|
'ENGINE': 'django.db.backends.mysql',
|
|
|
'NAME': 'video',
|
|
|
'USER': 'root',
|
|
|
'PASSWORD': '123456',
|
|
|
'HOST':'127.0.0.1',
|
|
|
'PORT':'3306',
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
配置好数据库之后，还需要在`videoproject/videoproject/__init__.py`安装mysql驱动，只需要写入代码：
|
|
|
```
|
|
|
import pymysql
|
|
|
pymysql.install_as_MySQLdb()
|
|
|
```
|
|
|
上面代码运行的前提是你电脑上已经安装了PyMySQL类库。
|
|
|
|
|
|
最后可再次运行工程，检查配置是否正确。
|
|
|
|
|
|
## 2.注册登录功能
|
|
|
|
|
|
用户注册登录是一个网站的基本功能，django对这部分进行了很好的封装，我们只需要在django的基础上做些简单的修改就可以达到我们想要的效果。在本讲中，我们会用到user中的用户授权方面的一些函数，还会对django中的user进行扩展，以及django中的form验证。
|
|
|
|
|
|
<!--more-->
|
|
|
|
|
|
### 效果展示
|
|
|
|
|
|
**注册页面**
|
|
|
|
|
|
|
|
|
**登录页面**
|
|
|
|
|
|
|
|
|
### 创建users应用
|
|
|
|
|
|
django的设计哲学是，一个应用只提供一种功能，比如users应用只提供用户相关功能，comment应用只提供评论相关功能，这能提高代码的重复利用率。
|
|
|
|
|
|
在django中，只需要下面一条命令，即可建立users应用
|
|
|
```
|
|
|
python3 manage.py startapp users
|
|
|
```
|
|
|
|
|
|
### 建表
|
|
|
|
|
|
我们需要一个用户表，用来实现登录注册功能，虽然django已经自带来用户登录注册功能，也有相应的表，但是不符合中国人习惯，需要我们对user模型进行自定义。实现自定义User模型最简单的方式就是继承AbstractBaseUser，AbstractBaseUser实现了User的核心功能，我们只需加一些额外的字段进行补充即可。
|
|
|
|
|
|
User模型原有的字段有：
|
|
|
- username
|
|
|
- password
|
|
|
- last_login
|
|
|
- is_superuser
|
|
|
- first_name
|
|
|
- last_name
|
|
|
- email
|
|
|
- is_staff
|
|
|
- is_active
|
|
|
- date_joined
|
|
|
|
|
|
这些都是最基本的字段，并不能满足我们的需求。
|
|
|
|
|
|
根据网站自身业务，我们又添加了下面的字段
|
|
|
- nickname(昵称)
|
|
|
- avatar(头像)
|
|
|
- mobile(手机号)
|
|
|
- gender(性别)
|
|
|
- subscribe(是否订阅)
|
|
|
|
|
|
我们只需在users/models.py中写入代码
|
|
|
```
|
|
|
from django.contrib.auth.models import AbstractUser
|
|
|
from django.db import models
|
|
|
|
|
|
class User(AbstractUser):
|
|
|
GENDER_CHOICES = (
|
|
|
('M', '男'),
|
|
|
('F', '女'),
|
|
|
)
|
|
|
nickname = models.CharField(blank=True, null=True, max_length=20)
|
|
|
avatar = models.FileField(upload_to='avatar/')
|
|
|
mobile = models.CharField(blank=True, null=True, max_length=13)
|
|
|
gender = models.CharField(max_length=1, choices=GENDER_CHOICES,blank=True, null=True)
|
|
|
subscribe = models.BooleanField(default=False)
|
|
|
|
|
|
class Meta:
|
|
|
db_table = "v_user"
|
|
|
|
|
|
```
|
|
|
> gender是性别字段，其中用到了choices=GENDER_CHOICES。这种方式常常用在下拉框或单多选框，例如 M对应男 F对应女。
|
|
|
|
|
|
### url配置
|
|
|
在user文件夹下面，新建url.py文件，写入登录、注册和退出的url信息。app_name是命名空间，我们命名为'users'。
|
|
|
```
|
|
|
from django.urls import path
|
|
|
from . import views
|
|
|
|
|
|
app_name = 'users'
|
|
|
urlpatterns = [
|
|
|
path('login/', views.login, name='login'),
|
|
|
path('signup/', views.signup, name='signup'),
|
|
|
path('logout/', views.logout, name='logout'),
|
|
|
]
|
|
|
```
|
|
|
url路由配置好了，我们下面就开始写视图函数代码了
|
|
|
|
|
|
### 注册函数
|
|
|
|
|
|
我们先来写注册函数，写注册，当然得有注册表单了，幸运的是，在django中，可以用代码来生成表单。我们只需在users下新建forms.py文件，然后写入注册表单的代码。
|
|
|
```
|
|
|
class SignUpForm(UserCreationForm):
|
|
|
username = forms.CharField(min_length=4,max_length=30,
|
|
|
error_messages={
|
|
|
'min_length': '用户名不少于4个字符',
|
|
|
'max_length': '用户名不能多于30个字符',
|
|
|
'required': '用户名不能为空',
|
|
|
},
|
|
|
widget=forms.TextInput(attrs={'placeholder': '请输入用户名'}))
|
|
|
password1 = forms.CharField(min_length=8, max_length=30,
|
|
|
error_messages={
|
|
|
'min_length': '密码不少于8个字符',
|
|
|
'max_length': '密码不能多于30个字符',
|
|
|
'required': '密码不能为空',
|
|
|
},
|
|
|
widget=forms.PasswordInput(attrs={'placeholder': '请输入密码'}))
|
|
|
password2 = forms.CharField(min_length=8,max_length=30,
|
|
|
error_messages={
|
|
|
'min_length': '密码不少于8个字符',
|
|
|
'max_length': '密码不能多于30个字符',
|
|
|
'required': '密码不能为空',
|
|
|
},
|
|
|
widget=forms.PasswordInput(attrs={'placeholder': '请确认密码'}))
|
|
|
|
|
|
class Meta:
|
|
|
model = User
|
|
|
fields = ('username', 'password1', 'password2',)
|
|
|
|
|
|
error_messages = {'password_mismatch': '两次密码不一致', }
|
|
|
|
|
|
```
|
|
|
我们的表单一共有三个字段：username、password1、password2，它们都是CharField类型，widget分别是TextInput和PasswordInput。而且django是自带验证的，只需要我们配置好error_messages字典，当form验证的时候，就会显示我们自定义的错误信息。
|
|
|
有了注册表单后，就可以在前端模板和视图函数中使用它。
|
|
|
|
|
|
下面是注册视图函数。
|
|
|
|
|
|
```
|
|
|
...
|
|
|
from django.contrib.auth import authenticate, login as auth_login, logout as auth_logout
|
|
|
|
|
|
def signup(request):
|
|
|
if request.method == 'POST':
|
|
|
form = SignUpForm(request.POST)
|
|
|
if form.is_valid():
|
|
|
form.save()
|
|
|
username = form.cleaned_data.get('username')
|
|
|
raw_password1 = form.cleaned_data.get('password1')
|
|
|
user = authenticate(username=username, password=raw_password1)
|
|
|
auth_login(request, user)
|
|
|
return redirect('home')
|
|
|
else:
|
|
|
print(form.errors)
|
|
|
else:
|
|
|
form = SignUpForm()
|
|
|
return render(request, 'registration/signup.html', {'form': form})
|
|
|
|
|
|
```
|
|
|
|
|
|
在signup函数中，我们通过form = SignUpForm初始化一个表单，并在render函数中传递给模板。
|
|
|
|
|
|
注册模板文件写在了templates/registration/signup.html
|
|
|
|
|
|
关键代码是
|
|
|
```
|
|
|
<form class="ui large form" novalidate method="post" action="{% url 'users:signup' %}" enctype="multipart/form-data" >
|
|
|
{% csrf_token %}
|
|
|
<div class="ui stacked segment">
|
|
|
<div class="field">
|
|
|
{{form.username}}
|
|
|
</div>
|
|
|
<div class="field">
|
|
|
{{form.password1}}
|
|
|
</div>
|
|
|
<div class="field">
|
|
|
{{form.password2}}
|
|
|
</div>
|
|
|
<button class="ui submit button" type="submit">注册</button>
|
|
|
</div>
|
|
|
{% include "base/form_errors.html" %}
|
|
|
</form>
|
|
|
```
|
|
|
form的action为
|
|
|
```
|
|
|
{% url 'users:signup' %}
|
|
|
```
|
|
|
即在url.py中定义的signup函数。
|
|
|
通过post请求传递给signup，在signup中，通过如下四行代码来实现注册，并自动登录的。
|
|
|
```
|
|
|
username = form.cleaned_data.get('username')
|
|
|
raw_password1 = form.cleaned_data.get('password1')
|
|
|
user = authenticate(username=username, password=raw_password1)
|
|
|
auth_login(request, user)
|
|
|
```
|
|
|
|
|
|
|
|
|
### 登录函数
|
|
|
登录函数与注册函数的模式是一样的，都是先写form，写模板，最后写视图函数。
|
|
|
由于form和模板的代码和注册功能类似，这里就不贴了，大家可以上[github](https://github.com/geeeeeeeek/videoproject)查看。
|
|
|
|
|
|
重点讲一下login视图函数
|
|
|
|
|
|
```
|
|
|
def login(request):
|
|
|
if request.method == 'POST':
|
|
|
next = request.POST.get('next', '/')
|
|
|
form = UserLoginForm(request=request, data=request.POST)
|
|
|
if form.is_valid():
|
|
|
username = form.cleaned_data.get('username')
|
|
|
password = form.cleaned_data.get('password')
|
|
|
user = authenticate(username=username, password=password)
|
|
|
if user is not None:
|
|
|
auth_login(request, user)
|
|
|
return redirect(next)
|
|
|
else:
|
|
|
print(form.errors)
|
|
|
else:
|
|
|
next = request.GET.get('next', '/')
|
|
|
form = UserLoginForm()
|
|
|
print(next)
|
|
|
return render(request, 'registration/login.html', {'form': form, 'next':next})
|
|
|
```
|
|
|
在login函数中，我们多了一个next变量，next对应的是登录后要跳转的url，其实这是一种场景，假如你在购物网站买东西，最后付款的时候，会跳转到付款页，假如你没有登录，网站会提示你登录，登录后，会再次跳转到付款页。
|
|
|
|
|
|
当然了，跳转到登录页的时候，需要你在url后追加next参数，如 aaa. com/login/?next=bbb. com
|
|
|
这样用户登录后就会跳到bbb. com
|
|
|
|
|
|
|
|
|
### 退出函数
|
|
|
|
|
|
```
|
|
|
from django.contrib.auth import authenticate, login as auth_login, logout as auth_logout
|
|
|
|
|
|
def logout(request):
|
|
|
auth_logout(request)
|
|
|
return redirect('home')
|
|
|
```
|
|
|
退出功能，仅需要一行代码 auth_logout(request) 就ok了。
|
|
|
|
|
|
## 3.首页功能
|
|
|
|
|
|
|
|
|
在本讲中，我们开始首页功能的开发，在开发过程中，大家将会学习到Django中的通用视图类、分页对象paginator以及foreignKey外键的使用。
|
|
|
|
|
|
<!--more-->
|
|
|
|
|
|
**效果演示**
|
|
|
|
|
|
|
|
|
### 整体功能
|
|
|
大家可先通过 [网站演示地址](https://v.mypython.me/) 浏览一下首页的效果。我们首页呢，比较简洁大方，让人一目了然。我这样设计的目的呢，是让大家把精力放到学习django上面来，不必过度关注花哨的页面效果。
|
|
|
|
|
|
我们把首页拆解为4个小的业务模块来开发，分别是：列表显示、分页功能、搜索功能、分类功能。下面我们分别对这四个功能模块进行开发讲解。
|
|
|
|
|
|
### 开发思路
|
|
|
|
|
|
开发一个功能的基本思路是：先新建应用，然后分析功能涉及到哪些业务，从而分析出需要的数据库字段，然后编写模型，之后就是展示阶段，通过url路由配置视图函数，来将模型里面的数据显示出来。
|
|
|
|
|
|
ok，我们通过命令建立应用，命名为video。执行后，django将为我们新建video文件夹。
|
|
|
```
|
|
|
python3 manage.py startapp video
|
|
|
```
|
|
|
下面的功能模块开发都在该应用(video)下进行。
|
|
|
|
|
|
### 建模型
|
|
|
|
|
|
此处，我们需要建立两个模型，分别是分类表(classification)和视频表(video)。他们是多对一的关系(一个分类对应多个视频，一个视频对应一个分类)。
|
|
|
|
|
|
首先编写Classification表，在model.py下面，我们键入如下代码。
|
|
|
字段有title(分类名称)和status(是否启用)
|
|
|
```
|
|
|
class Classification(models.Model):
|
|
|
list_display = ("title",)
|
|
|
title = models.CharField(max_length=100,blank=True, null=True)
|
|
|
status = models.BooleanField(default=True)
|
|
|
|
|
|
class Meta:
|
|
|
db_table = "v_classification"
|
|
|
```
|
|
|
|
|
|
字段说明
|
|
|
- title 分类名称。数据类型是CharField，最大长度为max_length=100，允许为空null=True
|
|
|
- status 是否启用。数据类型是BooleanField,默认为default=True
|
|
|
- db_table 表名
|
|
|
|
|
|
然后编写Video模型，根据网站业务，我们设置了title(标题)、 desc(描述)、 classification(分类)、file(视频文件)、cover(封面)、status(发布状态)等字段。其中classification是一个ForeignKey外键字段，表示一个分类对应多个视频，一个视频对应一个分类(多对一)
|
|
|
|
|
|
```
|
|
|
class Video(models.Model):
|
|
|
STATUS_CHOICES = (
|
|
|
('0', '发布中'),
|
|
|
('1', '未发布'),
|
|
|
)
|
|
|
title = models.CharField(max_length=100,blank=True, null=True)
|
|
|
desc = models.CharField(max_length=255,blank=True, null=True)
|
|
|
classification = models.ForeignKey(Classification, on_delete=models.CASCADE, null=True)
|
|
|
file = models.FileField(max_length=255)
|
|
|
cover = models.ImageField(upload_to='cover/',blank=True, null=True)
|
|
|
status = models.CharField(max_length=1 ,choices=STATUS_CHOICES, blank=True, null=True)
|
|
|
create_time = models.DateTimeField(auto_now_add=True, blank=True, max_length=20)
|
|
|
|
|
|
```
|
|
|
|
|
|
字段说明
|
|
|
- title 视频标题。数据类型是charField，最大长度为max_length=100，允许为空null=True
|
|
|
- desc 视频描述。数据类型是charField，最大长度为max_length=255，允许为空null=True
|
|
|
- file 视频文件地址。数据类型是fileField。其中存的是视频文件的地址，在之后的视频管理中我们将会对视频的上传进行具体的讲解。
|
|
|
- cover 视频封面。数据类型是ImageField。存储目录为upload_to='cover/'，允许为空null=True
|
|
|
- status 视频状态。是一个选择状态，用choices设置多选元祖。
|
|
|
- create_time 创建时间。数据类型是DateTimeField 。设置自动生成时间auto_now_add=True
|
|
|
|
|
|
> ForeignKey 表明一种一对多的关联关系。比如这里我们的视频和分类的关系，一个视频只能对应一个分类，而一个分类下可以有多个视频。
|
|
|
更多关于ForeinkKey的说明，可以参看 [ForeignKey官方介绍](https://docs.djangoproject.com/zh-hans/2.1/topics/db/examples/many_to_one/)
|
|
|
|
|
|
|
|
|
|
|
|
### 列表显示
|
|
|
|
|
|
要想访问到首页，必须先配置好路由。在video下建立urls.py文件，写入如下代码
|
|
|
```
|
|
|
from django.urls import path
|
|
|
from . import views
|
|
|
|
|
|
app_name = 'video'
|
|
|
urlpatterns = [
|
|
|
path('index', views.IndexView.as_view(), name='index'),
|
|
|
]
|
|
|
```
|
|
|
一条path语句就代表一条路由信息。这样我们就可以在浏览器输入127.0.0.1:8000/video/index来访问首页了。
|
|
|
|
|
|
显示列表数据非常简单，我们使用django中内置的视图模版类ListView来显示，首先在view.py中编写IndexView类，用它来显示列表数据。键入如下代码
|
|
|
```
|
|
|
class IndexView(generic.ListView):
|
|
|
model = Video
|
|
|
template_name = 'video/index.html'
|
|
|
context_object_name = 'video_list'
|
|
|
```
|
|
|
此处，我们使用了django提供的通用视图类ListView, ListView使用很简单，只需要我们简单的配置几行代码，即可将数据库里面的数据渲染到前端。比如上述代码中，我们配置了
|
|
|
- model = Video, 作用于Video模型
|
|
|
- template_name = 'video/index.html' ，告诉ListView要使用我们已经创建的模版文件。
|
|
|
- context_object_name = 'video_list' ，上下文变量名，告诉ListView，在前端模版文件中，可以使用该变量名来展现数据。
|
|
|
|
|
|
之后，我们在templates文件夹下，建立video目录，用来存放视频相关的模板文件，首先我们创建首页文件index.html。并将刚才获取到的数据显示出来。
|
|
|
```
|
|
|
<div class="ui grid">
|
|
|
{% for item in video_list %}
|
|
|
<div class="four wide column">
|
|
|
<div class="ui card">
|
|
|
<a class="image">
|
|
|
{% thumbnail item.cover "300x200" crop="center" as im %}
|
|
|
<img class="ui image" src="{{ im.url }}">
|
|
|
{% empty %}
|
|
|
{% endthumbnail %}
|
|
|
<i class="large play icon v-play-icon"></i>
|
|
|
</a>
|
|
|
<div class="content">
|
|
|
<a class="header">{{ item.title }}</a>
|
|
|
<div class="meta">
|
|
|
<span class="date">发布于{{ item.create_time|time_since}}</span>
|
|
|
</div>
|
|
|
<div class="description">
|
|
|
{{ item.view_count}}次观看
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% empty %}
|
|
|
<h3>暂无数据</h3>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
```
|
|
|
通过for循环，将video_list渲染到前端。这里我们使用到了django中的[内置标签](https://docs.djangoproject.com/zh-hans/2.1/ref/templates/builtins/)，比如for语句、empty语句。这些都是django中非常常用的语句。在之后的教程中我们会经常遇到。
|
|
|
|
|
|
另外，还使用了thumbnail标签来显示图片，[thumbnail](https://sorl-thumbnail.readthedocs.io/en/latest/installation.html)是一个很常用的python库，常常被用来做图片显示。
|
|
|
|
|
|
**显示结果如下**
|
|
|
|
|
|
|
|
|
### 分类功能
|
|
|
|
|
|
在写分类功能之前，我们先学习一个回调函数 get_context_data() 这是ListView视图类中的一个函数，在 get_context_data() 函数中，可以传一些**额外内容**到模板。因此我们可以使用该函数来传递分类数据。
|
|
|
|
|
|
要使用它，很简单。
|
|
|
|
|
|
只需要在IndexView类下面，追加get_context_data()的实现即可。
|
|
|
```
|
|
|
class IndexView(generic.ListView):
|
|
|
model = Video
|
|
|
template_name = 'video/index.html'
|
|
|
context_object_name = 'video_list'
|
|
|
|
|
|
def get_context_data(self, *, object_list=None, **kwargs):
|
|
|
context = super(IndexView, self).get_context_data(**kwargs)
|
|
|
classification_list = Classification.objects.filter(status=True).values()
|
|
|
context['classification_list'] = classification_list
|
|
|
return context
|
|
|
```
|
|
|
在上述代码中，我们将分类数据通过Classification.objects.filter(status=True).values()从数据库里面过滤出来，然后赋给classification_list，最后放到context字典里面。
|
|
|
|
|
|
在前端模板（templates/video/index.html）中，就可以通过classification_list来取数据。添加代码
|
|
|
```
|
|
|
<div class="classification">
|
|
|
<a class="ui red label" href="">全部</a>
|
|
|
{% for item in classification_list %}
|
|
|
<a class="ui label" href="">{{ item.title }}</a>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
**显示效果如下**
|
|
|
|
|
|
|
|
|
当然现在只是实现了分类展示效果，我们还需要继续实现点击效果，即点击不同的分类，显示不同的视频列表。
|
|
|
|
|
|
我们先给每个分类按钮加上href链接
|
|
|
```
|
|
|
<div class="classification">
|
|
|
<a class="ui red label" href="{% url 'home' %}">全部</a>
|
|
|
{% for item in classification_list %}
|
|
|
<a class="ui label" href="?c={{ item.id }}">{{ item.title }}</a>
|
|
|
{% endfor %}
|
|
|
</div>
|
|
|
```
|
|
|
通过添加?c={{ item.id }} 这里用c代表分类的id，点击后，会传到视图类中，在视图类中，我们使用 get_queryset() 函数，将get数据取出来。通过self.request.GET.get("c", None) 赋给c，判断c是否为None，如果为None，就响应全部，如果有值，就通过get_object_or_404(Classification, pk=self.c)先获取当前类，然后classification.video_set获取外键数据。
|
|
|
```
|
|
|
def get_queryset(self):
|
|
|
self.c = self.request.GET.get("c", None)
|
|
|
if self.c:
|
|
|
classification = get_object_or_404(Classification, pk=self.c)
|
|
|
return classification.video_set.all().order_by('-create_time')
|
|
|
else:
|
|
|
return Video.objects.filter(status=0).order_by('-create_time')
|
|
|
|
|
|
```
|
|
|
> 更多关于ForeignKey的使用方法，可参考 [这里](https://docs.djangoproject.com/zh-hans/2.1/topics/db/examples/many_to_one/)
|
|
|
|
|
|
|
|
|
### 分页功能
|
|
|
在Django中，有现成的分页解决方案，我们开发者省了不少事情。如果是简单的分页，只需要配置一下paginate_by即可实现。
|
|
|
```
|
|
|
class IndexView(generic.ListView):
|
|
|
model = Video
|
|
|
template_name = 'video/index.html'
|
|
|
context_object_name = 'video_list'
|
|
|
paginate_by = 12
|
|
|
c = None
|
|
|
```
|
|
|
- painate_by = 12每页显示12条
|
|
|
|
|
|
这样每页的分页数据就能正确的显示出来来，现在来完善底部的页码条。
|
|
|
|
|
|
|
|
|
|
|
|
页码列表需要视图类和模板共同来完成，我们先来写视图类。在前面我们已经写过get_context_data了，该函数的主要功能就是传递额外的数据给模板。这里，我们就利用get_context_data来传递页码数据。
|
|
|
|
|
|
我们先定义一个工具函数，叫get_page_list。 在项目根目录下，新建一个文件helpers.py该文件当作一个全局的工具类，用来存放各种工具函数。把get_page_list放到helpers.py里面 该函数用来生产页码列表，不但这里可以使用，以后在其他地方也可以调用该函数。
|
|
|
|
|
|
```
|
|
|
def get_page_list(paginator, page):
|
|
|
|
|
|
page_list = []
|
|
|
|
|
|
if paginator.num_pages > 10:
|
|
|
if page.number <= 5:
|
|
|
start_page = 1
|
|
|
elif page.number > paginator.num_pages - 5:
|
|
|
start_page = paginator.num_pages - 9
|
|
|
else:
|
|
|
start_page = page.number - 5
|
|
|
|
|
|
for i in range(start_page, start_page + 10):
|
|
|
page_list.append(i)
|
|
|
else:
|
|
|
for i in range(1, paginator.num_pages + 1):
|
|
|
page_list.append(i)
|
|
|
|
|
|
return page_list
|
|
|
```
|
|
|
分页逻辑：
|
|
|
```
|
|
|
if 页数>=10:
|
|
|
当前页<=5时，起始页为1
|
|
|
当前页>(总页数-5)时，起始页为(总页数-9)
|
|
|
其他情况 起始页为(当前页-5)
|
|
|
```
|
|
|
举例：
|
|
|
```
|
|
|
假设一共16页
|
|
|
情况1: 当前页==5 则页码列表为[1,2,3,4,5,6,7,8,9,10]
|
|
|
情况2: 当前页==8 则页码列表为[3,4,5,6,7,8,9,10,11,12]
|
|
|
情况3: 当前页==15 则页码列表为[7,8,9,10,11,12,13,14,15,16]
|
|
|
```
|
|
|
当然你看到这个逻辑会有点乱，建议大家读着代码，多试验几遍。
|
|
|
|
|
|
当拿到页码列表，我们继续改写get_context_data()函数。 将获取到的classification_list追加到context字典中。
|
|
|
```
|
|
|
def get_context_data(self, *, object_list=None, **kwargs):
|
|
|
context = super(IndexView, self).get_context_data(**kwargs)
|
|
|
paginator = context.get('paginator')
|
|
|
page = context.get('page_obj')
|
|
|
page_list = get_page_list(paginator, page)
|
|
|
classification_list = Classification.objects.filter(status=True).values()
|
|
|
context['c'] = self.c
|
|
|
context['classification_list'] = classification_list
|
|
|
context['page_list'] = page_list
|
|
|
return context
|
|
|
```
|
|
|
> 你或许对 paginator = context.get('paginator') page = context.get('page_obj')这两行代码感到陌生，我们只需要知道context.get('page_obj')返回的是当前页码，context.get('paginator')返回的是分页对象，就够了。更加详细的介绍，可参考[官方](https://docs.djangoproject.com/zh-hans/2.1/topics/pagination/)。
|
|
|
|
|
|
当数据传递给模板之后，模板就负责显示出来就行了。
|
|
|
|
|
|
因为分页功能比较常用，所以需要把它单独拿出来封装到一个单独的文件中，我们新建templates/base/page_nav.html文件。然后在index.html里面我们将该文件include进来。
|
|
|
```
|
|
|
{% include "base/page_nav.html" %}
|
|
|
```
|
|
|
打开page_nav.html，写入代码
|
|
|
```
|
|
|
{% if is_paginated %}
|
|
|
<div class="video-page">
|
|
|
<div class="ui circular labels">
|
|
|
{% if page_obj.has_previous %}
|
|
|
<a class="ui circular label" href="?page={{ page_obj.previous_page_number }}{% if c %}&c={{c}}{% endif %}{% if q %}&q={{q}}{% endif %}"><</a>
|
|
|
{% endif %}
|
|
|
{% for i in page_list %}
|
|
|
{% if page_obj.number == i %}
|
|
|
<a class="ui red circular label">{{ i }}</a>
|
|
|
{% else %}
|
|
|
<a class="ui circular label" href="?page={{ i }}{% if c %}&c={{c}}{% endif %}{% if q %}&q={{q}}{% endif %}">{{ i }}</a>
|
|
|
{% endif %}
|
|
|
{% endfor %}
|
|
|
{% if page_obj.has_next %}
|
|
|
<a class="ui circular label" href="?page={{ page_obj.next_page_number }}{% if c %}&c={{c}}{% endif %}{% if q %}&q={{q}}{% endif %}">></a>
|
|
|
{% endif %}
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
```
|
|
|
上面代码中，我们用到了page_obj对象的几个属性：has_previous、previous_page_number、next_page_number。通过这几个属性，即可实现复杂的页码显示效果。其中我们还这href里面加了
|
|
|
```
|
|
|
{% if c %}&c={{c}}
|
|
|
```
|
|
|
代表分类的id。
|
|
|
|
|
|
### 搜索功能
|
|
|
|
|
|
要实现搜索，我们需要一个搜索框
|
|
|
|
|
|
因为搜索框是很多页面都需要的，所以我们把代码写到templates/base/header.html文件里面。
|
|
|
```
|
|
|
<div class="ui small icon input v-video-search">
|
|
|
<input class="prompt" value="{{ q }}" type="text" placeholder="搜索视频" id="v-search">
|
|
|
<i id="search" class="search icon" style="cursor:pointer;"></i>
|
|
|
</div>
|
|
|
```
|
|
|
点击搜索或回车的代码写在了static/js/header.js里面。
|
|
|
|
|
|
我们还需要配置一下路由，添加一行搜索的路由。
|
|
|
```
|
|
|
app_name = 'video'
|
|
|
urlpatterns = [
|
|
|
path('index', views.IndexView.as_view(), name='index'),
|
|
|
path('search/', views.SearchListView.as_view(), name='search'),
|
|
|
]
|
|
|
```
|
|
|
|
|
|
搜索路由指向的视图类为SearchListView
|
|
|
|
|
|
下面我们来写SearchListView的代码
|
|
|
```
|
|
|
class SearchListView(generic.ListView):
|
|
|
model = Video
|
|
|
template_name = 'video/search.html'
|
|
|
context_object_name = 'video_list'
|
|
|
paginate_by = 8
|
|
|
q = ''
|
|
|
|
|
|
def get_queryset(self):
|
|
|
self.q = self.request.GET.get("q","")
|
|
|
return Video.objects.filter(title__contains=self.q).filter(status=0)
|
|
|
|
|
|
def get_context_data(self, *, object_list=None, **kwargs):
|
|
|
context = super(SearchListView, self).get_context_data(**kwargs)
|
|
|
paginator = context.get('paginator')
|
|
|
page = context.get('page_obj')
|
|
|
page_list = get_page_list(paginator, page)
|
|
|
context['page_list'] = page_list
|
|
|
context['q'] = self.q
|
|
|
return context
|
|
|
```
|
|
|
关键代码就是Video.objects.filter(title__contains=self.q).filter(status=0)
|
|
|
title__contains是包含的意思，表示查询title包含q的记录。利用filter将数据过滤出来。这里写了两层过滤，第一层过滤搜索关键词，第二层过滤status已发布的视频。
|
|
|
|
|
|
另外，这里也用到了get_context_data来存放额外的数据，包括分页数据、q关键词。
|
|
|
|
|
|
配置模板文件是templates/video/search.html
|
|
|
|
|
|
因此模板代码写在search.html里面
|
|
|
```
|
|
|
<div class="ui unstackable items">
|
|
|
|
|
|
{% for item in video_list %}
|
|
|
<div class="item">
|
|
|
<div class="ui tiny image">
|
|
|
{% thumbnail item.cover "300x200" crop="center" as im %}
|
|
|
<img class="ui image" src="{{ im.url }}">
|
|
|
{% empty %}
|
|
|
{% endthumbnail %}
|
|
|
</div>
|
|
|
<div class="middle aligned content">
|
|
|
<a class="header" href="{% url 'video:detail' item.pk %}">{{ item.title }}</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% empty %}
|
|
|
<h3>暂无数据</h3>
|
|
|
{% endfor %}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{% include "base/page_nav.html" %}
|
|
|
```
|
|
|
|
|
|
|
|
|
**搜索功能效果**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 4.详情页功能
|
|
|
|
|
|
在本讲中，我们开始详情页功能的开发，详情页就是对单个视频进行播放并展示视频的相关信息，比如视频标题、描述、评论信息、相关推荐等。我们将会学习到通用视图类DetailView的使用、评论动态加载、以及如何通过ajax实现喜欢和收藏功能，并通过一段段很酷的代码来说明这些功能。
|
|
|
|
|
|
<!--more-->
|
|
|
|
|
|
**效果展示**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 整体功能
|
|
|
大家可先通过 [网站演示地址](https://v.mypython.me/) 浏览一下网站效果。点击某个视频即可浏览详情页。详情页实现了是对单个视频进行展示，用户可看到视频的一些元信息，包括标题、描述、观看次数、喜欢数、收藏数等等。另外，网站还实现了评论功能，通过上拉网页即可分页加载评论列表，用户还能添加评论。网页侧栏是推荐视频列表，这里使用的推荐逻辑比较简单，就是推荐观看次数最多的视频。
|
|
|
|
|
|
我们把详情页分为4个小的业务模块来开发，分别是：视频详情显示、喜欢和收藏功能、评论功能、推荐功能。下面我们分别对这四个功能模块进行开发讲解。
|
|
|
|
|
|
### 视频详情显示
|
|
|
|
|
|
因为在上一讲中，我们已经建立了video模型，所以不必再新建模型，我们就在video模型的基础上进行扩展。上一讲，我们创建的字段有title、desc、classification、file、cover、status、create_time。这些字段目前是不够用的，我们再加几个字段，需要加**观察次数**、**喜欢的用户**、**收藏的用户**。video模型扩展后如下
|
|
|
```
|
|
|
class Video(models.Model):
|
|
|
STATUS_CHOICES = (
|
|
|
('0', '发布中'),
|
|
|
('1', '未发布'),
|
|
|
)
|
|
|
title = models.CharField(max_length=100,blank=True, null=True)
|
|
|
desc = models.CharField(max_length=255,blank=True, null=True)
|
|
|
classification = models.ForeignKey(Classification, on_delete=models.CASCADE, null=True)
|
|
|
file = models.FileField(max_length=255)
|
|
|
cover = models.ImageField(upload_to='cover/',blank=True, null=True)
|
|
|
status = models.CharField(max_length=1 ,choices=STATUS_CHOICES, blank=True, null=True)
|
|
|
view_count = models.IntegerField(default=0, blank=True)
|
|
|
liked = models.ManyToManyField(settings.AUTH_USER_MODEL,
|
|
|
blank=True, related_name="liked_videos")
|
|
|
collected = models.ManyToManyField(settings.AUTH_USER_MODEL,
|
|
|
blank=True, related_name="collected_videos")
|
|
|
create_time = models.DateTimeField(auto_now_add=True, blank=True, max_length=20)
|
|
|
|
|
|
```
|
|
|
新增了3个字段
|
|
|
|
|
|
- view_count 观看次数。数据类型是IntegerField，默认是0
|
|
|
- liked 喜欢的用户。数据类型是ManyToManyField，这是一种多对多的关系，表示一个视频可以被多个用户喜欢，一个用户也可以喜欢多个视频。记得设置用户表为settings.AUTH_USER_MODEL
|
|
|
- collected 收藏的用户。数据类型是ManyToManyField，这是一种多对多的关系，表示一个视频可以被多个用户收藏，一个用户也可以收藏多个视频。设置用户表为settings.AUTH_USER_MODEL
|
|
|
|
|
|
> 更多关于ManyToManyField的使用介绍，可以查询[django官网](https://docs.djangoproject.com/zh-hans/2.1/topics/db/examples/many_to_many/)的介绍。
|
|
|
|
|
|
下面就是详情展示阶段，我们先配置好详情页的路由信息，在video/urls.py中追加detail的路由信息。
|
|
|
|
|
|
```
|
|
|
|
|
|
app_name = 'video'
|
|
|
urlpatterns = [
|
|
|
path('index', views.IndexView.as_view(), name='index'),
|
|
|
path('search/', views.SearchListView.as_view(), name='search'),
|
|
|
path('detail/<int:pk>/', views.VideoDetailView.as_view(), name='detail'),
|
|
|
]
|
|
|
```
|
|
|
`path('detail/<int:pk>/', views.VideoDetailView.as_view(), name='detail')`即表示详情信息，注意每条视频都是有自己的主键的，所以设置路径匹配为`detail/<int:pk>/`,其中`<int:pk>`表示主键，这是django中表示主键的一种方法。这样我们就可以在浏览器输入127.0.0.1:8000/video/detail/xxx来访问详情了。
|
|
|
|
|
|
怎么显示详情呢，聪明的django为我们提供了DetailView。urls.py中设置的视图类是VideoDetailView，我们让VideoDetailView继承DetailView即可。
|
|
|
```
|
|
|
class VideoDetailView(generic.DetailView):
|
|
|
model = Video
|
|
|
template_name = 'video/detail.html'
|
|
|
```
|
|
|
|
|
|
看起来超级简单，django就是如此的酷，只需要我们配置几行代码，就能实现很强大的功能。这里我们配置model为Video模型，模板为video/detail.html，其它的工作都不用管，全都交给django去干，oh，这棒极了。
|
|
|
|
|
|
模板文件位于templates/video/detail.html，它的代码比较简单，这里就不贴了。
|
|
|
|
|
|
从效果图上我们看到还有个观看次数的展示，这里的观看次数本质上就是数据库里的一个自增字段，每次观看的时候，`view_count`自动加1。对于这个小需求，我们需要做两件事情，首先这video模型里面，添加一个次数自增函数，命名为`increase_view_count`，这很简单，如下所示：
|
|
|
```
|
|
|
def increase_view_count(self):
|
|
|
self.view_count += 1
|
|
|
self.save(update_fields=['view_count'])
|
|
|
```
|
|
|
|
|
|
然后，还需要我们在VideoDetailView视图类里面调用到这个函数。这个时候`get_object()`派上用场了。因为每次调用DetailView的时候，django都会回调`get_object()`这个函数。因此我们可以把`increase_view_count()`放到`get_object()`里面执行。完美的代码如下
|
|
|
|
|
|
```
|
|
|
class VideoDetailView(generic.DetailView):
|
|
|
model = Video
|
|
|
template_name = 'video/detail.html'
|
|
|
|
|
|
def get_object(self, queryset=None):
|
|
|
obj = super().get_object()
|
|
|
obj.increase_view_count() # 调用自增函数
|
|
|
return obj
|
|
|
```
|
|
|
|
|
|
目前为止，我们就能在详情页看到标题、描述、观看次数、收藏次数、喜欢次数。预览如下
|
|
|
|
|
|
|
|
|
|
|
|
虽然可以显示收藏人数、喜欢人数。但是目前还没实现点击喜欢/收藏的功能。下面我们来实现。
|
|
|
|
|
|
### 收藏和喜欢功能
|
|
|
|
|
|
收藏和喜欢是一组动作，因此可以用ajax来实现：用户点击后调用后端接口，接口返回json数据，前端显示结果。
|
|
|
|
|
|
既然需要接口，那我们先添加喜欢/收藏接口的路由，在video/urls.py追加代码如下
|
|
|
```
|
|
|
path('like/', views.like, name='like'),
|
|
|
path('collect/', views.collect, name='collect'),
|
|
|
```
|
|
|
|
|
|
由于喜欢和收藏的功能实现非常类似，限于篇幅，我们只实现喜欢功能。
|
|
|
|
|
|
我们先写like函数：
|
|
|
```
|
|
|
@ajax_required
|
|
|
@require_http_methods(["POST"])
|
|
|
def like(request):
|
|
|
if not request.user.is_authenticated:
|
|
|
return JsonResponse({"code": 1, "msg": "请先登录"})
|
|
|
video_id = request.POST['video_id']
|
|
|
video = Video.objects.get(pk=video_id)
|
|
|
user = request.user
|
|
|
video.switch_like(user)
|
|
|
return JsonResponse({"code": 0, "likes": video.count_likers(), "user_liked": video.user_liked(user)})
|
|
|
|
|
|
```
|
|
|
首先判断用户是否登录，如果登录了则调用`switch_like(user)`来实现喜欢或不喜欢功能，最后返回json。注意这里添加了两个注解`@ajax_required`和`@require_http_methods(["POST"])`，分别验证request必须是ajax和post请求。
|
|
|
|
|
|
switch_like()函数则写在了video/model.py里面
|
|
|
```
|
|
|
def switch_like(self, user):
|
|
|
if user in self.liked.all():
|
|
|
self.liked.remove(user)
|
|
|
else:
|
|
|
self.liked.add(user)
|
|
|
```
|
|
|
|
|
|
所有的后端工作都准备好了，我们再把视线转向前端。前端主要是写ajax代码。
|
|
|
|
|
|
由于ajax代码量较大，我们封装到一个单独的js文件中 ==> static/js/detail.js
|
|
|
|
|
|
在detail.js中，我们先实现喜欢的ajax调用：
|
|
|
|
|
|
```
|
|
|
$(function () {
|
|
|
|
|
|
// 写入csrf
|
|
|
$.getScript("/static/js/csrftoken.js");
|
|
|
|
|
|
// 喜欢
|
|
|
$("#like").click(function(){
|
|
|
var video_id = $("#like").attr("video-id");
|
|
|
$.ajax({
|
|
|
url: '/video/like/',
|
|
|
data: {
|
|
|
video_id: video_id,
|
|
|
'csrf_token': csrftoken
|
|
|
},
|
|
|
type: 'POST',
|
|
|
dataType: 'json',
|
|
|
success: function (data) {
|
|
|
var code = data.code
|
|
|
if(code == 0){
|
|
|
var likes = data.likes
|
|
|
var user_liked = data.user_liked
|
|
|
$('#like-count').text(likes)
|
|
|
if(user_liked == 0){
|
|
|
$('#like').removeClass("grey").addClass("red")
|
|
|
}else{
|
|
|
$('#like').removeClass("red").addClass("grey")
|
|
|
}
|
|
|
}else{
|
|
|
var msg = data.msg
|
|
|
alert(msg)
|
|
|
}
|
|
|
|
|
|
},
|
|
|
error: function(data){
|
|
|
alert("点赞失败")
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
```
|
|
|
|
|
|
上述代码中，关键代码是$.ajax()函数，我们传入了参数：`video_id`和`csrftoken`。其中csrftoken可通过`/static/js/csrftoken.js`生成。在success回调中，通过判断`user_liked`的值来确定自己是否喜欢过，然后改变模板中相应的css。
|
|
|
|
|
|
### 推荐功能
|
|
|
每个网站都有自己的推荐功能，且都有自己的推荐逻辑。我们**视点**的推荐逻辑是根据访问次数最高的n个视频来降序排序，然后推荐给用户的。
|
|
|
|
|
|
实现起来非常容易，我们知道详情页实现用的是VideoDetailView，我们可以在get_context_data()中把推荐内容传递给前端模板。只需要我们改写VideoDetailView的get_context_date()函数。
|
|
|
|
|
|
```
|
|
|
def get_context_data(self, **kwargs):
|
|
|
context = super(VideoDetailView, self).get_context_data(**kwargs)
|
|
|
form = CommentForm()
|
|
|
recommend_list = Video.objects.get_recommend_list()
|
|
|
context['form'] = form
|
|
|
context['recommend_list'] = recommend_list
|
|
|
return context
|
|
|
```
|
|
|
改写后，我们添加了一行
|
|
|
```
|
|
|
recommend_list = Video.objects.get_recommend_list()
|
|
|
```
|
|
|
我们把获取推荐列表的函数`get_recommend_list()`封装到了Video模型里面。在Video/models.py里面
|
|
|
我们追加代码:
|
|
|
```
|
|
|
class VideoQuerySet(models.query.QuerySet):
|
|
|
def get_recommend_list(self):
|
|
|
return self.filter(status=0).order_by('-view_count')[:4]
|
|
|
```
|
|
|
关键是`self.filter(status=0).order_by('-view_count')[:4]`，通过order_by把view_count降序排序，并选取前4条数据。
|
|
|
|
|
|
注意此处我们用了VideoQuerySet查询器，需要我们在Video下面添加一行依赖。表示用VideoQuerySet作为Video的查询管理器。
|
|
|
```
|
|
|
objects = VideoQuerySet.as_manager()
|
|
|
```
|
|
|
|
|
|
当模板拿到数据后，即可渲染显示。这里我们将推荐侧栏的代码封装到templates/video/recommend.html里面。
|
|
|
```
|
|
|
# templates/video/recommend.html
|
|
|
{% load thumbnail %}
|
|
|
<span class="video-side-title">推荐列表</span>
|
|
|
<div class="ui unstackable divided items">
|
|
|
{% for item in recommend_list %}
|
|
|
<div class="item">
|
|
|
<div class="ui tiny image">
|
|
|
{% thumbnail item.cover "300x200" crop="center" as im %}
|
|
|
<img class="ui image" src="{{ im.url }}">
|
|
|
{% empty %}
|
|
|
{% endthumbnail %}
|
|
|
</div>
|
|
|
<div class="middle aligned content">
|
|
|
<a class=" header-title" href="{% url 'video:detail' item.pk %}">{{ item.title }}</a>
|
|
|
<div class="meta">
|
|
|
<span class="description">{{ item.view_count }}次观看</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% empty %}
|
|
|
<h3>暂无推荐</h3>
|
|
|
{% endfor %}
|
|
|
|
|
|
</div>
|
|
|
```
|
|
|
并在detail.html中将它包含进来
|
|
|
```
|
|
|
{% include "video/recommend.html" %}
|
|
|
```
|
|
|
|
|
|
|
|
|
### 评论功能
|
|
|
|
|
|
评论区位于详情页下侧，显示效果如下。共分为两个部分：评论form和评论列表。
|
|
|
|
|
|
|
|
|
|
|
|
评论功能是一个独立的模块，该功能通用性较高，在其他很多网站中都有评论功能，为了避免以后开发其他网站时重复造轮子，我们建立一个新的应用，命名为comment
|
|
|
```
|
|
|
python3 manage.py startapp comment
|
|
|
```
|
|
|
接下来，我们创建comment模型
|
|
|
```
|
|
|
# 位于comment/models.py
|
|
|
|
|
|
class Comment(models.Model):
|
|
|
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
|
|
|
nickname = models.CharField(max_length=30,blank=True, null=True)
|
|
|
avatar = models.CharField(max_length=100,blank=True, null=True)
|
|
|
video = models.ForeignKey(Video, on_delete=models.CASCADE)
|
|
|
content = models.CharField(max_length=100)
|
|
|
timestamp = models.DateTimeField(auto_now_add=True)
|
|
|
|
|
|
class Meta:
|
|
|
db_table = "v_comment"
|
|
|
```
|
|
|
- user 用户。数据类型是ForeignKey，外键是settings.AUTH_USER_MODEL，并设置为级联删除on_delete=models.CASCADE
|
|
|
- nickname 用户昵称。数据类型是CharField。
|
|
|
- avatar 头像。数据类型是CharField。
|
|
|
- video 对应的视频。数据类型是ForeignKey，对应Video模型，级联删除 on_delete=models.CASCADE
|
|
|
- content 评论内容。 数据类型是CharField。
|
|
|
- timestamp 评论时间。 数据类型是DateTimeField。
|
|
|
|
|
|
|
|
|
有了模型之后，我们就可以专心写业务代码了，首先在comment下建立路由文件`urls.py`。并写入代码:
|
|
|
```
|
|
|
from django.urls import path
|
|
|
from . import views
|
|
|
|
|
|
app_name = 'comment'
|
|
|
urlpatterns = [
|
|
|
path('submit_comment/<int:pk>',views.submit_comment, name='submit_comment'),
|
|
|
path('get_comments/', views.get_comments, name='get_comments'),
|
|
|
]
|
|
|
```
|
|
|
我们配置了两条路由信息：评论提交 和 获取评论。
|
|
|
|
|
|
提交评论，需要一个form，我们把form放到video/forms.py
|
|
|
```
|
|
|
from django import forms
|
|
|
from comment.models import Comment
|
|
|
|
|
|
class CommentForm(forms.ModelForm):
|
|
|
content = forms.CharField(error_messages={'required': '不能为空',},
|
|
|
widget=forms.Textarea(attrs = {'placeholder': '请输入评论内容' })
|
|
|
)
|
|
|
|
|
|
class Meta:
|
|
|
model = Comment
|
|
|
fields = ['content']
|
|
|
```
|
|
|
|
|
|
然后在video/views.py的VideoDetailView下添加form的相关代码。
|
|
|
```
|
|
|
class VideoDetailView(generic.DetailView):
|
|
|
model = Video
|
|
|
template_name = 'video/detail.html'
|
|
|
|
|
|
def get_object(self, queryset=None):
|
|
|
obj = super().get_object()
|
|
|
obj.increase_view_count()
|
|
|
return obj
|
|
|
|
|
|
def get_context_data(self, **kwargs):
|
|
|
context = super(VideoDetailView, self).get_context_data(**kwargs)
|
|
|
form = CommentForm()
|
|
|
context['form'] = form
|
|
|
return context
|
|
|
```
|
|
|
在get_context_data()函数里面，我们把form传递给模板。
|
|
|
|
|
|
同样的，提交评论也是异步的，我们用ajax实现，我们打开static/js/detail.js，写入
|
|
|
```
|
|
|
// 提交评论
|
|
|
var frm = $('#comment_form')
|
|
|
frm.submit(function () {
|
|
|
$.ajax({
|
|
|
type: frm.attr('method'),
|
|
|
url: frm.attr('action'),
|
|
|
dataType:'json',
|
|
|
data: frm.serialize(),
|
|
|
success: function (data) {
|
|
|
var code = data.code
|
|
|
var msg = data.msg
|
|
|
if(code == 0){
|
|
|
$('#id_content').val("")
|
|
|
$('.comment-list').prepend(data.html);
|
|
|
$('#comment-result').text("评论成功")
|
|
|
$('.info').show().delay(2000).fadeOut(800)
|
|
|
}else{
|
|
|
$('#comment-result').text(msg)
|
|
|
$('.info').show().delay(2000).fadeOut(800);
|
|
|
}
|
|
|
},
|
|
|
error: function(data) {
|
|
|
}
|
|
|
});
|
|
|
return false;
|
|
|
});
|
|
|
```
|
|
|
|
|
|
评论通过ajax提交后，我们在submit_comment()中就能接收到这个请求。处理如下
|
|
|
```
|
|
|
def submit_comment(request,pk):
|
|
|
video = get_object_or_404(Video, pk = pk)
|
|
|
form = CommentForm(data=request.POST)
|
|
|
|
|
|
if form.is_valid():
|
|
|
new_comment = form.save(commit=False)
|
|
|
new_comment.user = request.user
|
|
|
new_comment.nickname = request.user.nickname
|
|
|
new_comment.avatar = request.user.avatar
|
|
|
new_comment.video = video
|
|
|
new_comment.save()
|
|
|
|
|
|
data = dict()
|
|
|
data['nickname'] = request.user.nickname
|
|
|
data['avatar'] = request.user.avatar
|
|
|
data['timestamp'] = datetime.fromtimestamp(datetime.now().timestamp())
|
|
|
data['content'] = new_comment.content
|
|
|
|
|
|
comments = list()
|
|
|
comments.append(data)
|
|
|
|
|
|
html = render_to_string(
|
|
|
"comment/comment_single.html", {"comments": comments})
|
|
|
|
|
|
return JsonResponse({"code":0,"html": html})
|
|
|
return JsonResponse({"code":1,'msg':'评论失败!'})
|
|
|
|
|
|
```
|
|
|
在接收函数中，通过form自带的验证函数来保存记录，然后将这条记录返回到前端模板。
|
|
|
|
|
|
下面我们开始评论列表的开发。
|
|
|
|
|
|
评论列表部分，我们使用了的是上拉动态加载的方案，即当页面拉到最下侧时，js加载代码会自动的获取下一页的数据并显示出来。前端部分，我们使用了一种基于js的[开源加载插件](https://github.com/ximan/dropload)。基于这个插件，可以很容易实现网页的上拉动态加载效果。它使用超级简单，仅需要调用$('.comments').dropload({})即可。我们把调用的代码封装在static/js/load_comments.js里面。
|
|
|
|
|
|
完整的调用代码如下：
|
|
|
```
|
|
|
$(function(){
|
|
|
// 页数
|
|
|
var page = 0;
|
|
|
// 每页展示15个
|
|
|
var page_size = 15;
|
|
|
|
|
|
// dropload
|
|
|
$('.comments').dropload({
|
|
|
scrollArea : window,
|
|
|
loadDownFn : function(me){
|
|
|
page++;
|
|
|
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: comments_url,
|
|
|
data:{
|
|
|
video_id: video_id,
|
|
|
page: page,
|
|
|
page_size: page_size
|
|
|
},
|
|
|
dataType: 'json',
|
|
|
success: function(data){
|
|
|
var code = data.code
|
|
|
var count = data.comment_count
|
|
|
if(code == 0){
|
|
|
$('#id_comment_label').text(count + "条评论");
|
|
|
$('.comment-list').append(data.html);
|
|
|
me.resetload();
|
|
|
}else{
|
|
|
me.lock();
|
|
|
me.noData();
|
|
|
me.resetload();
|
|
|
}
|
|
|
},
|
|
|
error: function(xhr, type){
|
|
|
me.resetload();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
```
|
|
|
|
|
|
不用过多的解释，这段代码已经非常非常清晰了，本质还是ajax的接口请求调用，调用后返回结果更新前端网页内容。
|
|
|
|
|
|
我们看到ajax调用的接口是get_comments，我们继续来实现它，它位于comment/views.py中。代码如下所示，这段代码也很简单，没有什么复杂的技术。当获取到page和page_size后，使用paginator对象来实现分页。最后通过render_to_string将html传递给模板。
|
|
|
|
|
|
```
|
|
|
def get_comments(request):
|
|
|
if not request.is_ajax():
|
|
|
return HttpResponseBadRequest()
|
|
|
page = request.GET.get('page')
|
|
|
page_size = request.GET.get('page_size')
|
|
|
video_id = request.GET.get('video_id')
|
|
|
video = get_object_or_404(Video, pk=video_id)
|
|
|
comments = video.comment_set.order_by('-timestamp').all()
|
|
|
comment_count = len(comments)
|
|
|
|
|
|
paginator = Paginator(comments, page_size)
|
|
|
try:
|
|
|
rows = paginator.page(page)
|
|
|
except PageNotAnInteger:
|
|
|
rows = paginator.page(1)
|
|
|
except EmptyPage:
|
|
|
rows = []
|
|
|
|
|
|
if len(rows) > 0:
|
|
|
code = 0
|
|
|
html = render_to_string(
|
|
|
"comment/comment_single.html", {"comments": rows})
|
|
|
else:
|
|
|
code = 1
|
|
|
html = ""
|
|
|
|
|
|
return JsonResponse({
|
|
|
"code":code,
|
|
|
"html": html,
|
|
|
"comment_count": comment_count
|
|
|
})
|
|
|
```
|
|
|
|
