KLucenの启示录

Web应用机制和术语#

下图向我们展示了Web应用的工作流程，其中涉及到的术语如下表所示。

说明：相信有经验的读者会发现，这张图中其实还少了很多东西，例如反向代理服务器、数据库服务器、防火墙等，而且图中的每个节点在实际项目部署时可能是一组节点组成的集群。当然，如果你对这些没有什么概念也不要紧，继续下去就行了，后面会给大家一一讲解的。

HTTP协议#

这里我们先费一些笔墨来说说HTTP这个协议。HTTP（超文本传输协议）是构建于TCP（传输控制协议）之上应用级协议，它利用了TCP提供的可靠的传输服务实现了Web应用中的数据交换。按照维基百科上的介绍，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法，也就是说这个协议是浏览器和Web服务器之间传输的数据的载体。关于这个协议的详细信息以及目前的发展状况，大家可以阅读《HTTP 协议入门》、《互联网协议入门》系列以及《图解HTTPS协议》这几篇文章进行了解。下图是我在四川省网络通信技术重点实验室学习和工作期间使用开源协议分析工具Ethereal（抓包工具WireShark的前身）截取的访问百度首页时的HTTP请求和响应的报文（协议数据），由于Ethereal截取的是经过网络适配器的数据，因此可以清晰的看到从物理链路层到应用层的协议数据。

HTTP请求（请求行+请求头+空行+[消息体]）：

HTTP响应（响应行+响应头+空行+消息体）：

说明：这两张图是在2009年9月10日凌晨获得的，但愿这两张如同泛黄的照片般的截图能帮助你了解HTTP到底是什么样子的。当然，如果没有专业的抓包工具，也可以通过浏览器提供的“开发者工具”来查看HTTP请求和响应的数据格式。

Django概述#

Python的Web框架有上百个，比它的关键字还要多。所谓Web框架，就是用于开发Web服务器端应用的基础设施，说得通俗一点就是一系列封装好的模块和工具。事实上，即便没有Web框架，我们仍然可以通过socket或CGI来开发Web服务器端应用，但是这样做的成本和代价在商业项目中通常是不能接受的。通过Web框架，我们可以化繁为简，降低创建、更新、扩展应用程序的工作量。刚才我们说到Python有上百个Web框架，这些框架包括Django、Flask、Tornado、Sanic、Pyramid、Bottle、Web2py、web.py等。

在上述Python的Web框架中，Django无疑是最有代表性的重量级选手，开发者可以基于Django快速的开发可靠的Web应用程序，因为它减少了Web开发中不必要的开销，对常用的设计和开发模式进行了封装，并对MVC架构提供了支持（Django中称之为MTV架构）。MVC是软件系统开发领域中一种放之四海而皆准的架构，它将系统中的组件分为模型（Model）、视图（View）和控制器（Controller）三个部分并借此实现模型（数据）和视图（显示）的解耦合。由于模型和视图进行了分离，所以需要一个中间人将解耦合的模型和视图联系起来，扮演这个角色的就是控制器。稍具规模的软件系统都会使用MVC架构（或者是从MVC演进出的其他架构），Django项目中我们称之为MTV，MTV中的M跟MVC中的M没有区别，就是代表数据的模型，T代表了网页模板（显示数据的视图），而V代表了视图函数，在Django框架中，视图函数和Django框架本身一起扮演了MVC中C的角色。

Django框架诞生于2003年，它是一个在真正的应用中成长起来的项目，由劳伦斯出版集团旗下在线新闻网站的内容管理系统（CMS）研发团队（主要是Adrian Holovaty和Simon Willison）开发，以比利时的吉普赛爵士吉他手Django Reinhardt来命名。Django框架在2005年夏天作为开源框架发布，使用Django框架能用很短的时间构建出功能完备的网站，因为它代替程序员完成了那些重复乏味的劳动，剩下真正有意义的核心业务给程序员来开发，这一点就是对DRY（Don’t Repeat Yourself）理念的最好践行。许多成功的网站和应用都是基于Python语言进行开发的，国内比较有代表性的网站包括：知乎、豆瓣网、果壳网、搜狐闪电邮箱、101围棋网、海报时尚网、背书吧、堆糖、手机搜狐网、咕咚、爱福窝、果库等，其中不乏使用了Django框架的产品。

快速上手#

第一个Django项目#

1. 检查Python环境：Django 1.11需要Python 2.7或Python 3.4以上的版本；Django 2.0需要Python 3.4以上的版本；Django 2.1和2.2需要Python 3.5以上的版本；Django 3.0需要Python 3.6以上版本。

   说明：Django框架不同版本所需的Python解释器环境，可以在Django官方文档的FAQ中找到。

   可以在macOS的终端中输入下面的命令检查Python解释器版本，Windows系统可以在命令行提示符中输入python --version。

python3 —version

1
也可以在Python的交互式环境中执行下面的代码来查看Python解释器的版本。
2

