python开发本地WEB项目

0. 基础

• python版本

python-3.6.4

• 编辑器

pycharm-2018.2.4

• 系统

Windows7-64bit-旗舰版

• 时间

2018/10/19

 

1. 虚拟环境

• 概念

虚拟环境是系统的一个位置，在开发web项目时，需要安装的所有python库都必须安装在该环境中。

• 创建( 通过CMD终端窗口实现 )

1) 打开CMD终端并切换到项目所在目录；

2) 运行【python -m venv ll_env】，即通过模块venv创建一个名为ll_env的虚拟环境，此时项目所在目录中会自动生成“ll_env”目录；

• 激活

1) 打开CMD终端并切换到项目所在目录；

2) 运行【ll_env\Scripts\activate】；

 

2. Django

• 概念

Django是一套用于帮助开发交互式网站的工具，仅在虚拟环境处于激活状态时才可用。

• 安装

1) 创建并激活虚拟环境；

2) 运行【pip install Django】；

• 在Django中创建项目

1) 创建并激活虚拟环境；

2) 运行【django-admin.py startproject 项目名称 .】，此时项目所在目录中会自动生成“项目名称”目录和“manage.py”文件，其中“项目名称”目录包含__init__.py、settings.py、urls.py和wsgi.py四个文件，具体的文件说明如下：

    2.1) manage.py：接受命令并将其交给Django的相关部分去运行。

    2.2) settings.py：指定Django如何与你的系统交互以及如何管理项目。

    2.3) urls.py：告诉Django应创建哪些网页来响应浏览器请求。

    2.4) wsgi.py：帮助Django提供它创建的文件。

• 创建供Django使用的数据库

1) 创建并激活虚拟环境；

2) 运行【python manage.py migrate】，首次在虚拟环境中执行此命令，将会在项目所在目录中会自动生成“db.sqlite3”文件，表明此时为项目创建了一个SQLite数据库；

• 启动Django服务器

1) 创建并激活虚拟环境；

2) 运行【python manage.py runserver】，当在浏览器中输入项目URL请求网页时，该Django服务器将进行响应，并生成合适的网页，将其发送给浏览器。当启动Django服务器之后，该CMD窗口不要再进行别的任何操作，就将其作为一个本地服务器使用即可。

• 在Django中创建应用程序

1) 打开新的CMD终端并切换到“manage.py”文件所在目录；

2) 激活虚拟环境；

3) 运行【python manage.py startapp 应用程序名称】，此时项目所在目录中会自动生成“应用程序名称”目录，其中包含__init__.py、apps.py、tests.py、models.py、admin.py和views.py六个文件，各文件说明如下：

    3.1) models.py：处理应用程序中使用的数据，包含若干个模型（即，类），模型告诉Django如何处理应用程序中存储的数据；

    3.2) admin.py：注册所建立的模型，让Django通过其管理网站来管理我们的模型；

    3.3) views.py：管理视图函数，视图函数接受请求中的信息，准备好生成网页所需的数据，再将这些数据发送给浏览器，这通常是定义了网页是什么样的模板实现的；

4) 在Django中将应用程序包含到项目中：在“settings.py”文件中将“应用程序名称”添加到“INSTALLED_APPS”元组中；

• 利用Django修改/迁移数据库（只要修改了“models.py”文件就需进行此操作）

1) 打开新的CMD终端并切换到“manage.py”文件所在目录；

2) 激活虚拟环境；

3) 运行【python manage.py makemigrations 应用程序名称】，此时在“应用程序名称”目录中的“migrations”目录中自动生成一个迁移文件；

4) 运行【python manage.py migrate】，应用刚才的迁移文件来修改数据库；

• Django提供的管理网站（admin site）

1) 打开新的CMD终端并切换到“manage.py”文件所在目录；

2) 激活虚拟环境；

3) 运行【python manage.py createsuperuser】创建超级用户，此时Django提示你输入超级用户的用户名、邮件地址和密码；

• 外键

外键是一个数据库术语，需要在两项数据之间建立联系时，Django使用与每项信息相关联的外键。

 

3. 利用Django创建网页

• 步骤概述

1) 定义URL模式：URL模式描述了URL是如何设计的，让Django知道如何将浏览器请求与网站URL匹配，以确定返回哪个网页。

