Django3 - 开启Django Hello World

一、开启Django Hello World

要学习Django首先需要了解Django的操作指令，了解了每个指令的作用，才能在MyDjango项目里编写Hello World网页，然后通过该网页我们可以简单了解Django的开发过程。

1.1 Django的操作指令

无论是创建项目还是创建项目应用，都需要使用相关的指令才能得以实现，这些指令都是Django内置的操作指令。在PyCharm的Terminal中输入指令python manage.py help并按回车键，即可看到相关的指令信息，如图所示。

Django的操作指令共有30条，每条指令的说明如表所示。

1.2 开启Hello World之旅

首先在templates文件夹里新建index.html文件，该文件是Django的模板文件，如果MyDjango项目是在命令提示符窗口下创建的，就需要在MyDjango项目的路径下自行创建templates文件夹，如图所示。

接着打开MyDjango文件夹的配置文件settings.py，找到配置属性INSTALLED_APPS和TEMPLATES，分别将项目应用index和模板文件夹templates添加到相应的配置属性，其配置如下所示：

Django所有的功能都必须在配置文件settings.py中设置，否则项目在运行的时候无法生成相应的功能。最后在项目的urls.py（MyDjango文件夹的urls.py）、views.py（项目应用index的views.py文件）和index.html（templates文件夹的index.html）文件里编写相应的代码，即可实现简单的Hello World网页，代码如下：

在上述代码里可以简单映射出用户访问网页的过程，说明如下：

当用户在浏览器访问网址的时候，该网址在项目所设置的路由（urls.py文件）里找到相应的路由信息。

然后从路由信息里找到对应的视图函数（views.py文件），由视图函数处理用户请求。

视图函数将处理结果传递到模板文件（index.html文件），由模板文件生成网页内容，并在浏览器里展现。