3
```shell
4
import sys
5
sys.version
6
sys.version_info

2. 更新包管理工具并安装Django环境（用于创建Django项目）。

   说明：在更新这个文档时，Django最新的正式版本是3.0.7，Django 3.0提供了对ASGI的支持，可以实现全双工的异步通信，但是目前的使用体验一般，所以暂时不推荐大家使用Django 3.0，下面我们安装的是Django 2.2.13版本。使用pip安装三方库和工具时，可以通过==来指定安装的版本。

   1
   pip3 install -U pip
   2
   pip3 install django==2.2.13

3. 检查Django环境并使用django-admin命令创建Django项目（项目名称为hellodjango）。

   1
   django-admin --version
   2
   django-admin startproject hellodjango

4. 用PyCharm打开创建好的Djang项目，并为其添加虚拟环境。

   

   如上图所示，PyCharm的项目浏览器中，最顶层的文件夹hellodjango是Python项目文件夹，这个文件夹的名字并不重要，Django项目也不关心这个文件夹叫什么名字。该文件夹下有一个同名的文件夹，它是Django项目文件夹，其中包含了__init__.py、settings.py、urls.py、wsgi.py四个文件，与名为hellodjango的Django项目文件夹同级的还有一个名为manage.py 的文件，这些文件的作用如下所示：

   • hellodjango/__init__.py：空文件，告诉Python解释器这个目录应该被视为一个Python的包。
   • hellodjango/settings.py：Django项目的配置文件。
   • hellodjango/urls.py：Django项目的URL映射声明，就像是网站的“目录”。
   • hellodjango/wsgi.py：项目运行在WSGI兼容Web服务器上的入口文件。
   • manage.py： 管理Django项目的脚本程序。

   说明：WSGI全称是Web服务器网关接口，维基百科上给出的解释是“为Python语言定义的Web服务器和Web应用程序或框架之间的一种简单而通用的接口”。

   创建虚拟环境的界面如下图所示。

   

5. 安装项目依赖项。

   方法一：打开PyCharm的终端，在终端中通过pip命令安装Django项目的依赖项。

   说明：由于已经基于Python 3解释器环境为项目创建了虚拟环境，所以虚拟环境中的python命令对应的是Python 3的解释器，而pip命令对应的是Python 3的包管理工具。

   1
   pip install django==2.2.13

   方法二：在PyCharm的偏好设置中，可以找到项目的解释器环境和已经安装的三方库，可以通过点击添加按钮来安装新的依赖项，需要提醒大家的是在安装Django依赖项时，需要指定版本号，否则将默认安装更新本文时最新的3.0.7版本。

   

   下图展示了Django版本和Python版本的对应关系，请大家自行对号入座。

   Django版本	Python版本
   1.8	2.7、3.2、3.3、3.4、3.5
   1.9、1.10	2.7、3.4、3.5
   1.11	2.7、3.4、3.5、3.6、3.7（Django 1.11.17）
   2.0	3.4、3.5、3.6、3.7
   2.1	3.5、3.6、3.7
   2.2	3.5、3.6、3.7、3.8（Django 2.2.8）
   3.0	3.6、3.7、3.8

6. 启动Django自带的服务器运行项目。

   方法一：在“Run”菜单选择“Edit Configuration”，配置“Django server”运行项目（适用于专业版PyCharm）。

   

   方法二：在“Run”菜单选择“Edit Configuration”，配置运行“Python”程序运行项目（适用于专业版和社区版PyCharm）。

   

   方法三：在PyCharm的终端（Terminal）中通过命令运行项目（适用于专业版和社区版PyCharm）。

   1
   python manage.py runserver

7. 查看运行效果。

在浏览器中输入http://127.0.0.1:8000访问我们的服务器，效果如下图所示。

说明：

1. 刚刚启动的Django自带的服务器只能用于开发和测试环境，因为这个服务器是纯Python编写的轻量级Web服务器，不适合在生产环境中使用。
2. 如果修改了代码，不需要为了让修改的代码生效而重新启动Django自带的服务器。但是，在添加新的项目文件时，该服务器不会自动重新加载，这个时候就得手动重启服务器。
3. 可以在终端中通过python manage.py help命令查看Django管理脚本程序可用的命令参数。
4. 使用python manage.py runserver启动服务器时，可以在后面添加参数来指定IP地址和端口号，默认情况下启动的服务器将运行在本机的8000端口。
5. 在终端中运行的服务器，可以通过Ctrl+C来停止它 。通过PyCharm的“运行配置”运行的服务器直接点击窗口上的关闭按钮就可以终止服务器的运行。
6. 不能在同一个端口上启动多个服务器，因为会导致地址的冲突（端口是对IP地址的扩展，也是计算机网络地址的一部分）。

8. 修改项目的配置文件settings.py。

   Django是一个支持国际化和本地化的框架，因此刚才我们看到的Django项目的默认首页也是支持国际化的，我们可以通过修改配置文件将默认语言修改为中文，时区设置为东八区。

   找到修改前的配置（在settings.py文件第100行以后）。

   1
   LANGUAGE_CODE = 'en-us'
   2
   TIME_ZONE = 'UTC'

   修改为以下内容。

   1
   LANGUAGE_CODE = 'zh-hans'
   2
   TIME_ZONE = 'Asia/Chongqing'

   刷新刚才的页面，可以看到修改语言代码和时区之后的结果。

   

总结#

至此，我们已经利用Django框架完成了一个非常小的Web应用，虽然它并没有任何的实际价值，但是可以通过这个项目对Django框架有一个感性的认识。学习Django最好的资料肯定是它的官方文档，官方文档提供了对多国语言的支持，而且有新手教程引导初学者学习使用Django框架，建议大家通过阅读Django的官方文档来学习和使用这个框架。当然图灵社区出版的《Django基础教程》也是非常适合初学者的入门级读物，有兴趣的读者可以点击链接进行购买。

创建项目和应用#

我们首先创建Django项目vote并为其添加虚拟环境和依赖项。接下来，在项目下创建名为polls的应用和保存模板页的文件夹tempaltes，项目文件夹的结构如下所示。

根据上面描述的项目需求，我们准备了四个静态页面，分别是展示学科的页面subjects.html，显示学科老师的页面teachers.html，登录页面login.html，注册页面register.html，稍后我们会将静态页修改为Django项目所需的模板页。

配置关系型数据库MySQL#

1. 在MySQL中创建数据库，创建用户，授权用户访问该数据库。

   1
   create database vote default charset utf8;
   2
   create user 'hellokitty'@'%' identified by 'Hellokitty.618';
   3
   grant all privileges on vote.* to 'hellokitty'@'%';
   4
   flush privileges;

2. 在MySQL中创建保存学科和老师信息的二维表（保存用户信息的表稍后处理）。

   1
   use vote;
   2
   
   3
   -- 创建学科表
   4
   create table `tb_subject`
   5
   (
   6
     `no` integer auto_increment comment '学科编号',
   7
       `name` varchar(50) not null comment '学科名称',
   8
       `intro` varchar(1000) not null default '' comment '学科介绍',
   9
       `is_hot` boolean not null default 0 comment '是不是热门学科',
   10
       primary key (`no`)
   11
   );
   12
   -- 创建老师表
   13
   create table `tb_teacher`
   14
   (
   15
       `no` integer auto_increment comment '老师编号',
   16
       `name` varchar(20) not null comment '老师姓名',
   17
       `sex` boolean not null default 1 comment '老师性别',
   18
       `birth` date not null comment '出生日期',
   19
       `intro` varchar(1000) not null default '' comment '老师介绍',
   20
       `photo` varchar(255) not null default '' comment '老师照片',
   21
       `gcount` integer not null default 0 comment '好评数',
   22
       `bcount` integer not null default 0 comment '差评数',
   23
       `sno` integer not null comment '所属学科',
   24
       primary key (`no`),
   25
       foreign key (`sno`) references `tb_subject` (`no`)
   26
   );

3. 在虚拟环境中安装连接MySQL数据库所需的依赖项。

   1
   pip install mysqlclient

   说明：如果因为某些原因无法安装mysqlclient三方库，可以使用它的替代品pymysql，pymysql是用纯Python开发的连接MySQL的Python库，安装更容易成功，但是需要在Django项目文件夹的__init__.py中添加如下所示的代码。

   1
   import pymysql
   2
   
   3
   pymysql.install_as_MySQLdb()

   如果使用Django 2.2及以上版本，还会遇到PyMySQL跟Django框架的兼容性问题，兼容性问题会导致项目无法运行，需要按照GitHub上PyMySQL仓库Issues中提供的方法进行处理。总体来说，使用pymysql会比较麻烦，强烈建议大家首选安装mysqlclient。

4. 修改项目的settings.py文件，首先将我们创建的应用polls添加已安装的项目（INSTALLED_APPS）中，然后配置MySQL作为持久化方案。

   1
   INSTALLED_APPS = [
   2
       'django.contrib.admin',
   3
       'django.contrib.auth',
   4
       'django.contrib.contenttypes',
   5
       'django.contrib.sessions',
   6
       'django.contrib.messages',
   7
       'django.contrib.staticfiles',
   8
       'polls',
   9
   ]
   10
   
   11
   DATABASES = {
   12
       'default': {
   13
           # 数据库引擎配置
   14
           'ENGINE': 'django.db.backends.mysql',
   15
           # 数据库的名字
   16
           'NAME': 'vote',
   17
           # 数据库服务器的IP地址（本机可以写localhost或127.0.0.1）
   18
           'HOST': 'localhost',
   19
           # 启动MySQL服务的端口号
   20
           'PORT': 3306,
   21
           # 数据库用户名和口令
   22
           'USER': 'hellokitty',
   23
           'PASSWORD': 'Hellokitty.618',
   24
           # 数据库使用的字符集
   25
           'CHARSET': 'utf8',
   26
           # 数据库时间日期的时区设定
   27
           'TIME_ZONE': 'Asia/Chongqing',
   28
       }
   29
   }

   在配置ENGINE属性时，常用的可选值包括：

   • 'django.db.backends.sqlite3'：SQLite嵌入式数据库。
   • 'django.db.backends.postgresql'：BSD许可证下发行的开源关系型数据库产品。
   • 'django.db.backends.mysql'：甲骨文公司经济高效的数据库产品。
   • 'django.db.backends.oracle'：甲骨文公司关系型数据库旗舰产品。

   其他的配置可以参考官方文档中数据库配置的部分。

5. Django框架提供了ORM来解决数据持久化问题，ORM翻译成中文叫“对象关系映射”。因为Python是面向对象的编程语言，我们在Python程序中使用对象模型来保存数据，而关系型数据库使用关系模型，用二维表来保存数据，这两种模型并不匹配。使用ORM是为了实现对象模型到关系模型的双向转换，这样就不用在Python代码中书写SQL语句和游标操作，因为这些都会由ORM自动完成。利用Django的ORM，我们可以直接将刚才创建的学科表和老师表变成Django中的模型类。

   1
   python manage.py inspectdb > polls/models.py

   我们可以对自动生成的模型类稍作调整，代码如下所示。

   1
   from django.db import models
   2
   
   3
   
   4
   class Subject(models.Model):
   5
       no = models.AutoField(primary_key=True, verbose_name='编号')
   6
       name = models.CharField(max_length=50, verbose_name='名称')
   7
       intro = models.CharField(max_length=1000, verbose_name='介绍')
   8
       is_hot = models.BooleanField(verbose_name='是否热门')
   9
   
   10
       class Meta:
   11
           managed = False
   12
           db_table = 'tb_subject'
   13
   
   14
   
   15
   class Teacher(models.Model):
   16
       no = models.AutoField(primary_key=True, verbose_name='编号')
   17
       name = models.CharField(max_length=20, verbose_name='姓名')
   18
       sex = models.BooleanField(default=True, verbose_name='性别')
   19
       birth = models.DateField(verbose_name='出生日期')
   20
       intro = models.CharField(max_length=1000, verbose_name='个人介绍')
   21
       photo = models.ImageField(max_length=255, verbose_name='照片')
   22
       good_count = models.IntegerField(default=0, db_column='gcount', verbose_name='好评数')
   23
       bad_count = models.IntegerField(default=0, db_column='bcount', verbose_name='差评数')
   24
       subject = models.ForeignKey(Subject, models.DO_NOTHING, db_column='sno')
   25
   
   26
       class Meta:
   27
           managed = False
   28
           db_table = 'tb_teacher'

   说明：模型类都直接或间接继承自Model类，模型类跟关系型数据库的二维表对应，模型对象跟表中的记录对应，模型对象的属性跟表中的字段对应。如果对上面模型类的属性定义不是特别理解，可以看看本文后面提供的“模型定义参考”部分的内容。

使用ORM完成模型的CRUD操作#

有了Django框架的ORM，我们可以直接使用面向对象的方式来实现对数据的CRUD（增删改查）操作。我们可以在PyCharm的终端中输入下面的命令进入到Django项目的交互式环境，然后尝试对模型的操作。

1
python manage.py shell

1
from polls.models import Subject
2

3
subject1 = Subject(name='Python全栈开发', intro='当下最热门的学科', is_hot=True)
4
subject1.save()
5
subject2 = Subject(name='全栈软件测试', intro='学习自动化测试的学科', is_hot=False)
6
subject2.save()
7
subject3 = Subject(name='JavaEE分布式开发', intro='基于Java语言的服务器应用开发', is_hot=True)

1
subject = Subject.objects.get(no=2)
2
subject.delete()

1
subject = Subject.objects.get(no=1)
2
subject.name = 'Python全栈+人工智能'
3
subject.save()

1
Subject.objects.all()

1
# 查询名称为“Python全栈+人工智能”的学科
2
Subject.objects.filter(name='Python全栈+人工智能')
3

4
# 查询名称包含“全栈”的学科（模糊查询）
5
Subject.objects.filter(name__contains='全栈')
6
Subject.objects.filter(name__startswith='全栈')
7
Subject.objects.filter(name__endswith='全栈')
8

9
# 查询所有热门学科
10
Subject.objects.filter(is_hot=True)
11

12
# 查询编号大于3小于10的学科
13
Subject.objects.filter(no__gt=3).filter(no__lt=10)
14
Subject.objects.filter(no__gt=3, no__lt=10)
15

16
# 查询编号在3到7之间的学科
17
Subject.objects.filter(no__ge=3, no__le=7)
18
Subject.objects.filter(no__range=(3, 7))

1
# 查询主键为1的学科
2
Subject.objects.get(pk=1)
3
Subject.objects.get(no=1)
4
Subject.objects.filter(no=1).first()
5
Subject.objects.filter(no=1).last()

1
# 查询所有学科按编号升序排列
2
Subject.objects.order_by('no')
3
# 查询所有部门按部门编号降序排列
4
Subject.objects.order_by('-no')

1
# 按编号从小到大查询前3个学科
2
Subject.objects.order_by('no')[:3]

1
# 查询一共有多少个学科
2
Subject.objects.count()

1
# 查询编号为1的学科的老师
2
Teacher.objects.filter(subject__no=1)
3
Subject.objects.get(pk=1).teacher_set.all()
4

5
# 查询学科名称有“全栈”二字的学科的老师
6
Teacher.objects.filter(subject__name__contains='全栈')

利用Django后台管理模型#

在创建好模型类之后，可以通过Django框架自带的后台管理应用（admin应用）实现对模型的管理。虽然实际应用中，这个后台可能并不能满足我们的需求，但是在学习Django框架时，我们可以利用admin应用来管理我们的模型，同时也通过它来了解一个项目的后台管理系统需要哪些功能。使用Django自带的admin应用步骤如下所示。

1. 将admin应用所需的表迁移到数据库中。admin应用本身也需要数据库的支持，而且在admin应用中已经定义好了相关的数据模型类，我们只需要通过模型迁移操作就能自动在数据库中生成所需的二维表。

   1
   python manage.py migrate

2. 创建访问admin应用的超级用户账号，这里需要输入用户名、邮箱和口令。

   1
   python manage.py createsuperuser

   说明：输入口令时没有回显也不能退格，需要一气呵成完成输入。

3. 运行项目，在浏览器中访问http://127.0.0.1:8000/admin，输入刚才创建的超级用户账号和密码进行登录。

   （原图缺失：django-admin-login.png，请到原仓库查看）

   登录后进入管理员操作平台。

   

   注意，我们暂时还没能在admin应用中看到之前创建的模型类，为此需要在polls应用的admin.py文件中对需要管理的模型进行注册。

4. 注册模型类。

   1
   from django.contrib import admin
   2
   
   3
   from polls.models import Subject, Teacher
   4
   
   5
   admin.site.register(Subject)
   6
   admin.site.register(Teacher)

   注册模型类后，就可以在后台管理系统中看到它们。

   

5. 对模型进行CRUD操作。

   可以在管理员平台对模型进行C（新增）、R（查看）、U（更新）、D（删除）操作，如下图所示。

   • 添加学科。

     

   • 查看所有学科。

     

   • 删除和更新学科。

     

6. 注册模型管理类。

   可能大家已经注意到了，刚才在后台查看部门信息的时候，显示的部门信息并不直观，为此我们再修改admin.py文件，通过注册模型管理类，可以在后台管理系统中更好的管理模型。

   1
   from django.contrib import admin
   2
   
   3
   from polls.models import Subject, Teacher
   4
   
   5
   
   6
   class SubjectModelAdmin(admin.ModelAdmin):
   7
       list_display = ('no', 'name', 'intro', 'is_hot')
   8
       search_fields = ('name', )
   9
       ordering = ('no', )
   10
   
   11
   
   12
   class TeacherModelAdmin(admin.ModelAdmin):
   13
       list_display = ('no', 'name', 'sex', 'birth', 'good_count', 'bad_count', 'subject')
   14
       search_fields = ('name', )
   15
       ordering = ('no', )
   16
   
   17
   
   18
   admin.site.register(Subject, SubjectModelAdmin)
   19
   admin.site.register(Teacher, TeacherModelAdmin)

   

   为了更好的查看模型，我们为Subject类添加__str__魔法方法，并在该方法中返回学科名字。这样在如上图所示的查看老师的页面上显示老师所属学科时，就不再是Subject object(1)这样晦涩的信息，而是学科的名称。

实现学科页和老师页效果#

1. 修改polls/views.py文件，编写视图函数实现对学科页和老师页的渲染。

   1
   from django.shortcuts import render, redirect
   2
   
   3
   from polls.models import Subject, Teacher
   4
   
   5
   
   6
   def show_subjects(request):
   7
       subjects = Subject.objects.all().order_by('no')
   8
       return render(request, 'subjects.html', {'subjects': subjects})
   9
   
   10
   
   11
   def show_teachers(request):
   12
       try:
   13
           sno = int(request.GET.get('sno'))
   14
           teachers = []
   15
           if sno:
   16
               subject = Subject.objects.only('name').get(no=sno)
   17
               teachers = Teacher.objects.filter(subject=subject).order_by('no')
   18
           return render(request, 'teachers.html', {
   19
               'subject': subject,
   20
               'teachers': teachers
   21
           })
   22
       except (ValueError, Subject.DoesNotExist):
   23
           return redirect('/')

2. 修改templates/subjects.html和templates/teachers.html模板页。

   subjects.html

   1
   <!DOCTYPE html>
   2
   <html lang="en">
   3
   <head>
   4
      <meta charset="UTF-8">
   5
      <title>学科信息</title>
   6
      <style>
   7
          #container {
   8
              width: 80%;
   9
              margin: 10px auto;
   10
          }
   11
          .user {
   12
              float: right;
   13
              margin-right: 10px;
   14
          }
   15
          .user>a {
   16
              margin-right: 10px;
   17
          }
   18
          #main>dl>dt {
   19
              font-size: 1.5em;
   20
              font-weight: bold;
   21
          }
   22
          #main>dl>dd {
   23
              font-size: 1.2em;
   24
          }
   25
          a {
   26
              text-decoration: none;
   27
              color: darkcyan;
   28
          }
   29
      </style>
   30
   </head>
   31
   <body>
   32
      <div id="container">
   33
          <div class="user">
   34
              <a href="login.html">用户登录</a>
   35
              <a href="register.html">快速注册</a>
   36
          </div>
   37
          <h1>扣丁学堂所有学科</h1>
   38
          <hr>
   39
          <div id="main">
   40
              {% for subject in subjects %}
   41
              <dl>
   42
                  <dt>
   43
                      <a href="/teachers/?sno={{ subject.no }}">{{ subject.name }}</a>
   44
                      {% if subject.is_hot %}
   45
                      <img src="/static/images/hot-icon-small.png">
   46
                      {% endif %}
   47
                  </dt>
   48
                  <dd>{{ subject.intro }}</dd>
   49
              </dl>
   50
              {% endfor %}
   51
          </div>
   52
      </div>
   53
   </body>
   54
   </html>

   teachers.html

   1
   <!DOCTYPE html>
   2
   <html lang="en">
   3
   <head>
   4
       <meta charset="UTF-8">
   5
       <title>老师信息</title>
   6
       <style>
   7
           #container {
   8
               width: 80%;
   9
               margin: 10px auto;
   10
           }
   11
           .teacher {
   12
               width: 100%;
   13
               margin: 0 auto;
   14
               padding: 10px 0;
   15
               border-bottom: 1px dashed gray;
   16
               overflow: auto;
   17
           }
   18
           .teacher>div {
   19
               float: left;
   20
           }
   21
           .photo {
   22
               height: 140px;
   23
               border-radius: 75px;
   24
               overflow: hidden;
   25
               margin-left: 20px;
   26
           }
   27
           .info {
   28
               width: 75%;
   29
               margin-left: 30px;
   30
           }
   31
           .info div {
   32
               clear: both;
   33
               margin: 5px 10px;
   34
           }
   35
           .info span {
   36
               margin-right: 25px;
   37
           }
   38
           .info a {
   39
               text-decoration: none;
   40
               color: darkcyan;
   41
           }
   42
       </style>
   43
   </head>
   44
   <body>
   45
       <div id="container">
   46
           <h1>{{ subject.name }}学科的老师信息</h1>
   47
           <hr>
   48
           {% if not teachers %}
   49
               <h2>暂无该学科老师信息</h2>
   50
           {% endif %}
   51
           {% for teacher in teachers %}
   52
           <div class="teacher">
   53
               <div class="photo">
   54
                   <img src="/static/images/{{ teacher.photo }}" height="140" alt="">
   55
               </div>
   56
               <div class="info">
   57
                   <div>
   58
                       <span><strong>姓名：{{ teacher.name }}</strong></span>
   59
                       <span>性别：{{ teacher.sex | yesno:'男,女' }}</span>
   60
                       <span>出生日期：{{ teacher.birth | date:'Y年n月j日'}}</span>
   61
                   </div>
   62
                   <div class="intro">{{ teacher.intro }}</div>
   63
                   <div class="comment">
   64
                       <a href="">好评</a>&nbsp;(<strong>{{ teacher.good_count }}</strong>)
   65
                       &nbsp;&nbsp;&nbsp;&nbsp;
   66
                       <a href="">差评</a>&nbsp;<strong>{{ teacher.bad_count }}</strong>)
   67
                   </div>
   68
               </div>
   69
           </div>
   70
           {% endfor %}
   71
           <a href="/">返回首页</a>
   72
       </div>
   73
   </body>
   74
   </html>

3. 修改vote/urls.py文件，实现映射URL。

   1
   from django.contrib import admin
   2
   from django.urls import path
   3
   
   4
   from polls.views import show_subjects, show_teachers
   5
   
   6
   urlpatterns = [
   7
       path('admin/', admin.site.urls),
   8
       path('', show_subjects),
   9
       path('teachers/', show_teachers),
   10
   ]

到此为止，页面上需要的图片（静态资源）还没有能够正常展示，我们在下一章节中为大家介绍如何处理模板页上的需要的静态资源。

补充内容#

加载静态资源#

如果要在Django项目中使用静态资源，可以先创建一个用于保存静态资源的目录。在vote项目中，我们将静态资源置于名为static的文件夹中，在该文件夹包含了三个子文件夹：css、js和images，分别用来保存外部CSS文件、外部JavaScript文件和图片资源，如下图所示。

为了能够找到保存静态资源的文件夹，我们还需要修改Django项目的配置文件settings.py，如下所示：

1
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
2
STATIC_URL = '/static/'

配置好静态资源之后，大家可以运行项目，然后看看之前我们写的页面上的图片是否能够正常加载出来。需要说明的是，在项目正式部署到线上环境后，我们通常会把静态资源交给专门的静态资源服务器（如Nginx、Apache）来处理，而不是有运行Python代码的服务器来管理静态资源，所以上面的配置并不适用于生产环境，仅供项目开发阶段测试使用。使用静态资源的正确姿势我们会在后续的章节为大家讲解。

Ajax概述#

接下来就可以实现“好评”和“差评”的功能了，很明显如果能够在不刷新页面的情况下实现这两个功能会带来更好的用户体验，因此我们考虑使用Ajax技术来实现“好评”和“差评”。Ajax是Asynchronous Javascript And XML的缩写 , 简单的说，使用Ajax技术可以在不重新加载整个页面的情况下对页面进行局部刷新。

对于传统的Web应用，每次页面上需要加载新的内容都需要重新请求服务器并刷新整个页面，如果服务器短时间内无法给予响应或者网络状况并不理想，那么可能会造成浏览器长时间的空白并使得用户处于等待状态，在这个期间用户什么都做不了，如下图所示。很显然，这样的Web应用并不能带来很好的用户体验。

对于使用Ajax技术的Web应用，浏览器可以向服务器发起异步请求来获取数据。异步请求不会中断用户体验，当服务器返回了新的数据，我们可以通过JavaScript代码进行DOM操作来实现对页面的局部刷新，这样就相当于在不刷新整个页面的情况下更新了页面的内容，如下图所示。

在使用Ajax技术时，浏览器跟服务器通常会交换XML或JSON格式的数据，XML是以前使用得非常多的一种数据格式，近年来几乎已经完全被JSON取代，下面是两种数据格式的对比。

XML格式：

1
<?xml version="1.0" encoding="utf-8"?>
2
<message>
3
  <from>Alice</from>
4
    <to>Bob</to>
5
    <content>Dinner is on me!</content>
6
</message>

JSON格式：

1
{
2
    "from": "Alice",
3
    "to": "Bob",
4
    "content": "Dinner is on me!"
5
}

通过上面的对比，明显JSON格式的数据要紧凑得多，所以传输效率更高，而且JSON本身也是JavaScript中的一种对象表达式语法，在JavaScript代码中处理JSON格式的数据更加方便。

用Ajax实现投票功能#

下面，我们使用Ajax技术来实现投票的功能，首先修改项目的urls.py文件，为“好评”和“差评”功能映射对应的URL。

1
from django.contrib import admin
2
from django.urls import path
3

4
from polls import views
5

6
urlpatterns = [
7
    path('', views.show_subjects),
8
    path('teachers/', views.show_teachers),
9
    path('praise/', views.praise_or_criticize),
10
    path('criticize/', views.praise_or_criticize),
11
    path('admin/', admin.site.urls),
12
]

设计视图函数praise_or_criticize来支持“好评”和“差评”功能，该视图函数通过Django封装的JsonResponse类将字典序列化成JSON字符串作为返回给浏览器的响应内容。

1
def praise_or_criticize(request):
2
    """好评"""
3
    try:
4
        tno = int(request.GET.get('tno'))
5
        teacher = Teacher.objects.get(no=tno)
6
        if request.path.startswith('/praise'):
7
            teacher.good_count += 1
8
            count = teacher.good_count
9
        else:
10
            teacher.bad_count += 1
11
            count = teacher.bad_count
12
        teacher.save()
13
        data = {'code': 20000, 'mesg': '操作成功', 'count': count}
14
    except (ValueError, Teacher.DoseNotExist):
15
        data = {'code': 20001, 'mesg': '操作失败'}
16
    return JsonResponse(data)

修改显示老师信息的模板页，引入jQuery库来实现事件处理、Ajax请求和DOM操作。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>老师信息</title>
6
    <style>
7
        #container {
8
            width: 80%;
9
            margin: 10px auto;
10
        }
11
        .teacher {
12
            width: 100%;
13
            margin: 0 auto;
14
            padding: 10px 0;
15
            border-bottom: 1px dashed gray;
16
            overflow: auto;
17
        }
18
        .teacher>div {
19
            float: left;
20
        }
21
        .photo {
22
            height: 140px;
23
            border-radius: 75px;
24
            overflow: hidden;
25
            margin-left: 20px;
26
        }
27
        .info {
28
            width: 75%;
29
            margin-left: 30px;
30
        }
31
        .info div {
32
            clear: both;
33
            margin: 5px 10px;
34
        }
35
        .info span {
36
            margin-right: 25px;
37
        }
38
        .info a {
39
            text-decoration: none;
40
            color: darkcyan;
41
        }
42
    </style>
43
</head>
44
<body>
45
    <div id="container">
46
        <h1>{{ subject.name }}学科的老师信息</h1>
47
        <hr>
48
        {% if not teachers %}
49
            <h2>暂无该学科老师信息</h2>
50
        {% endif %}
51
        {% for teacher in teachers %}
52
        <div class="teacher">
53
            <div class="photo">
54
                <img src="/static/images/{{ teacher.photo }}" height="140" alt="">
55
            </div>
56
            <div class="info">
57
                <div>
58
                    <span><strong>姓名：{{ teacher.name }}</strong></span>
59
                    <span>性别：{{ teacher.sex | yesno:'男,女' }}</span>
60
                    <span>出生日期：{{ teacher.birth }}</span>
61
                </div>
62
                <div class="intro">{{ teacher.intro }}</div>
63
                <div class="comment">
64
                    <a href="/praise/?tno={{ teacher.no }}">好评</a>&nbsp;&nbsp;
65
                    (<strong>{{ teacher.good_count }}</strong>)
66
                    &nbsp;&nbsp;&nbsp;&nbsp;
67
                    <a href="/criticize/?tno={{ teacher.no }}">差评</a>&nbsp;&nbsp;
68
                    (<strong>{{ teacher.bad_count }}</strong>)
69
                </div>
70
            </div>
71
        </div>
72
        {% endfor %}
73
        <a href="/">返回首页</a>
74
    </div>
75
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
76
    <script>
77
        $(() => {
78
            $('.comment>a').on('click', (evt) => {
79
                evt.preventDefault()
80
                let url = $(evt.target).attr('href')
81
                $.getJSON(url, (json) => {
82
                    if (json.code == 20000) {
83
                        $(evt.target).next().text(json.count)
84
                    } else {
85
                        alert(json.mesg)
86
                    }
87
                })
88
            })
89
        })
90
    </script>
91
</body>
92
</html>

上面的前端代码中，使用了jQuery库封装的getJSON方法向服务器发送异步请求，如果不熟悉前端的jQuery库，可以参考《jQuery API手册》。

小结#

到此为止，这个投票项目的核心功能已然完成，在下面的章节中我们会要求用户必须登录才能投票，没有账号的用户可以通过注册功能注册一个账号。

用户登录的准备工作#

我们先为实现用户登录做一些准备工作。

1. 创建用户模型。之前我们讲解过如果通过Django的ORM实现从二维表到模型的转换（反向工程），这次我们尝试把模型变成二维表（正向工程）。

   1
   class User(models.Model):
   2
       """用户"""
   3
       no = models.AutoField(primary_key=True, verbose_name='编号')
   4
       username = models.CharField(max_length=20, unique=True, verbose_name='用户名')
   5
       password = models.CharField(max_length=32, verbose_name='密码')
   6
       tel = models.CharField(max_length=20, verbose_name='手机号')
   7
       reg_date = models.DateTimeField(auto_now_add=True, verbose_name='注册时间')
   8
       last_visit = models.DateTimeField(null=True, verbose_name='最后登录时间')
   9
   
   10
       class Meta:
   11
           db_table = 'tb_user'
   12
           verbose_name = '用户'
   13
           verbose_name_plural = '用户'

2. 使用下面的命令生成迁移文件并执行迁移，将User模型直接变成关系型数据库中的二维表tb_user。

   1
   python manage.py makemigrations polls
   2
   python manage.py migrate polls

3. 用下面的SQL语句直接插入两条测试数据，通常不能将用户的密码直接保存在数据库中，因此我们将用户密码处理成对应的MD5摘要。MD5消息摘要算法是一种被广泛使用的密码哈希函数（散列函数），可以产生出一个128位（比特）的哈希值（散列值），用于确保信息传输完整一致。在使用哈希值时，通常会将哈希值表示为16进制字符串，因此128位的MD5摘要通常表示为32个十六进制符号。

   1
   insert into `tb_user`
   2
       (`username`, `password`, `tel`, `reg_date`)
   3
   values
   4
       ('wangdachui', '1c63129ae9db9c60c3e8aa94d3e00495', '13122334455', now()),
   5
       ('hellokitty', 'c6f8cf68e5f68b0aa4680e089ee4742c', '13890006789', now());

   说明：上面创建的两个用户wangdachui和hellokitty密码分别是1qaz2wsx和Abc123!!。

4. 我们在应用下增加一个名为utils.py的模块用来保存需要使用的工具函数。Python标准库中的hashlib模块封装了常用的哈希算法，包括：MD5、SHA1、SHA256等。下面是使用hashlib中的md5类将字符串处理成MD5摘要的函数如下所示。

   1
   import hashlib
   2
   
   3
   
   4
   def gen_md5_digest(content):
   5
       return hashlib.md5(content.encode()).hexdigest()

5. 编写用户登录的视图函数和模板页。

   添加渲染登录页面的视图函数：

   1
   def login(request: HttpRequest) -> HttpResponse:
   2
       hint = ''
   3
       return render(request, 'login.html', {'hint': hint})

   增加login.html模板页：

   1
   <!DOCTYPE html>
   2
   <html lang="en">
   3
   <head>
   4
       <meta charset="UTF-8">
   5
       <title>用户登录</title>
   6
       <style>
   7
           #container {
   8
               width: 520px;
   9
               margin: 10px auto;
   10
           }
   11
           .input {
   12
               margin: 20px 0;
   13
               width: 460px;
   14
               height: 40px;
   15
           }
   16
           .input>label {
   17
               display: inline-block;
   18
               width: 140px;
   19
               text-align: right;
   20
           }
   21
           .input>img {
   22
               width: 150px;
   23
               vertical-align: middle;
   24
           }
   25
           input[name=captcha] {
   26
               vertical-align: middle;
   27
           }
   28
           form+div {
   29
               margin-top: 20px;
   30
           }
   31
           form+div>a {
   32
               text-decoration: none;
   33
               color: darkcyan;
   34
               font-size: 1.2em;
   35
           }
   36
           .button {
   37
               width: 500px;
   38
               text-align: center;
   39
               margin-top: 20px;
   40
           }
   41
           .hint {
   42
               color: red;
   43
               font-size: 12px;
   44
           }
   45
       </style>
   46
   </head>
   47
   <body>
   48
       <div id="container">
   49
           <h1>用户登录</h1>
   50
           <hr>
   51
           <p class="hint">{{ hint }}</p>
   52
           <form action="/login/" method="post">
   53
               {% csrf_token %}
   54
               <fieldset>
   55
                   <legend>用户信息</legend>
   56
                   <div class="input">
   57
                       <label>用户名：</label>
   58
                       <input type="text" name="username">
   59
                   </div>
   60
                   <div class="input">
   61
                       <label>密码：</label>
   62
                       <input type="password" name="password">
   63
                   </div>
   64
                   <div class="input">
   65
                       <label>验证码：</label>
   66
                       <input type="text" name="captcha">
   67
                       <img id="code" src="/captcha/" alt="" width="150" height="40">
   68
                   </div>
   69
               </fieldset>
   70
               <div class="button">
   71
                   <input type="submit" value="登录">
   72
                   <input type="reset" value="重置">
   73
               </div>
   74
           </form>
   75
           <div>
   76
               <a href="/">返回首页</a>
   77
               <a href="/register/">注册新用户</a>
   78
           </div>
   79
       </div>
   80
   </body>
   81
   </html>

   注意，在上面的表单中，我们使用了模板指令{% csrf_token %}为表单添加一个隐藏域（大家可以在浏览器中显示网页源代码就可以看到这个指令生成的type属性为hidden的input标签），它的作用是在表单中生成一个随机令牌（token）来防范跨站请求伪造（简称为CSRF），这也是Django在提交表单时的硬性要求。如果我们的表单中没有这样的令牌，那么提交表单时，Django框架会产生一个响应状态码为403的响应（禁止访问），除非我们设置了免除CSRF令牌。下图是一个关于CSRF简单生动的例子。

   

接下来，我们可以编写提供验证码和实现用户登录的视图函数，在此之前，我们先说说一个Web应用实现用户跟踪的方式以及Django框架对实现用户跟踪所提供的支持。对一个Web应用来说，用户登录成功后必然要让服务器能够记住该用户已经登录，这样服务器才能为这个用户提供更好的服务，而且上面说到的CSRF也是通过钓鱼网站来套取用户登录信息进行恶意操作的攻击手段，这些都是以用户跟踪技术为基础的。在理解了这些背景知识后，我们就清楚用户登录时到底需要执行哪些操作。

实现用户跟踪#

如今，一个网站如果不通过某种方式记住你是谁以及你之前在网站的活动情况，失去的就是网站的可用性和便利性，继而很有可能导致网站用户的流式，所以记住一个用户（更专业的说法叫用户跟踪）对绝大多数Web应用来说都是必需的功能。

在服务器端，我们想记住一个用户最简单的办法就是创建一个对象，通过这个对象就可以把用户相关的信息都保存起来，这个对象就是我们常说的session（用户会话对象）。那么问题来了，HTTP本身是一个无连接（每次请求和响应的过程中，服务器一旦完成对客户端请求的响应之后就断开连接）、无状态（客户端再次发起对服务器的请求时，服务器无法得知这个客户端之前的任何信息）的协议，即便服务器通过session对象保留了用户数据，还得通过某种方式来确定当前的请求与之前保存过的哪一个session是有关联的。相信很多人都能想到，我们可以给每个session对象分配一个全局唯一的标识符来识别session对象，我们姑且称之为sessionid，每次客户端发起请求时，只要携带上这个sessionid，就有办法找到与之对应的session对象，从而实现在两次请求之间记住该用户的信息，也就是我们之前说的用户跟踪。

要让客户端记住并在每次请求时带上sessionid又有以下几种做法：

1. URL重写。所谓URL重写就是在URL中携带sessionid，例如：http://www.example.com/index.html?sessionid=123456，服务器通过获取sessionid参数的值来取到与之对应的session对象。

2. 隐藏域（隐式表单域）。在提交表单的时候，可以通过在表单中设置隐藏域向服务器发送额外的数据。例如：<input type="hidden" name="sessionid" value="123456">。

3. 本地存储。现在的浏览器都支持多种本地存储方案，包括：cookie、localStorage、sessionStorage、IndexedDB等。在这些方案中，cookie是历史最为悠久也是被诟病得最多的一种方案，也是我们接下来首先为大家讲解的一种方案。简单的说，cookie是一种以键值对方式保存在浏览器临时文件中的数据，每次请求时，请求头中会携带本站点的cookie到服务器，那么只要将sessionid写入cookie，下次请求时服务器只要读取请求头中的cookie就能够获得这个sessionid，如下图所示。

   

   在HTML5时代要，除了cookie，还可以使用新的本地存储API来保存数据，就是刚才提到的localStorage、sessionStorage、IndexedDB等技术，如下图所示。

   

总结一下，要实现用户跟踪，服务器端可以为每个用户会话创建一个session对象并将session对象的ID写入到浏览器的cookie中；用户下次请求服务器时，浏览器会在HTTP请求头中携带该网站保存的cookie信息，这样服务器就可以从cookie中找到session对象的ID并根据此ID获取到之前创建的session对象；由于session对象可以用键值对的方式保存用户数据，这样之前保存在session对象中的信息可以悉数取出，服务器也可以根据这些信息判定用户身份和了解用户偏好，为用户提供更好的个性化服务。

Django框架对session的支持#

在创建Django项目时，默认的配置文件settings.py文件中已经激活了一个名为SessionMiddleware的中间件（关于中间件的知识我们在后面的章节做详细讲解，这里只需要知道它的存在即可），因为这个中间件的存在，我们可以直接通过请求对象的session属性来操作会话对象。前面我们说过，session属性是一个像字典一样可以读写数据的容器对象，因此我们可以使用“键值对”的方式来保留用户数据。与此同时，SessionMiddleware中间件还封装了对cookie的操作，在cookie中保存了sessionid，这一点我们在上面已经提到过了。

在默认情况下，Django将session的数据序列化后保存在关系型数据库中，在Django 1.6以后的版本中，默认的序列化数据的方式是JSON序列化，而在此之前一直使用Pickle序列化。JSON序列化和Pickle序列化的差别在于前者将对象序列化为字符串（字符形式），而后者将对象序列化为字节串（二进制形式），因为安全方面的原因，JSON序列化成为了目前Django框架默认序列化数据的方式，这就要求在我们保存在session中的数据必须是能够JSON序列化的，否则就会引发异常。还有一点需要说明的是，使用关系型数据库保存session中的数据在大多数时候并不是最好的选择，因为数据库可能会承受巨大的压力而成为系统性能的瓶颈，在后面的章节中我们会告诉大家如何将session保存到缓存服务中以提升系统的性能。

实现用户登录验证#

首先，我们在刚才的polls/utils.py文件中编写生成随机验证码的函数gen_random_code，内容如下所示。

1
import random
2

3
ALL_CHARS = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
4

5

6
def gen_random_code(length=4):
7
    return ''.join(random.choices(ALL_CHARS, k=length))

编写生成验证码图片的类Captcha。

1
"""
2
图片验证码
3
"""
4
import os
5
import random
6
from io import BytesIO
7

8
from PIL import Image
9
from PIL import ImageFilter
10
from PIL.ImageDraw import Draw
11
from PIL.ImageFont import truetype
12

13

14
class Bezier:
15
    """贝塞尔曲线"""
16

17
    def __init__(self):
18
        self.tsequence = tuple([t / 20.0 for t in range(21)])
19
        self.beziers = {}
20

21
    def make_bezier(self, n):
22
        """绘制贝塞尔曲线"""
23
        try:
24
            return self.beziers[n]
25
        except KeyError:
26
            combinations = pascal_row(n - 1)
27
            result = []
28
            for t in self.tsequence:
29
                tpowers = (t ** i for i in range(n))
30
                upowers = ((1 - t) ** i for i in range(n - 1, -1, -1))
31
                coefs = [c * a * b for c, a, b in zip(combinations,
32
                                                      tpowers, upowers)]
33
                result.append(coefs)
34
            self.beziers[n] = result
35
            return result
36

37

38
class Captcha:
39
    """验证码"""
40

41
    def __init__(self, width, height, fonts=None, color=None):
42
        self._image = None
43
        self._fonts = fonts if fonts else \
44
            [os.path.join(os.path.dirname(__file__), 'fonts', font)
45
             for font in ['Arial.ttf', 'Georgia.ttf', 'Action.ttf']]
46
        self._color = color if color else random_color(0, 200, random.randint(220, 255))
47
        self._width, self._height = width, height
48

49
    @classmethod
50
    def instance(cls, width=200, height=75):
51
        """用于获取Captcha对象的类方法"""
52
        prop_name = f'_instance_{width}_{height}'
53
        if not hasattr(cls, prop_name):
54
            setattr(cls, prop_name, cls(width, height))
55
        return getattr(cls, prop_name)
56

57
    def _background(self):
58
        """绘制背景"""
59
        Draw(self._image).rectangle([(0, 0), self._image.size],
60
                                    fill=random_color(230, 255))
61

62
    def _smooth(self):
63
        """平滑图像"""
64
        return self._image.filter(ImageFilter.SMOOTH)
65

66
    def _curve(self, width=4, number=6, color=None):
67
        """绘制曲线"""
68
        dx, height = self._image.size
69
        dx /= number
70
        path = [(dx * i, random.randint(0, height))
71
                for i in range(1, number)]
72
        bcoefs = Bezier().make_bezier(number - 1)
73
        points = []
74
        for coefs in bcoefs:
75
            points.append(tuple(sum([coef * p for coef, p in zip(coefs, ps)])
76
                                for ps in zip(*path)))
77
        Draw(self._image).line(points, fill=color if color else self._color, width=width)
78

79
    def _noise(self, number=50, level=2, color=None):
80
        """绘制扰码"""
81
        width, height = self._image.size
82
        dx, dy = width / 10, height / 10
83
        width, height = width - dx, height - dy
84
        draw = Draw(self._image)
85
        for i in range(number):
86
            x = int(random.uniform(dx, width))
87
            y = int(random.uniform(dy, height))
88
            draw.line(((x, y), (x + level, y)),
89
                      fill=color if color else self._color, width=level)
90

91
    def _text(self, captcha_text, fonts, font_sizes=None, drawings=None, squeeze_factor=0.75, color=None):
92
        """绘制文本"""
93
        color = color if color else self._color
94
        fonts = tuple([truetype(name, size)
95
                       for name in fonts
96
                       for size in font_sizes or (65, 70, 75)])
97
        draw = Draw(self._image)
98
        char_images = []
99
        for c in captcha_text:
100
            font = random.choice(fonts)
101
            c_width, c_height = draw.textsize(c, font=font)
102
            char_image = Image.new('RGB', (c_width, c_height), (0, 0, 0))
103
            char_draw = Draw(char_image)
104
            char_draw.text((0, 0), c, font=font, fill=color)
105
            char_image = char_image.crop(char_image.getbbox())
106
            for drawing in drawings:
107
                d = getattr(self, drawing)
108
                char_image = d(char_image)
109
            char_images.append(char_image)
110
        width, height = self._image.size
111
        offset = int((width - sum(int(i.size[0] * squeeze_factor)
112
                                  for i in char_images[:-1]) -
113
                      char_images[-1].size[0]) / 2)
114
        for char_image in char_images:
115
            c_width, c_height = char_image.size
116
            mask = char_image.convert('L').point(lambda i: i * 1.97)
117
            self._image.paste(char_image,
118
                              (offset, int((height - c_height) / 2)),
119
                              mask)
120
            offset += int(c_width * squeeze_factor)
121

122
    @staticmethod
123
    def _warp(image, dx_factor=0.3, dy_factor=0.3):
124
        """图像扭曲"""
125
        width, height = image.size
126
        dx = width * dx_factor
127
        dy = height * dy_factor
128
        x1 = int(random.uniform(-dx, dx))
129
        y1 = int(random.uniform(-dy, dy))
130
        x2 = int(random.uniform(-dx, dx))
131
        y2 = int(random.uniform(-dy, dy))
132
        warp_image = Image.new(
133
            'RGB',
134
            (width + abs(x1) + abs(x2), height + abs(y1) + abs(y2)))
135
        warp_image.paste(image, (abs(x1), abs(y1)))
136
        width2, height2 = warp_image.size
137
        return warp_image.transform(
138
            (width, height),
139
            Image.QUAD,
140
            (x1, y1, -x1, height2 - y2, width2 + x2, height2 + y2, width2 - x2, -y1))
141

142
    @staticmethod
143
    def _offset(image, dx_factor=0.1, dy_factor=0.2):
144
        """图像偏移"""
145
        width, height = image.size
146
        dx = int(random.random() * width * dx_factor)
147
        dy = int(random.random() * height * dy_factor)
148
        offset_image = Image.new('RGB', (width + dx, height + dy))
149
        offset_image.paste(image, (dx, dy))
150
        return offset_image
151

152
    @staticmethod
153
    def _rotate(image, angle=25):
154
        """图像旋转"""
155
        return image.rotate(random.uniform(-angle, angle),
156
                            Image.BILINEAR, expand=1)
157

158
    def generate(self, captcha_text='', fmt='PNG'):
159
        """生成验证码(文字和图片)
160
        :param captcha_text: 验证码文字
161
        :param fmt: 生成的验证码图片格式
162
        :return: 验证码图片的二进制数据
163
        """
164
        self._image = Image.new('RGB', (self._width, self._height), (255, 255, 255))
165
        self._background()
166
        self._text(captcha_text, self._fonts,
167
                   drawings=['_warp', '_rotate', '_offset'])
168
        self._curve()
169
        self._noise()
170
        self._smooth()
171
        image_bytes = BytesIO()
172
        self._image.save(image_bytes, format=fmt)
173
        return image_bytes.getvalue()
174

175

176
def pascal_row(n=0):
177
    """生成毕达哥拉斯三角形（杨辉三角）"""
178
    result = [1]
179
    x, numerator = 1, n
180
    for denominator in range(1, n // 2 + 1):
181
        x *= numerator
182
        x /= denominator
183
        result.append(x)
184
        numerator -= 1
185
    if n & 1 == 0:
186
        result.extend(reversed(result[:-1]))
187
    else:
188
        result.extend(reversed(result))
189
    return result
190

191

192
def random_color(start=0, end=255, opacity=255):
193
    """获得随机颜色"""
194
    red = random.randint(start, end)
195
    green = random.randint(start, end)
196
    blue = random.randint(start, end)
197
    if opacity is None:
198
        return red, green, blue
199
    return red, green, blue, opacity