2) 编写视图函数：每个URL都被映射到特定的视图，视图函数获取并处理网页所需的数据。视图函数通常调用一个模板，后者生成浏览器能够理解的网页。

3) 编写html模板：负责生成浏览器能够理解的网页，模板定义了网页的结构，模板指定了网页是什么样的，而每当网页被请求时，Django将填入相关的数据。模板让你能够访问视图提供的任何数据。

• html模板规则

1) 标签【<p>...</p>】标识段落，其中标签<p>指出了段落的开头位置，而标签</p>指出了段落的结束位置；

2) 链接标签【<a href="{% url 'URL模式' 该URL模式对应的视图函数的实参 %}">文本</a>】生成一个URL，该URL与“URL模式”匹配，即为“文本”生成一个到“URL模式”的链接；

3) 块标签【{% block 块名 %}...{% endblock 块名 %}】；

4) 继承标签【{% extends "父模板路径" %}】；

5) 项目列表标签【<ul>...</ul>】，表示一个项目列表；

6) 项目列表项标签【<li>...</li>】，表示一个项目列表项，在标签对<ul></ul>内部，位于标签<li>和</li>之间的内容都是一个项目列表项；

7) for循环的模板标签：

        {% for item in list %} 
                     do something with each item 
                   {% endfor %}

8) if条件的模板标签：

        {% if 条件 %} 
                      do something if conditional is satisfied
                   {% endif %}

9) 标签【{% empty %}】，告诉Django在项目列表为空时该怎么办；

10) HTML表单标签【<表单变量名 action="{% url 'URL模式' 该URL模式对应的视图函数的实参 %}" method='post'>...</表单变量名>】，其中实参action告诉服务器将提交的表单数据发送到“URL模式”，实参method让浏览器以POST请求的方式提交数据；

11) 标签【{% csrf_token %}】防止攻击者利用表单来获得对服务器未经授权的访问；

12) 按钮标签【<button name="按钮类型">按钮名字</button>】为表单创建一个按钮；

13) 隐藏的表单标签【<input type="hidden" name="next" value="{% url 'URL模式' 该URL模式对应的视图函数的实参 %}" />】，告诉Django接下来跳转到哪个网页；

14) 表单的errors属性：【表单变量名.errors】；

15) 在模板中打印变量：【{{ 变量}}】；

16) 模板变量：【表单变量名.as_p】，修饰符as_p让Django以段落格式渲染所有表单元素，这是一种整洁地显示表单的简单方式；

17) 模板变量：【user】，每个模板都可使用变量user，这个变量有一个is_authenticated属性，如果用户已登录，该属性将为True，否则为False；

• 利用Django创建基于表单的网页

1) 概述：凡是让用户输入并提交信息的页面都是表单，那怕它看起来不像表单。

2) 创建方式：ModelForm；

3) 包含的表单元素：

    3.1) model：告诉Django根据哪个模型创建表单；

    3.2) fields：告诉Django表单中包含的字段；

    3.3) labels：告诉Django表单中所包含字段的标签；

    3.4) widgets：告诉Django表单中所包含字段的部件(如：单行文本框、多行文本区域或下拉列表等)；

• Django提供的装饰器@login_required

该装饰器保证对于某些页面，只允许已登录的用户访问它们。

 

4. 利用Bootstrap库设置网页样式

• Bootstrap库概述

这是一组工具，用于为Web应用程序设置样式，Bootstrap基本上就是一个大型的样式设置工具集，它还提供了大量的模板，可将它们应用于项目以创建独特的总体风格，通过django-bootstrap3库将Bootstrap继承到项目中。

• 安装django-bootstrap3

1) 打开新的CMD终端并切换到“manage.py”文件所在目录；

2) 激活虚拟环境；

3) 运行【pip install django-bootstrap3】；

4) 在“settings.py”文件中将“bootstrap3”添加到“INSTALLED_APPS”元组中，注意，要放在该元组中包含的新建“应用程序名称”前面；

• html模板规则：( HTML文件分为两个主要部分：头部head和主体body )

1) 标签【{% load bootstrap3 %}】加载了django-bootstrap3中的模板标签集；

2) 标签【<!DOCTYPE html>...</html>】声明为编写html文档；