启动MyDjango项目，并在浏览器上访问路由地址(http://127.0.0.1:8000)即可看到Hello World网页，如图所示。

注意：由于Django默认配置的数据库是SQLite，因此在启动MyDjango项目之后，在MyDjango的目录里自动新建db.sqlite3文件。

二、调试Django项目

在开发网站的过程中，为了确保功能可以正常运行及验证是否实现开发需求，开发人员需要对已实现的功能进行调试。Django的调试方式分为PyCharm断点调试和调试异常。

2.1 PyCharm断点调试

我们知道，PyCharm调试Django开发的项目，PyCharm的版本必须为专业版，而社区版是不具备Web开发功能的。使用PyCharm启动Django的时候，可以发现PyCharm上带有爬虫的按钮，该按钮用于开启Django的Debug调试模式。

单击调试按钮（带有爬虫的按钮），即可开启调试模式，在PyCharm的正下方可以看到相关的调试信息，如图所示。

从图的调试界面可以看到有多个操作按钮，常用的调试按钮的功能说明以表格的形式表示，如表所示。

我们通过简单的示例来讲述如何使用PyCharm的调试模式。以MyDjango项目为例，在index文件夹的views.py文件里，视图函数index添加变量value并且在返回值return处设置断点。

设置断点是在图的方框里单击一下即可出现红色的圆点，该圆点代表断点设置，当项目开启调试模式并运行到断点所在的代码位置，程序就会暂停运行。开启MyDjango项目的调试模式并在浏览器上访问127.0.0.1:8000，在PyCharm正下方的调试界面里可以看到相关的代码信息，如图所示。

调试界面Debugger的Frames是当前断点的程序所依赖的程序文件，单击某个文件，Variables就会显示当前文件的程序所生成的对象信息。单击按钮，PyCharm就会自动往下执行程序，直到下一个断点才暂停程序；单击按钮，PyCharm只会执行当前暂停位置的下一步代码，这样可以清晰地看到每行代码的执行情况。这两个按钮是断点调试最为常用的，它们能让开发者清晰地了解代码的执行情况和运行逻辑。

如果程序在运行过程中出现异常或者代码中设有输出功能（如print），这些信息就可以在PyCharm正下方调试界面的Console里查看，如图所示。

启动项目的时候，从图的运行信息看到“System check identified no issues (0silenced)”信息，该信息表示Django对项目里所有的代码语法进行检测，如果代码语法存在错误，在启动的过程中就会报出相关的异常信息。图中的“This is test!”是视图函数index的“print(value)”代码输出结果；"GET / HTTP/1.1"200代表浏览器成功访问127.0.0.1:8000，其中200代表HTTP的状态码。

注意：断点调试无法在模板文件（templates的index.html）设置断点，因此无法对模板文件进行调试，只能通过PyChram调试界面Console或浏览器开发者工具进行调试。

2.2 调试异常

PyCharm的调试模式无法调试模板文件，而模板文件需要使用Django的模板语法，若想调试模板文件，则最有效的方法是查看PyCharm或浏览器提示的异常信息。调试异常需要根据项目运行时所产生的异常信息进行分析，使用浏览器访问路由地址的时候，如果出现异常信息，就可以直接查看异常信息找出错误位置。比如在templates的模板文件index.html里添加错误的代码，如下所示：

当运行MyDjango项目并在浏览器访问127.0.0.1:8000的时候，PyCharm正下方的调试界面Console就会出现异常信息，从异常信息中可以找到具体的异常位置。除了在PyCharm正下方的调试界面Console查看异常信息外，还可以在浏览器上分析异常信息，比如模板文件index.html的错误语法，Django还能标记出错位置，便于开发者调试和跟踪。

还有一种常见的情况是网页能正常显示，但网页内容出现部分缺失。对于这种情况，只能使用浏览器的开发者工具对网页进行分析处理。以templates的模板文件index.html为例，对其添加正确的代码，但在网页里出现内容缺失。

再次启动MyDjango项目并在浏览器访问127.0.0.1:8000的时候，浏览器能正常访问网页，但无法显示{{ value }}的内容，打开浏览器的开发者工具看到，{{ value }}的内容是不存在的。

此外，浏览器的开发者工具对于调试AJAX和CSS样式非常有用。通过生成的网页内容进行分析来反向检测代码的合理性是常见的手段之一，这是通过校验结果与开发需求是否一致的方法来调试项目功能的。

三、HTML、CSS和JavaScript

网站开发可以分为前端开发和后端开发，前端开发是指网页设计，我们在浏览器看到网站的图片、文字、音乐视频等内容排版都是由前端开发人员实现的；后端开发是为前端开发提供实际的数据内容和业务逻辑，比如提供文字内容、图片和音乐视频的路径地址等信息。

前端开发人员必须掌握HTML、CSS和JavaScript的基础语言，这些基础语言上延伸了许多前端框架，比如jQuery、Bootstrap、Vue、React和AngularJS等。后端开发人员必须掌握一种或多种后端开发语言、数据库应用原理、Web服务器应用原理和基础运维技术，目前较为热门的后端开发语言分别有Java、PHP、Python和GO语言；数据库为MySQL、MSSQL、Oracle和Redis等。

尽管明确划分了网站开发的职责，在实际工作中，特别是一些中小企业，他们也要求后端开发人员必须掌握前端开发技术，但无须精通前端开发，只要掌握基本的应用开发即可，比如调整网站布局或编写简单的JavaScript脚本。我们除了学习使用Django开发网站，还需要掌握前端的基础知识。

3.1 HTML

HTML是超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(Head)和“主体”部分(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>：

上述例子分析如下：

(1)<h1>和<div>是两个不相关的标签，两个标签是相互独立的。

(2)<div>和<p>是嵌套关系，<p>的上一级标签是<div>。

(3)<h1>和<p>这两个标签是毫无关系的。

(4)<h2>标签包含一个<p>标签，<p>标签再包含一个<a>标签，一个标签可以包含多个标签在其中。

除上述示例的标签之外，大部分标签都可以在<body></body>中添加，常用的标签如表所示。

3.2 CSS

HTML代码是保存在后缀名为.html的文件，而CSS样式是保存在后缀名为.css的文件，然后在HTML代码中调用CSS样式文件。由于HTML代码中会存在多个不同的元素，并且每个元素的网页布局各不相同，因此需要使用CSS选择器定位每个HTML元素，然后再编写相应的CSS样式。

CSS选择器划分了多种类型，同一个HTML元素可以使用不同的CSS选择器进行定位，实际开发中最常用的CSS选择器分别为：类别选择器、标签选择器、ID选择器、通用选择器和群组选择器，我们将简单讲述如何使用这些CSS选择器实现HTML元素的网页布局。

打开index.html文件，在该文件中定义网页元素，详细代码如下：

上述代码中使用link标签引入同一路径的index.css文件，link标签是在HTML代码中引入CSS文件，使CSS文件的样式代码能在HTML代码中生效。然后设置了5个不同类型的HTML标签，分别为<h3>、<div>、<p>、<input>和<button>，其中<div>设置了class属性，<input>和<button>设置了id属性。

使用类别选择器、标签选择器、ID选择器、通用选择器和群组选择器分别对这些HTML标签进行样式设置。

上述代码中，我们依次使用通用选择器、标签选择器、类别选择器、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标签的字体颜色设为红色。

CSS样式也可以直接在HTML文件里编写，但在企业开发中，一般都采用HTML和CSS代码分离，这样便于维护和管理，而且利于开发者阅读。

3.3 JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级、解释型的编程语言。它是因为开发Web页面的脚本语言而出名的，但是也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式的编程风格。简单来说，JavaScript是能被浏览器解释并执行的一种编程语言。

JavaScript可以在HTML文件里编写，但在企业开发中也是采用HTML和JavaScript代码分离。

首先打开index.html文件，在HTML代码中引入JS文件，并为button标签添加事件触发，详细代码如下：

从上述代码看到，script标签是在HTML代码中引入JS文件，使得JS文件的JavaScript代码能在HTML代码中生效。button标签添加了onclick属性，该属性是JS的事件触发，当用户单击“提交”按钮的时候，浏览器将会触发事件onclick所绑定的函数getInfo()。JavaScript除了事件触发onclick之外，还提供了其他的事件触发，如表所示。

看index.html的button标签，由于该标签的事件触发onclick绑定了函数getInfo()，因此下一步在index.js里定义函数getInfo()，函数代码如下：上述代码的document.getElementById是获取id="message"的标签（即input标签）的属性value的属性值，JavaScript的document对象简称为DOM对象，它可以定位某个HTML标签并进行操作，从而实现网页的动态效果。document对象定义了7个对象方法，每个对象方法的详细说明如表所示。

在实际开发中，我们经常使用getElementById、getElementsByName和getElementsByTagName方法来定位HTML标签，然后再对已定位的HTML标签进行操作。

四、小结

网站是指在因特网上根据一定的规则，使用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：项目的配置文件，项目的所有功能都需要从该文件里进行配置。

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)。

--------------------------------------

没有自由的秩序和没有秩序的自由，同样具有破坏性。