1. Django建站基础
学习开发网站必须了解网站的组成部分, 网站类型, 运行原理和开发流程.
使用Django开发网站必须掌握Django的基本操作, 比如创建项目, 使用Django的操作指令以及开发过程中的调试方法.
1.1 网站的定义及组成
网站(Website)是指在因特网上根据一定的规则, 使用HTML (Hyper Text Markup Language, 超文本标记语言)
等工具制作并用于展示特定内容相关网页的集合.
简单地说, 网站是一种沟通工具, 人们可以通过网站来发布自己想要公开的资讯, 或者利用网站来提供相关的网络服务,
也可以通过网页浏览器来访问网站, 获取自己需要的资讯或者享受网络服务.在早期, 域名(Domain Name), 空间服务器与程序是网站的基本组成部分, 随着科技的不断进步, 网站的组成日趋复杂,
目前多数网站由域名, 空间服务器, DNS域名解析, 网站程序和数据库等组成.域名由一串用点分隔的字母组成, 代表互联网上某一台计算机或计算机组的名称, 用于在数据传输时标识计算机的电子方位,
已经成为互联网的品牌和网上商标保护必备的产品之一.
通俗地说, 域名就相当于一个家庭的门牌号码, 别人通过这个号码可以很容易地找到你所在的位置.
以百度的域名为例, 百度的网址是由两部分组成的, 标号'baidu'是这个域名的主域名体;
前面的'www.'是网络名; 最后的标号'com'则是该域名的后缀, 代表是一个国际域名, 属于顶级域名之一.
常见的域名后缀有以下几种:
● .COM: 商业性的机构或公司.
● .NET: 从事Internet相关的网络服务的机构或公司.
● .ORG: 非营利的组织, 团体.
● .GOV: 政府部门.
● .CN: 中国国内域名.
● .COM.CN: 中国商业域名.
● .NET.CN: 中国从事Internet相关的网络服务的机构或公司.
● .ORG.CN: 中国非营利的组织, 团体.
● .GOV.CN: 中国政府部门.
空间服务器主要有虚拟主机, 独立服务器和VPS (Virtual Private Server, 虚拟专用服务器).
虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点和应用组件等, 提供必要的站点功能, 数据存放和传输功能.
所谓虚拟主机, 也叫'网站空间', 就是把一台运行在互联网上的服务器划分成多个'虚拟'的服务器.
每一个虚拟主机都具有独立的域名和完整的Internet服务器(支持WWW, FTP, E-mail等).
虚拟主机是网络发展的福音, 极大地促进了网络技术的应用和普及.
同时, 虚拟主机的租用服务成了网络时代新的经济形式, 虚拟主机的租用类似于房屋租用.独立服务器是指性能更强大, 整体硬件完全独立的服务器, 其CPU都在8核以上.VPS即虚拟专用服务器, 是将一个服务器分区成多个虚拟独立专享服务器的技术.
每个使用VPS技术的虚拟独立服务器拥有各自独立的公网IP地址, 操作系统, 硬盘空间, 内存空间和CPU资源等,
还可以进行安装程序, 重启服务器等操作, 与一台独立服务器完全相同.网站程序是建设与修改网站所使用的编程语言, 源代码是由按一定格式书写的文字和符号编写的,
可以是任何编程语言, 常见的网站开发语言有Java, PHP, ASP.NET和Python.
而浏览器就如程序的编译器, 它会将源代码翻译成图文内容呈现在网页上.
1.2 网站的分类
资讯门户类网站以提供信息资讯为主要目的, 是目前普遍的网站形式之一, 例如新浪, 搜狐和新华网.
这类网站虽然涵盖的信息类型多, 信息量大, 访问群体广, 但包含的功能比较简单, 网站基本功能包含检索, 论坛, 留言和用户中心等.这类网站开发的技术含量主要涉及4个因素:
● 承载的信息类型, 例如是否承载多媒体信息, 是否承载结构化信息等.
● 信息发布的方式和流程.
● 信息量的数量级.
● 网站用户管理.
企业品牌类网站用于展示企业综合实力, 体现企业文化和品牌理念.
企业品牌网站非常强调创意, 对于美工设计要求较高, 精美的FLASH动画是常用的表现形式.
网站内容组织策划和产品展示体验方面也有较高的要求.
网站利用多媒体交互和动态网页技术, 针对目标客户进行内容建设, 达到品牌营销的目的.企业品牌网站可细分为以下三类:
● 企业形象网站: 塑造企业形象, 传播企业文化, 推介企业业务, 报道企业活动和展示企业实力.
● 品牌形象网站: 当企业拥有众多品牌且不同品牌之间的市场定位和营销策略各不相同时,企业可根据不同品牌建立其品牌网站, 以针对不同的消费群体.
● 产品形象网站: 针对某一产品的网站, 重点在于产品的体验.
交易类网站以实现交易为目的, 以订单为中心. 交易的对象可以是企业和消费者.
这类网站有3项基本内容: 商品如何展示, 订单如何生成和订单如何执行.
因此, 这类网站一般需要有产品管理, 订购管理, 订单管理, 产品推荐, 支付管理, 收费管理, 送发货管理和会员管理等基本功能.
功能复杂一点的可能还需要积分管理系统, VIP管理系统, CRM系统, MIS系统, ERP系统和商品销售分析系统等.
交易类网站成功与否的关键在于业务模型的优劣.交易类网站可细分为以下三大类型:
● B2C(Business To Consumer)网站: 商家—消费者, 主要是购物网站, 用于商家和消费者之间的买卖, 如传统的百货商店和购物广场等.
● B2B(Business To Business)网站: 商家—商家, 主要是商务网站, 用于商家之间的买卖, 如传统的原材料市场和大型批发市场等.
● C2C(Consumer To Consumer)网站: 消费者—消费者, 主要以拍卖网站为主, 用于个人物品的买卖,如传统的旧货市场, 跳蚤市场, 废品收购站等.
办公及政府机构网站分为企业办公事务类网站和政府办公类网站.
企业办公事务类网站主要包括企业办公事务管理系统, 人力资源管理系统和办公成本管理系统.
政府办公类网站是利用政府专用网络和内部办公网络而建立的内部门户信息网,
是为了方便办公区域以外的相关部门互通信息, 统一处理数据和共享文件资料而建立的, 其基本功能有:
(1) 提供多数据源接口, 实现业务系统的数据整合.
(2) 统一用户管理, 提供方便有效的访问权限和管理权限体系.
(3) 灵活设立子网站, 实现复杂的信息发布管理流程.
网站面向社会公众, 既可提供办事指南, 政策法规和动态信息等, 又可提供网上行政业务申报, 办理及相关数据查询等.
互动游戏网站是近年来国内逐渐风靡起来的一种网站.
这类网站的投入是根据所承载游戏的复杂程度来定的, 其发展趋势是向超巨型方向发展, 有的已经形成了独立的网络世界.
功能性网站是一种新型网站, 其中Google和百度是典型代表.
这类网站的主要特征是将一个具有广泛需求的功能扩展开来, 开发一套强大的功能体系, 将功能的实现推向极致.
功能在网页上看似简单, 但实际投入成本相当惊人, 而且效益非常巨大.
1.3 网站运行原理及开发流程
1.3.1 常用术语
如果刚接触网站开发, 那么很有必要了解网站的运行原理.
在了解网站的运行原理之前, 首先需要理解网站中一些常用的术语.
● 客户端: 在计算机上运行并连接到互联网的应用程序, 简称浏览器,如Chrome, Firefox和IE, 用户通过操作客户端实现网站和用户之间的数据交互.
● 服务器: 能连接到互联网且具有IP地址的计算机. 服务器主要接收和处理用户的请求信息.当用户在客户端操作网页的时候, 实质上是向网站发送一个HTTP请求, 网站的服务器接收到请求后会执行相应的处理, 最后将处理结果返回客户端并生成相应的网页信息.
● IP地址: 互联网协议地址, TCP/IP网络设备(计算机, 服务器, 打印机, 路由器等)的数字标识符.互联网上的每台计算机都有一个IP地址, 用于识别和通信.IP地址有4组数字, 以小数点分隔(例如244.155.65.2), 这被称为逻辑地址.为了在网络中定位设备, 通过TCP/IP协议将逻辑IP地址转换为物理地址(物理地址即计算机里面的MAC地址).
● 域名: 用于标识一个或多个IP地址.
● DNS: 域名系统, 用于跟踪计算机的域名及其在互联网上相应的IP地址.
● ISP: 互联网服务提供商. 主要工作是在DNS(域名系统)中查找当前域名对应的IP地址.
● TCP/IP: 传输控制协议/互联网协议, 是广泛使用的通信协议.
● HTTP: 超文本传输协议, 是浏览器和服务器通过互联网进行通信的协议.
1.3.2 网站的运行原理
了解网站常用术语后, 我们通过一个简单的例子来讲解网站运行的原理.
(1) 在浏览器中输入网站地址, 如www.github.com.
(2) 浏览器解析网站地址中包含的信息, 如HTTP协议和域名(github.com).
(3) 浏览器与ISP通信, 在DNS中查找www.github.com所对应的IP地址, 然后将IP地址发送到浏览器的DNS服务,最后向www.github.com的IP地址发送请求.
(4) 浏览器从网站地址中获取IP地址和端口(HTTP协议默认为80端口, HTTPS协议默认为443端口),并打开TCP套接字连接, 实现浏览器和Web服务器的连接.
(5) 浏览器根据用户操作向服务器发送相应的HTTP请求, 如打开www.github.com的主页面.
(6) 当Web服务器接收请求后, 根据请求信息查找该HTML页面.若页面存在, 则Web服务器将处理结果和页面返回浏览器.若服务器找不到页面, 则发送一个404错误消息, 代表找不到相关的页面.
1.3.3 网站的开发流程
很多人认为网站开发是一件很困难的事情, 其实没有想象中那么困难.
只要明白了网站的开发流程, 就会觉得网站开发非常简单.
但如果没有一个清晰的开发流程指导开发, 会觉得整个开发过程难以实行.完整的开发流程如下:
(1) 需求分析: 当拿到一个项目时, 必须进行需求分析, 清楚知道网站的类型, 具体功能, 业务逻辑以及网站的风格, 此外还要确定域名, 网站空间或者服务器以及网站备案等.
(2) 规划静态内容: 重新确定需求分析, 并根据用户需求规划出网站的内容板块草图.
(3) 设计阶段: 根据网站草图由美工制作成效果图.就好比建房子一样, 首先画出效果图, 然后才开始建房子, 网站开发也是如此.
(4) 程序开发阶段: 根据草图划分页面结构和设计, 前端和后台可以同时进行.前端根据美工效果负责制作静态页面; 后台根据页面结构和设计, 设计数据库数据结构和开发网站后台.
(5) 测试和上线: 在本地搭建服务器, 测试网站是否存在Bug.若无问题, 则可以将网站打包, 使用FTP上传至网站空间或者服务器.
(6) 维护推广: 在网站上线之后, 根据实际情况完善网站的不足, 定期修复和升级, 保障网站运营顺畅, 然后对网站进行推广宣传等.
1.3.4 任务划分
网站开发必须根据用户需求制定开发任务, 不同职位的开发人员负责不同的功能设计与实现, 各个职位的工作划分如下:
(1) 网页设计由UI负责设计.UI需要考虑用户体验, 网站色调搭配和操作流程等.
(2) 前端开发人员将网页设计图转化成HTML页面, 主要编写HTML网页, CSS样式和JavaScript脚本,如果采用前后端分离, 整个网站的功能就皆由前端人员实现.
(3) 后端开发人员负责实现网站功能和数据库设计.网站功能需要数据库提供数据支持, 实质上是实现数据库的读写操作;数据库设计需要根据网站功能设计相应的数据表, 并且还要考虑数据表之间的数据关联.如果采用前后端分离的开发方式, 后端人员只需编写API接口, 由前端人员调用API接口实现网站功能.
(4) 测试人员负责测试网站功能是否符合用户需求.测试过程需要编写测试用例进行测试, 如果发现功能存在Bug, 就需向开发人员提交Bug的重现方法.只要功能发生修改或变更, 测试人员就要重新测试.
(5) 运维人员负责网站的部署和上线. 网站部署主要搭建在Linux系统, 除了安装Django环境之外,还需要将Django搭建在Nginx或Apache服务器上, 并在Nginx或Apache上绑定网站的域名.
1.4 走进Django
Django是一个开放源代码的Web应用框架, 由Python写成, 最初用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站,
即CMS(内容管理系统)软件, 于2005年7月在BSD许可证下发布, 这套框架是以比利时的吉卜赛爵士吉他手Django Reinhardt来命名的.Django采用了MTV的框架模式, 即模型(Model), 模板(Template)和视图(Views), 三者之间各自负责不同的职责.
● 模型: 数据存取层, 处理与数据相关的所有事务, 例如如何存取, 如何验证有效性, 包含哪些行为以及数据之间的关系等.
● 模板: 表现层, 处理与表现相关的决定, 例如如何在页面或其他类型的文档中进行显示.
● 视图: 业务逻辑层, 存取模型及调取恰当模板的相关逻辑, 模型与模板的桥梁.
Django的主要目的是简便, 快速地开发数据库驱动的网站.
它强调代码复用, 多个组件可以很方便地以插件形式服务于整个框架.
Django有许多功能强大的第三方插件, 可以很方便地开发出自己的工具包, 这使得Django具有很强的可扩展性.
此外, Django还强调快速开发和DRY(Do Not Repeat Yourself)原则.Django基于MTV的设计十分优美, 其具有以下特点:
● 对象关系映射(Object Relational Mapping，ORM): 通过定义映射类来构建数据模型, 将模型与关系数据库连接起来, 使用ORM框架内置的数据库接口可实现复杂的数据操作.
● URL设计: 开发者可以设计任意的URL(网站地址), 而且还支持使用正则表达式设计.
● 模板系统: 提供可扩展的模板语言, 模板之间具有可继承性.
● 表单处理: 可以生成各种表单模型, 而且表单具有有效性检验功能.
● Cache系统: 完善的缓存系统, 可支持多种缓存方式.
● Auth认证系统: 提供用户认证, 权限设置和用户组功能, 功能扩展性强.
● 国际化: 内置国际化系统, 方便开发出多种语言的网站.
● Admin后台系统: 内置Admin后台管理系统, 系统扩展性强.
1.5 安装Django
1.5.1 pip安装方式
本书开发环境为Windows操作系统和Python 3, 如果读者的操作系统是Linux或Mac OS, 可在虚拟机上安装Windows操作系统.
在安装Django之前, 首先安装Python, 读者在官网下载.exe安装包即可, 建议安装Python 3.5或以上的版本.
完成Python的安装后, 接着安装Django版本, 安装方法如下:
使用pip进行安装, 可以按快捷键Windows+R打开'运行'对话框, 然后在对话框中输入'CMD'并按回车键, 进入命令提示符窗口(也称为终端).
在命令提示符窗口输入以下安装指令: pip install Django (别执行, 外网下载贼慢, 也不下载最新版本).
输入上述指令后按回车键, 就会自行下载Django最新版本并安装, 我们只需等待安装完成即可.
使用下面清华源地址, 可以快速下载django, 可以在末尾指定下载版本:
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple Django==3.1.4 通常pip会自动将包下载并安装到Python环境的 site-packages 目录下.
提示: 作者的开发环境: Windows - Python3.8 - Django3.1.4 .
WARNING: You are using pip version 21.1.1; however, version 24.0 is available.
You should consider upgrading via the 'c:\program files\python38\python.exe -m pip install --upgrade pip' command.
警告提示我升级pip管理工具, 依据提示升级即可,
外网: python.exe -m pip install --upgrade pip
清华源: python.exe -m pip install --upgrade pip -i https://pypi.tuna.tsinghua.edu.cn/simple
pip download -d C:\Users\13600\Downloads -i https://pypi.tuna.tsinghua.edu.cn/simple Django==3.1.4
1.5.2 下载按照包方式
除了使用pip安装之外, 还可以从网上下载Django的压缩包自行安装.
在浏览器上输入网址(www.lfd.uci.edu/~gohlke/pythonlibs/#django)并找到Django的下载链接(失效, 图1作废)!
然后将下载的文件放到D盘, 并打开命令提示符窗口, 输入以下安装指令:
pip install D:\Django?3.1.4?py3?none?any.whl
输入指令后按回车键, 等待安装完成的提示即可.
完成Django的安装后, 需要进一步校验安装是否成功, 再次进入命令提示符窗口,
输入'python'并按回车键, 此时进入Python交互解释器, 在交互解释器下输入校验代码:
>>> import django
>>> django.__version__
从上面返回的结果是当前安装的Django版本信息, 这也说明Django安装成功.
1.6 创建项目
一个项目可以理解为一个网站, 创建Django项目可以在命令提示符窗口输入创建指令完成.
打开命令提示符窗口, 将当前路径切换到D盘并输入项目创建指令:
C:\Users\000>d:
D:\>django-admin startproject MyDjango
第一行指令是将当前路径切换到D盘;
第二行指令是在D盘的路径下创建Django项目, 指令中的'MyDjango'是项目名称, 读者可自行命名.
项目创建后, 可以在D盘下看到新创建的文件夹MyDjango, 在PyCharm下查看该项目的结构:
图1-2 目录结构
MyDjango项目里包含MyDjango文件夹和manage.py文件, 而MyDjango文件夹又包含5个.py文件.
项目的各个文件说明如下:
● manage.py: 命令行工具, 内置多种方式与项目进行交互.在命令提示符窗口下, 将路径切换到MyDjango项目并输入python manage.py help, 可以查看该工具的指令信息.
● __init__.py: 初始化文件, 一般情况下无须修改.
● asgi.py: 开启一个ASGI服务, ASGI是异步网关协议接口.
● settings.py: 项目的配置文件, 项目的所有功能都需要在该文件中进行配置, 配置说明会在下一章详细讲述.
● urls.py: 项目的路由设置, 设置网站的具体网址内容.
● wsgi.py: 全称为Python Web Server Gateway Interface，即Python服务器网关接口, 是Python应用与Web服务器之间的接口, 用于Django项目在服务器上的部署和上线, 一般不需要修改.
完成项目的创建后, 接着创建项目应用, 项目应用简称为App, 相当于网站功能, 每个App代表网站的一个功能.
App的创建由文件manage.py实现, 创建指令如下:
D:\> cd MyDjango
D:\MyDjango> python manage.py startapp index
从D盘进入项目MyDjango, 然后使用python manage.py startapp XXX创建, 其中XXX是应用的名称, 读者可以自行命名.
上述指令创建了网站首页, 再次查看项目MyDjango的目录结构, 如图1-3所示.
图1-3 目录结构
从图1-3可以看到, 项目新建了index文件夹, 其可作为网站首页.
在index文件夹可以看到有多个.py文件和migrations文件夹, 说明如下:
● migrations: 用于生成数据迁移文件, 通过数据迁移文件可自动在数据库里生成相应的数据表.
● __init__.py: index文件夹的初始化文件.
● admin.py: 用于设置当前App的后台管理功能.
● apps.py: 当前App的配置信息, 在Django 1.9版本后自动生成, 一般情况下无须修改.
● models.py: 定义数据库的映射类, 每个类可以关联一张数据表, 实现数据持久化, 即MTV里面的模型(Model).
● tests.py: 自动化测试的模块, 用于实现单元测试.
● views.py: 视图文件, 处理功能的业务逻辑, 即MTV里面的视图(Views).
完成项目和App的创建后, 最后在命令提示符窗口输入以下指令启动项目:
C:\Users\000> d:
D:\> cd MyDjango
D:\MyDjango> python manage.py runserver 8001
将命令提示符窗口的路径切换到项目的路径, 输入运行指令python manage.py runserver 8001, 如图1-4所示.
图1-4 输入运行指令 (这个相当于服务端, 关闭后无法使用客户端浏览器访问!)
其中8001是端口号, 如果在指令里没有设置端口, 端口就默认为8000.
最后在浏览器上输入: http://127.0.0.1:8001/, 可看到项目的运行情况, 如图1-5所示.
图1-5 项目运行情况
1.7 PyCharm创建项目
除了在命令提示符窗口创建项目之外, 还可以在PyCharm中创建项目.
PyCharm必须为专业版才能创建与调试Django项目, 社区版是不支持此功能的.
打开PyCharm并在左上方单击 File → New Project, 创建新项目, 如图1-6所示.
图1-6 PyCharm创建Django (如果设置了app名称会自动创建一个App应用.)
项目创建后, 可以看到目录结构多出了templates文件夹, 该文件夹用于存放HTML模板文件, 如图1-7所示.
图1-7 项目目录结构
接着创建App应用, 可以在PyCharm的Terminal中输入创建指令, 创建指令与命令提示符窗口中输入的指令是相同的, 如图1-8所示.
图1-8 PyCharm创建App
完成项目和App的创建后, 启动项目.
如果项目是由PyCharm创建的, 就直接单击'运行'按钮启动项目, 如图1-9所示.
图1-9 Pycharm启动项目
如果项目是在命令提示符窗口创建的, 想要在PyCharm启动项目, 而PyCharm没有运行脚本, 就需要对该项目创建运行脚本, 如图1-10所示.
(第一次打开MyDjango时, 显示x).
图1-10 创建运行脚本
(一般这步可以省略, 我还是补上吧)
图1-11 创建运行脚本.
单击图1-10中的Edit Configurations就会出现Run/Debug Configurations界面,
单击该界面左上方的+并选择Django server, 输入脚本名字, 单击OK按钮即可创建运行脚本, 如图1-11所示.
注意: 由于PyCharm自动为我们创建templates文件夹, 并且在配置文件settings.py的TEMPLATES的DIRS添加templates文件夹的路径信息.
从Django 3.1版本开始, 配置文件settings.py的路径信息改用pathlib模块,
Django 3.1之前版本使用os模块, 因此PyChram添加templates文件夹的路径信息仍使用os模块(!!!).
这里说的: PyChram版本添加templates文件夹的路径信息使用适配os模块的语句, 不太准确, 它不会根据版本生成对应的模块语句.
说明: 在Django 2.x版本流行的时候, PyCharm自动添加是适配os模块的语句: [os.path.join(BASE_DIR, 'templates')] .
随着Django 3.x版本成为主流, 使用pathlib模块后,
Pycharm自动添加模板文件路径代码为: 'DIRS': [BASE_DIR / 'templates'],
在新版本中使用旧版本的Django, 自动添加路径还是'DIRS': [BASE_DIR / 'templates'], 固定了.
那么又引发一个兼容性问题: 老版本中os模块无法使用os.path.join对[BASE_DIR / 'templates']进行路径拼接, 导致报错!
修改方式: 将'/'改为','.所有版本pycharm: https://www.jetbrains.com/pycharm/download/other.html
1.8 开启Django Hello World
要学习Django首先需要了解Django的操作指令, 了解了每个指令的作用,
才能在MyDjango项目里编写Hello World网页, 然后通过该网页我们可以简单了解Django的开发过程.
1.8.1 Django的操作指令
无论是创建项目还是创建项目应用, 都需要使用相关的指令才能得以实现, 这些指令都是Django内置的操作指令.
在PyCharm的Terminal中输入指令python manage.py help并按回车键, 即可看到相关的指令信息, 如图1-12所示.
图1-12 Django指令信息
Django的操作指令共有30条, 每条指令的说明如表1-1所示.
| 指令 | 说明 |
|---|
| changepassword | 修改内置用户表的用户密码 |
| createsuperuser | 为内置用户表创建超级管理员账号 |
| remove_stale_contenttypes | 删除数据库中已不使用的数据表 |
| check | 检测整个项目是否存在异常问题 |
| compilemessages | 编译语言文件，用于项目的区域语言设置 |
| createcachetable | 创建缓存数据表，为内置的缓存机制提供存储功能 |
| dbshell | 进入Django配置的数据库，可以执行数据库的SQL语句 |
| diffsettings | 显示当前settings.py的配置信息与默认配置的差异 |
| dumpdata | 导出数据表的数据并以JSON格式存储 |
| flush | 清空数据表的数据信息 |
| inspectdb | 获取项目所有模型的定义过程 |
| loaddata | 将数据文件导入数据表 |
| makemessages | 创建语言文件，用于项目的区域语言设置 |
| makemigrations | 从模型对象创建数据迁移文件 |
| migrate | 根据迁移文件的内容，在数据库里生成相应的数据表 |
| sendtestemail | 向指定的收件人发送测试的电子邮件 |
| shell | 进入Django的Shell模式，用于调试项目功能 |
| showmigrations | 查看当前项目的所有迁移文件 |
| sqlflush | 查看清空数据库的SQL语句脚本 |
| sqlmigrate | 根据迁移文件内容输出相应的SQL语句 |
| sqlsequencereset | 重置数据表递增字段的索引值 |
| squashmigrations | 对迁移文件进行压缩处理 |
| startapp | 创建项目应用App |
| startproject | 创建新的Django项目 |
| test | 运行App里面的测试程序 |
| testserver | 新建测试数据库并使用该数据库运行项目 |
| clearsessions | 清除会话Session数据 |
| collectstatic | 收集所有的静态文件 |
| findstatic | 查找静态文件的路径信息 |
| runserver | 在本地计算机上启动Django项目 |
表1-1简单讲述了Django操作指令的作用, 对于刚接触Django的读者来说, 可能并不理解每个指令的具体作用, 本节只对这些指令进行概述,
读者只需要大概了解, 在后续的学习中会具体讲述这些指令的使用方法.
此外, 有兴趣的读者也可以参考官方文档(docs.djangoproject.com/zh-hans/3.1/ref/django-admin/).
1.8.2 开启Hello World之旅
相信读者现在对Django已经有了大概的认知, 在本节, 我们在MyDjango项目里实现Hello World网页, 让读者打开Django的大门.
首先在templates文件夹里新建index.html文件, 该文件是Django的模板文件,
如果MyDjango项目是在命令提示符窗口下创建的就需要在MyDjango项目的路径下自行创建templates文件夹, 如图1-13所示.
图1-13 目录结构
接着打开MyDjango文件夹的配置文件settings.py, 找到配置属性INSTALLED_APPS和TEMPLATES,
分别将项目应用index和模板文件夹templates添加到相应的配置属性, 其配置如下所示:
Django所有的功能都必须在配置文件settings.py中设置, 否则项目在运行的时候无法生成相应的功能,
有关配置文件settings.py的配置属性将会在第2章讲述.
最后在项目的urls.py (MyDjango2文件夹的urls.py),
views.py(项目应用index的views.py文件)和index.html(templates文件夹的index.html) 文件里编写相应的代码,
即可实现简单的Hello World网页, 代码如下:
from django.contrib import admin
from django.urls import path
from index.views import indexurlpatterns = [path('admin/', admin.site.urls),path('', index)
]
from django.shortcuts import render
def index(request):return render(request, 'index.html')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title>
</head>
<body><span>Hello World!!</span>
</body>
</html>
在上述代码里可以简单映射出用户访问网页的过程, 说明如下:
● 当用户在浏览器访问网址的时候, 该网址在项目所设置的路由(urls.py文件)里找到相应的路由信息.
● 然后从路由信息里找到对应的视图函数(views.py文件), 由视图函数处理用户请求.
● 视图函数将处理结果传递到模板文件(index.html文件), 由模板文件生成网页内容, 并在浏览器里展现.
启动MyDjango项目, 并在浏览器上访问路由地址(http://127.0.0.1:8000)即可看到Hello World网页, 如图1-14所示.
图1-14 Hello World网页
注意: 由于Django默认配置的数据库是SQLite, 因此在启动MyDjango项目之后, 在MyDjango的目录里自动新建db.sqlite3文件.
1.9 调试Django项目
在开发网站的过程中, 为了确保功能可以正常运行及验证是否实现开发需求, 开发人员需要对已实现的功能进行调试.
Django的调试方式分为PyCharm断点调试和调试异常.
1.9.1 PyCharm断点调试
我们知道, PyCharm调试Django开发的项目, PyCharm的版本必须为专业版, 而社区版是不具备Web开发功能的.
使用PyCharm启动Django的时候, 可以发现PyCharm上带有爬虫的按钮, 该按钮用于开启Django的Debug调试模式, 如图1-15所示.
图1-15 调试按钮
单击图1-15中的调试按钮(带有爬虫的按钮), 即可开启调试模式, 在PyCharm的正下方可以看到相关的调试信息, 如图1-16所示.
图1-16 调试信息
从图1-16的调试界面可以看到有多个操作按钮, 常用的调试按钮的功能说明以表格的形式表示, 如表1-2所示.
表1-2 常用的调试按钮的功能说明
我们通过简单的示例来讲述如何使用PyCharm的调试模式.
以MyDjango项目为例, 在index文件夹的views.py文件里, 视图函数index添加变量value并且在返回值return处设置断点, 如图1-17所示.
from django.shortcuts import render
def index(request):value = "This is test!"print(value)return render(request, 'index.html')
图1-17 设置断点
设置断点是在图1-17的方框里单击一下即可出现红色的圆点, 该圆点代表断点设置,
当项目开启调试模式并运行到断点所在的代码位置, 程序就会暂停运行.开启MyDjango项目的调试模式并在浏览器上访问127.0.0.1:8000,
在PyCharm正下方的调试界面里可以看到相关的代码信息, 如图1-18所示.
图1-18 代码信息
调试界面Debugger的Frames是当前断点的程序所依赖的程序文件,
单击某个文件, Variables就会显示当前文件的程序所生成的对象信息.
单击[Resume Program]按钮(F9), PyCharm就会自动往下执行程序, 直到下一个断点才暂停程序;
单击[step into]按钮(F7), PyCharm只会执行当前暂停位置的下一步代码, 这样可以清晰地看到每行代码的执行情况.
这两个按钮是断点调试最为常用的, 它们能让开发者清晰地了解代码的执行情况和运行逻辑.
如果程序在运行过程中出现异常或者代码中设有输出功能(如print),
这些信息就可以在PyCharm正下方调试界面的Console里查看, 如图1-19所示.
启动项目的时候, 从图1-19的运行信息看到"System check identified no issues (0 silenced)"信息.
该信息表示Django对项目里所有的代码语法进行检测, 如果代码语法存在错误, 在启动的过程中就会报出相关的异常信息.
图1-19中的"This is test!"是视图函数index的"print(value)"代码输出结果(往下拉);
"GET / HTTP/1.1"200代表浏览器成功访问127.0.0.1:8000, 其中200代表HTTP的状态码.
注意: 断点调试无法在模板文件(templates的index.html)设置断点,
因此无法对模板文件进行调试, 只能通过PyChram调试界面Console或浏览器开发者工具进行调试.
1.9.2 调试异常
PyCharm的调试模式无法调试模板文件, 而模板文件需要使用Django的模板语法,
若想调试模板文件, 则最有效的方法是查看PyCharm或浏览器提示的异常信息.调试异常需要根据项目运行时所产生的异常信息进行分析, 使用浏览器访问路由地址的时候,
如果出现异常信息, 就可以直接查看异常信息找出错误位置.
比如在templates的模板文件index.html里添加错误的代码, 如下所示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title>
</head>
<body>{# 添加错误代码static#}{% static %}
<span>Hello World!!</span>
</body>
</html>
当运行MyDjango项目并在浏览器访问127.0.0.1:8000的时候,
PyCharm正下方的调试界面Console就会出现异常信息, 从异常信息中可以找到具体的异常位置, 如图1-20所示.
图1-20 异常信息
除了在PyCharm正下方的调试界面Console查看异常信息外, 还可以在浏览器上分析异常信息,
比如模板文件index.html的错误语法, Django还能标记出错位置, 便于开发者调试和跟踪, 如图1-21所示.
图1-21 异常信息
还有一种常见的情况是网页能正常显示, 但网页内容出现部分缺失.
对于这种情况, 只能使用浏览器的开发者工具对网页进行分析处理.
以templates的模板文件index.html为例, 对其添加正确的代码, 但在网页里出现内容缺失, 如下所示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title>
</head>
<body>{# 添加正确代码，但不出现在网页 #}<div>Hi,{{ value }}</div><span>Hello World!!</span>
</body>
</html>
再次启动MyDjango项目并在浏览器访问127.0.0.1:8000的时候, 浏览器能正常访问网页,
但无法显示{{ value }}的内容, 打开浏览器的开发者工具看到, {{ value }}的内容是不存在的, 如图1-22所示.
图1-22 开发者工具
此外, 浏览器的开发者工具对于调试AJAX和CSS样式非常有用.
通过生成的网页内容进行分析来反向检测代码的合理性是常见的手段之一, 这是通过校验结果与开发需求是否一致的方法来调试项目功能的.
1.10 HTML, CSS和JavaScript
网站开发可以分为前端开发和后端开发, 前端开发是指网页设计,
我们在浏览器看到网站的图片, 文字, 音乐视频等内容排版都是由前端开发人员实现的;
后端开发是为前端开发提供实际的数据内容和业务逻辑, 比如提供文字内容, 图片和音乐视频的路径地址等信息.前端开发人员必须掌握HTML, CSS和JavaScript的基础语言, 这些基础语言上延伸了许多前端框架,
比如jQuery, Bootstrap, Vue, React和AngularJS等.
后端开发人员必须掌握一种或多种后端开发语言, 数据库应用原理, Web服务器应用原理和基础运维技术,
目前较为热门的后端开发语言分别有Java, PHP, Python和GO语言;
数据库为MySQL, MSSQL, Oracle和Redis等.尽管明确划分了网站开发的职责, 在实际工作中, 特别是一些中小企业,
他们也要求后端开发人员必须掌握前端开发技术, 但无须精通前端开发, 只要掌握基本的应用开发即可,
比如调整网站布局或编写简单的JavaScript脚本.我们除了学习使用Django开发网站, 还需要掌握前端的基础知识, 本节将简单讲述HTML, CSS和JavaScript的基础知识.
1.10.1 HTML
HTML是超文本标记语言, 标准通用标记语言下的一个应用.
'超文本'就是指页面内可以包含图片, 链接, 甚至音乐, 程序等非文字元素.
超文本标记语言的结构包括'头'部分(Head)和'主体'部分(Body), 其中'头'部分提供关于网页的信息, '主体'部分提供网页的具体内容.
下面来看一个简单的HTML文档的结构:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Python</title></head><body><h1>我的第一个标题</h1> <p>我的第一个段落。</p></body>
</html>
一个完整的网页必定以<html></html>为开头和结尾, 整个HTML可分为两部分:
(1) <head></head>, 主要是对网页的描述, 图片和JavaScript的引用.<head>元素包含所有的头部标签元素.在<head>元素中可以插入脚本(scripts), 样式文件(CSS)及各种meta信息.该区域可添加的元素标签有<title>, <style>, <meta>、<link>, <script>, <noscript>和<base>.(2) <body></body>是网页信息的主要载体.该标签下还可以包含很多类别的标签, 不同的标签有不同的作用, 标签以<>开头, 以</>结尾,<>和</>之间的内容是标签的值和属性, 每个标签之间可以是相互独立的, 也可以是嵌套, 层层递进的关系.根据这两个组成部分就能很容易地分析整个网页的布局.
其中, <body></body>是整个HTML的重点部分, 通过示例讲述如何分析<body></body>:
<body><h1>我的第一个标题</h1><div><p> Python</p></div><h2><p><a> Python</a></p></h2>
</body>
上述例子分析如下:
(1) <h1>和<div>是两个不相关的标签, 两个标签是相互独立的.
(2) <div>和<p>是嵌套关系, <p>的上一级标签是<div>.
(3) <h1>和<p>这两个标签是毫无关系的.
(4) <h2>标签包含一个<p>标签, <p>标签再包含一个<a>标签, 一个标签可以包含多个标签在其中.
除上述示例的标签之外, 大部分标签都可以在<body></body>中添加, 常用的标签如表1-3所示.
表1-3 HTML常用的标签
| HTML标签 | 中文释义 |
|---|
img | 图像 |
a | 锚(超链接) |
strong | 加重(文本) |
em | 强调(文本) |
i | 斜体字 |
b | 粗体(文本) |
br | 换行 |
div | 分隔 |
span | 范围 |
ol | 排序列表 |
ul | 不排序列表 |
li | 列表项目 |
dl | 定义列表 |
h1 ~ h6 | 标题1 ~ 标题6 |
p | 段落 |
tr | 表格中的一行 |
th | 表格中的表头 |
td | 表格中的一个单元格 |
1.10.2 CSS
HTML代码是保存在后缀名为.html的文件, 而CSS样式是保存在后缀名为.css的文件, 然后在HTML代码中调用CSS样式文件.
由于HTML代码中会存在多个不同的元素, 并且每个元素的网页布局各不相同,
因此需要使用CSS选择器定位每个HTML元素, 然后再编写相应的CSS样式.CSS选择器划分了多种类型, 同一个HTML元素可以使用不同的CSS选择器进行定位, 实际开发中最常用的CSS选择器分别为:
类别选择器, 标签选择器, ID选择器, 通用选择器和群组选择器, 我们将简单讲述如何使用这些CSS选择器实现HTML元素的网页布局.为了更好地理解CSS样式的编写规则, 我们将重新定义HTML代码, 首先在D盘中创建文件夹qd,
然后在qd文件夹中分别创建index.html和index.css文件, 如图1-23所示.
图1-23 目录结构
然后打开index.html文件, 在该文件中定义网页元素, 详细代码如下:
<html><head><link rel="stylesheet" type="text/css" href="index.css"></head><body><h3>这是标题</h3><div class="content"><p>这是正文</P><input id="message" placeholder="输入你的留言"><br><button id="submit" >提交</button></div></body>
</html>
上述代码中使用link标签引入同一路径的index.css文件,
link标签是在HTML代码中引入CSS文件, 使CSS文件的样式代码能在HTML代码中生效.
然后设置了5个不同类型的HTML标签, 分别为<h3>, <div>, <p>, <input>和<button>,
其中<div>设置了class属性, <input>和<button>设置了id属性.
在设置样式之前, 我们使用浏览器查看没有样式效果的index.html文件, 如图1-24所示.
图1-24 网页效果
下一步将使用类别选择器, 标签选择器, ID选择器, 通用选择器和群组选择器分别对这些HTML标签进行样式设置.
打开qd文件夹的index.css文件, 然后在此文件中分别编写<h3>, <div>, <p>, <input>和<button>的样式代码, 代码如下:
* {font-size:30px
}
h3 {color:blue;
}
.content {text-align:center;
}
#message {width:500px;
}
#submit, p {color:red;
}
上述代码中, 我们依次使用通用选择器, 标签选择器, 类别选择器, ID选择器和群组选择器设置index.html的网页布局,
从代码中可以归纳总结CSS选择器的语法格式, 如下所示.
XXX {attribute:value;attribute:value;
}
CSS选择器的语法说明如下:
(1) XXX代表CSS选择器的类型.
(2) 在CSS选择器后面使用空格并添加中括号{}, 在中括号{}里面编写具体的样式设置.
(3) 样式设置以attribute:value表示, attribute代表样式名称, value代表该样式设置的数值. 多个样式之间使用分号';'隔开.
(4) 如果要对样式添加注释, 可以使用'/**/'添加说明.我们回看index.css文件, 该文件的样式代码说明如下:
(1) 通用选择器: 它以符号'*'表示, 这是设置整个网页所有元素的样式, 用于网页的整体布局.上述代码是将整个网页的字体大小设为30px.
(2) 标签选择器: 它以标签名表示, 如果网页中有多个相同的标签, 那么标签选择器的样式设置都会作用在这些标签上.上述代码是将所有h3标签的字体颜色设为蓝色.
(3) 类别选择器: 它以.xxx表示, 其中xxx代表标签属性class的属性值, 这是开发中常用的样式设置之一.使用类别选择器, 必须在HTML的标签中设置class属性, 在class属性的属性值前面加上实心点'.'即可作为类别选择器.上述代码是将class="content"的标签放置网页居中位置.
(4) ID选择器: 它以#xxx表示, 其中xxx代表标签属性id的属性值, 这也是开发中常用的样式设置之一.使用ID选择器, 必须在HTML的标签中设置id属性, 在id属性的属性值前面加上井号'#'即可作为ID选择器.上述代码是将id="message"的标签设置宽度为500px.
(5) 群组选择器: 它是将多个CSS选择器组合成一个群组, 并由这个群组对这些标签进行统一的样式设置, 每个CSS选择器之间使用逗号隔开.上述代码是分别将id="submit"的标签和p标签的字体颜色设为红色.
最后保存index.css文件的样式代码, 在浏览器再次查看index.html文件的网页效果, 如图1-25所示.
图1-25 网页效果
CSS样式也可以直接在HTML文件里编写, 但在企业开发中, 一般都采用HTML和CSS代码分离,
这样便于维护和管理, 而且利于开发者阅读.
1.10.3 JavaScript
JavaScript(简称'JS')是一种具有函数优先的轻量级, 解释型的编程语言.
它是因为开发Web页面的脚本语言而出名的, 但是也被用到了很多非浏览器环境中,
JavaScript基于原型编程, 多范式的动态脚本语言, 并且支持面向对象, 命令式和声明式的编程风格.
简单来说, JavaScript是能被浏览器解释并执行的一种编程语言.JavaScript可以在HTML文件里编写, 但在企业开发中也是采用HTML和JavaScript代码分离.
为了更好地理解JavaScript的代码编写方式, 我们在qd文件夹中新建index.js文件, 文件夹的目录结构如图1-26所示.
首先打开index.html文件, 在HTML代码中引入JS文件, 并为button标签添加事件触发, 详细代码如下:
<html><head><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><h3>这是标题</h3><div class="content"><p>这是正文</P><input id="message" placeholder="输入你的留言"><br><button id="submit" onclick="getInfo()">提交</button></div></body>
</html>
从上述代码看到, script标签是在HTML代码中引入JS文件, 使得JS文件的JavaScript代码能在HTML代码中生效.
button标签添加了onclick属性, 该属性是JS的事件触发, 当用户单击'提交'按钮的时候,
浏览器将会触发事件onclick所绑定的函数getInfo().JavaScript除了事件触发onclick之外, 还提供了其他的事件触发, 如表1-4所示.
表1-4 JavaScript的事件触发
| 事件触发 | 说 明 |
|---|
onabort | 图像加载被中断时触发 |
onblur | 元素失去焦点时触发 |
onchange | 用户改变文本内容时触发 |
onclick | 鼠标单击某个标签时触发 |
ondblclick | 鼠标双击某个标签时触发 |
onerror | 加载文档或图像时发生某个错误时触发 |
onfocus | 元素获得焦点时触发 |
onkeydown | 某个键盘的键被按下时触发 |
onkeypress | 某个键盘的键被按下或按住时触发 |
onkeyup | 某个键盘的键被松开时触发 |
onload | 某个页面或图像完成加载时触发 |
onmousedown | 某个鼠标按键被按下时触发 |
onmousemove | 鼠标移动时触发 |
onmouseout | 鼠标从某元素移开时触发 |
onmouseover | 鼠标被移到某元素之上时触发 |
onmouseup | 某个鼠标按键被松开时触发 |
onreset | 重置按钮被单击时触发 |
onresize | 窗口或框架被调整尺寸时触发 |
onselect | 文本被选定时触发 |
onsubmit | 提交按钮被单击时触发 |
onunload | 用户退出页面时触发 |
我们回看index.html的button标签, 由于该标签的事件触发onclick绑定了函数getInfo(),
因此下一步在index.js里定义函数getInfo(), 函数代码如下:
function getInfo(){var txt = document.getElementById("message").valueif (txt){alert("你的留言：" + txt + "，已提交成功")} else {alert("请输入你的留言");}
}
上述代码的document.getElementById是获取id="message"的标签(即input标签)的属性value的属性值,
JavaScript的document对象简称为DOM对象, 它可以定位某个HTML标签并进行操作, 从而实现网页的动态效果.
document对象定义了7个对象方法, 每个对象方法的详细说明如表1-5所示.
表1-5 document对象方法
| 方法 | 说 明 |
|---|
close() | 关闭通过 document.open() 方法打开的输出流, 并显示选定的数据. |
getElementById("xxx") | 获取 id="xxx" 的第一个HTML元素对象. 此方法返回单个元素, 如果找不到匹配的元素则返回 null. |
getElementsByName("xxx") | 获取所有name="xxx"的标签对象, 并以类似数组的NodeList对象表示 . |
getElementsByTagName("xxx") | 获取所有xxx标签对象, 并以类似数组的NodeList对象表示. |
open() | 打开一个文档流, 以收集来自 document.write()或 document.writeln()的数据. |
write() | 将指定的HTML或JavaScript代码写入文档流. 当与 document.open()一起使用时, 可以将内容动态写入页面. |
writeln() | 与write()方法类似, 但在每个表达式后面自动添加换行符. |
在实际开发中, 我们经常使用getElementById, getElementsByName和getElementsByTagName方法来定位HTML标签,
然后再对已定位的HTML标签进行操作, 由于标签的操作方法较多, 本书便不再详细讲述了, 有兴趣的读者可自行搜索相关资料.最后保存index.js文件的JavaScript代码, 在浏览器打开index.html文件, 在网页的文本框输入内容并点击'提交'按钮, 如图1-27所示.
图1-27 网页效果
1.11 本章小结
网站是指在因特网上根据一定的规则, 使用HTML等工具制作并用于展示特定内容相关网页的集合.
在早期, 域名, 空间服务器与程序是网站的基本组成部分, 随着科技的不断进步, 网站的组成也日趋复杂,
目前多数网站由域名, 空间服务器, DNS域名解析, 网站程序和数据库等组成.网站开发流程如下:
(1) 需求分析: 当拿到一个项目时, 必须进行需求分析, 清楚知道网站的类型, 具体功能, 业务逻辑以及网站的风格, 此外还要确定域名, 网站空间或者服务器以及网站备案等.
(2) 规划静态内容: 重新确定需求分析, 并根据用户需求规划出网站的内容板块草图.
(3) 设计阶段: 根据网站草图, 由美工制作成效果图.就好比建房子一样, 首先画出效果图, 然后才开始建房子, 网站开发也是如此.
(4) 程序开发阶段: 根据草图划分页面结构和设计, 前端和后台可以同时进行.前端根据美工效果负责制作静态页面; 后台根据页面结构和设计, 设计数据库数据结构和开发网站后台.
(5) 测试和上线: 在本地搭建服务器, 测试网站是否存在Bug.若无问题, 则可以将网站打包, 使用FTP上传至网站空间或者服务器.
(6) 维护推广: 在网站上线之后, 根据实际情况完善网站的不足, 定期修复和升级, 保障网站运营顺畅, 然后对网站进行推广宣传等.
Django采用MTV的框架模式, 即模型(Model), 模板(Template)和视图(Views), 三者之间各自负责不同的职责.
● 模型: 数据存取层, 处理与数据相关的所有事务, 例如如何存取, 如何验证有效性, 包含哪些行为以及数据之间的关系等.
● 模板: 表现层, 处理与表现相关的决定, 例如如何在页面或其他类型的文档中进行显示.
● 视图: 业务逻辑层, 存取模型及调取恰当模板的相关逻辑, 模型与模板的桥梁.建议使用pip命令安装Django, 安装的方法如下:
pip install Django
pip install D:\Django?3.1.4?py3?none?any.whl
两种不同的安装方法都是使用pip执行的, 唯一的不同之处在于前者在安装过程中会从互联网下载安装包,
而后者直接对本地已下载的安装包进行解压安装.
Django安装完成后, 在Python交互解释器模式校验安装是否成功:
>>> import django
>>> django.__version__
Django的目录结构以及含义如下:
● manage.py: 命令行工具, 内置多种方式与项目进行交互.在命令提示符窗口下, 将路径切换到MyDjango项目并输入python manage.py help, 可以查看该工具的指令信息.
● __init__.py: 初始化文件, 一般情况下无须修改.
● asgi.py: 开启一个ASGI服务, ASGI是异步网关协议接口.
● settings.py: 项目的配置文件, 项目的所有功能都需要从该文件里进行配置, 配置说明会在第2章详细讲述.
● urls.py: 项目的路由设置, 设置网站的具体网址内容.
● wsgi.py: 全称为Python Web Server Gateway Interface,即Python服务器网关接口, 是Python应用与Web服务器之间的接口, 用于Django项目在服务器上的部署和上线, 一般不需要修改.
● migrations: 用于生成数据迁移文件, 通过数据迁移文件可自动在数据库里生成相应的数据表.
● __init__.py: index文件夹的初始化文件.
● admin.py: 用于设置当前App的后台管理功能.
● apps.py: 当前App的配置信息, 在Django 1.9版本后自动生成, 一般情况下无须修改.
● models.py: 定义数据库的映射类, 每个类可以关联一张数据表, 实现数据持久化, 即MTV里面的模型(Model).
● tests.py: 自动化测试的模块, 用于实现单元测试.
● views.py: 视图文件, 处理功能的业务逻辑, 即MTV里面的视图(Views).
Django入门部分需要了解Django的操作指令以及使用Django编写Hello World网页, 同时要掌握项目开发的调试方法.