3) 标签【<html lang="en">】声明为使用英语编写；

4) 头部标签【<head>...</head>】；

5) 标题栏标签【<title>文本</title>】；

6) 标签【{% bootstrap_css %}】让Django包含所有的Bootstrap样式文件；

7) 标签【{% bootstrap_javascript %}】启用可能在页面中使用的所有交互式行为，如可折叠的导航栏等；

8) 主体标签【<body>...</body>】，HTML文件的主体包含用户将在页面上看到的内容；

9) 标签【<!-- Static navbar -->】，Bootstrap提供的模板Static top navbar提供了简单的顶部导航条、页面标题和用于放置页面内容的容器；

10) 标签【<nav class="navbar navbar-default navbar-static-top">...</nav>】，<nav>元素表示页面的导航链接部分，对于这个元素内的所有内容，都将根据选择器（selector）navbar、navbar-default和navbar-static-top定义的Bootstrap样式规则来设置样式，选择器决定了特定样式规则将应用于页面上的哪些元素；

11) 标签【<div class="container">...</div>】，<div>起始标签，其class属性为container，div是网页的一部分，可用于任何目的，并可通过边框、元素周围的空间（外边距）、内容和边框之间的间距（内边距）、背景色和其他样式规则来设置其样式；

12) 标签【<div class="navbar-header">...</div>】，<div>起始标签，其class属性值navbar-header将一系列样式应用于这个块；

13) 标签【<button type="按钮类型" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#navbar"  aria-expanded="false" aria-controls="navbar">  </button>】，该按钮将在浏览器窗口太窄、无法水平显示整个导航栏时显示出来，如果用户单击这个按钮，将出现一个下拉列表，其中包含所有的导航元素，在用户缩小浏览器窗口或在屏幕较小的移动设备上显示网站时，collapse会使导航栏折叠起来；

14) 标签【<a class="navbar-brand" href="{% url 'URL模式' 该URL模式对应的视图函数的实参 %}"> 文本</a>】，在导航栏的最左边显示“文本”，并为“文本”生成一个到“URL模式”的链接；

15) 标签【<div id="navbar" class="navbar-collapse collapse">...</div><!--/.nav-collapse -->】定义一组让用户能够在网站中导航的链接；

16) 标签【<ul class="nav navbar-nav">...</ul>】，定义导航栏；

17) 标签【<ul class="nav navbar-nav navbar-right">...</ul>】，定义导航栏；

18) 标签【<div class="container">...</div> <!-- /container -->】，<div>起始标签，其class属性值container将一系列样式应用于这个块；

19) 标签【<div class="page-header">...</div>】,<div>起始标签，其class属性值page-header将一系列样式应用于这个块；

20) 标签【<div class='jumbotron'>...</div>】,<div>起始标签，其class属性值jumbotron将一系列样式应用于这个块，jumbotron是一个Bootstrap元素，是一个大框，相比于页面的其他部分显得鹤立鸡群，你想在其中包含什么东西都可以；

21) 标签【<h数字序号>...</h数字序号>】，标识block中的标题号，即类似于word中的第几级标题的概念；

22) 表单标签【<表单变量名 method="post" action="{% url 'URL模式' 该URL模式对应的视图函数的实参 %}" class="form">...</表单变量名>】，添加了属性class="form"；

23) 标签【{% bootstrap_form 表单变量名 %}】，将Bootstrap样式规则应用于各个表单元素并显示表单；

24) 标签【{% buttons %}...{% endbuttons %}】，将Bootstrap样式应用于按钮；

25) 标签【<button name="按钮类型" class="btn btn-primary">按钮名字</button>】为表单创建一个按钮；

26) 标签【<div class="panel panel-default">...</div> <!-- panel -->】，<div>起始标签，其class属性值panel panel-default将一系列样式应用于这个块，这是一个面板式div元素；

27) 标签【<div class="panel-heading">...</div>】,<div>起始标签，其class属性值panel-heading将一系列样式应用于这个块，这是一个面板式标题；

28) 标签【<div class="panel-body">...</div>】，<div>起始标签，其class属性值panel-body将一系列样式应用于这个块，这是一个面板主体；

29) 标签【<small>...</small>】，缩小标签；