一、web开发思维
首先来看web开发就是我们搭建一个网站,提供信息的交互。我们需要写好完整的服务端的逻辑,
所以我们来认识一下web开发的核心。
从某种角度来看,web开发就是将我们想要展示的数据通过HTML页面进行展示,方便用户请求。所以我们可以将web开发看成是一个搭建数据可视化展示的需求,所以,我们在开发的时候要考虑以下几个点:
如何接受用户的请求
如何对用户的请求进行识别
如何对用户的请求进行响应
如何存储用户的数据
在我们学习的过程当中,大家一定要带着这些问题去学习,并且时刻知道,你当前写的代码似乎为了解决那个部分的问题而编写的。
二、Python Django框架介绍
Django是由Python编写的web开发的框架
首先Django的目的是搭建一个web网站,所以,可以通俗的说,Django是干网站开发的。
其次Django对web开发需要的共性代码进行了整合,形成了可以重复调用的结构,所以他叫做框架.
所以,学习Django要注意:
1、必须有Python的基础
2、要熟悉Django自带的功能,然后拓展
3、从今天开始,要编写的代码不再是一段,或者一个脚本,而是一个目录,所以希望大家可以熟练的掌握Django项目结构的设计思路。
三、安装Django
在安装Django之前,我们首先需要安装Python开发的虚拟环境virtualenv。
首先,在这里简单的对virtualenv进行一下简单的介绍,经常玩游戏的可能接触过一个名词叫做沙箱(Sandboxie),这里指的就是一个独立(相对)的开发环境,给我们作为开发的环境,让我们进行操作。这样,我们在同一台电脑上可以开始进行多个版本的Django开发,而且不用担心会有版本混淆的问题,而且可以很清楚看到我们安装的包,使用的包。
在这里假设大家已经安装好了Python和pip(pip是安装python时自带的,需要添加到环境变量中)
这里要多说一句如果之前按照我的教程安装的anaconda,需要在环境变量删除所有关于anaconda的配置,因为anaconda会和虚拟环境冲突。
当然你可以直接在你的真实环境下进行django的学习,但是这样并不利于培养一个好的开发习惯,因为你永远不会知道你未来所在公司用的是什么版本的python和什么版本的django。
我的Python版本是:Python 3.6.x
1、那么我们开始安装virtualenv环境了。
命令:pip install virtualenv
安装成功显示successfully
2、然后我们开始创建开发的虚拟环境
首先切换到我们的项目目录(自己创建的,用来存放你的项目)
然后执行创建python虚拟环境,命令如下
命令:python -m venv env
env是虚拟环境的名字,可以自己取。
然后我们查看我们的项目目录
这样一个Python的虚拟环境已经创建好了,紧接着就是使用了。
其实这就是一个小的虚拟机,我们先安装虚拟机virtualenv,然后安装一个python环境,就好比我们之前在虚拟机安装linux,我们可以在虚拟机中安装无数个linux提供给我们使用。同理我们可以在virtualenv中安装无数个python环境,来应付无数个不同版本的django项目,来接下来就是打开我们创建的虚拟环境然后创建django项目。
3、激活虚拟环境
命令:在cmd当中运行,虚拟环境文件夹下script目录下activate.bat文件来启动虚拟环境
Cmd切换盘符直接输入盘符冒号就行(e:),通过cd来进入下级路径,通过tab进行补全。
4、在虚拟环境当中安装Django框架
命令:pip install django
安装完成查看效果
如果不通过虚拟环境,在本机环境下,就直接cmd中安装django框架即可
四、开始一个Django项目
上面我们完成了Django的基本安装,然后来开始一个Django的项目,和所有的编程项目一样,我们用 hello world来开始我们的项目。
确认项目目录(自己创建的,项目根文件最好和你的虚拟环境根文件在一个目录下)
我后来把虚拟环境改名字了:虚拟环境文件夹和我三个项目文件夹在同一位置。
切入该目录的命令行(文件夹下按住shift按鼠标左键,点击在此处打开命令窗口),
首先进入虚拟环境,因为我们所有python还是django的环境都安装在了虚拟环境中,
执行创建命令
命令:django-admin startproject Qshop
Qshop是自己起的项目名,django-admin是环境提供的命令,startproject是django-admin中的创建django的方法,如果无法使用可以直接切到:虚拟环境文件/scripts/django-admin.exe startproject xxxx
如图:因为我存在qshop项目所以我建的是eshop
然后我们查看项目的目录,在这里我们使用pycharm打开项目,在pycharm右上角file中的open来打开项目。
这里就是我们的Python Django项目的目录了:
如果显示环境变量不正确,无法运行,如下设置:
但是要注意pycharm加载的Python环境变量,因为我们现在用的是虚拟环境,需要加载虚拟环境的环境变量。
接下来的东西,理解其中逻辑,后面会更多的解释,这只是让大家照猫画虎的引入。
1、创建视图文件
上面的目录是项目的创建自带的目录,为了实现今天的项目效果,需要在QShop/Qshop下自己创建一个叫做views.py的文件,这个文件我们称之为视图
2、编写web逻辑
在视图(\QShop\QShop\views.py)中
导入django.http模块中的HttpResponse,写index函数,写的是python哦,回归老本行。
在\QShop\QShop\urls.py下,此文件我们称之为路由,路由用来关联网页和视图,导入视图view中的函数,添加path,path中第一个index/为地址名,可以变,是我们访问网页时填写的地址,第二个index为调用的函数名,保持和views.py下函数名一致。
3、执行运行命令
上面的逻辑完成之后,开始启动Django项目
在工作当中,启动Django项目会有两种方式
1、Django原生的启动(理解其中原理)
(1)切入项目的根目录下
(2)执行启动命令
Python大部分的web框架都自带有轻量级的web服务器,这些服务器由Python编写,开启特别方便,最多可以支撑200的并发,在工作当中,除非公司小组内部通常不用,但是在开发的过程当中可以降低我们web学习的成本。所以下面启动的就是Django自带的Python轻量级web服务器。
命令:python manage.py runserver
Django自带的服务器默认监听127.0.0.1(本地)的8000端口,也就是说,我们可以通过浏览器访问127.0.0.1:8000访问到现在启动的web服务器
当然也可以在后面自定义IP和端口,值得注意的是0.0.0.0代表的是当前计算机的所有ip。
命令:python manage.py runserver 0.0.0.0:8000
(2)Pycharm启动项目
相比较django命令,pycharm的项目启动简单了很多,点那个绿箭头,同样会开启8000端口,这里要强调一点,爱奇艺和酷我会监听8000端口,如果后台运行了,很可能会造成项目文件无法访问。
4、查看项目启动效果
运行项目后,在浏览器输入127.0.0.1:8000
Ok,我们完成了这样一个效果,我们来看看Django到底干了什么。
按照我们访问的顺序来看看运行的流程:
(1)首先我们在浏览器当中访问了127.0.0.1:8000/index这个index这个路由。
(2)该地址访问到我们启动的Django服务器上在url上进行了匹配
(3)匹配路由与index符合的条件,然后调用我们写的index函数
(4)收到返回结果
这样就引出MVC结构
五、Django 与 MVC
在聊mvc之前,我们先来了解一下大家都遇到过的一个问题,去公司找自己的朋友办事,你首先要知道你朋友的公司,然后遇到的是一个前台的妹子,前台的妹子告诉你,你的朋友在开发部,然后你才找到了你的朋友,然后开始处理事情,具体的事情会由你的朋友和你进行处理,处理过程当中你的朋友调用了他们公司的资源。
同样你在请求网站的时候也一样,当我们请求服务器的时候,服务器首先要有有个功能来解析你的请求,并把你的请求传递给具体处理请求的功能,在web开发过程当中,我们将其称之为路由(controler:urls),当路由指向一个功能,那么这个功能就是具体处理请求的功能了,在web开发工程当中,我们将其称之为视图(view),接着假如为了处理我们的请求,需要调用网站数据库的内容,那么与数据库相关的,我们就称之为模型。
到这里我们再来讲MVC,其实就是指模型(model)、视图(view)、路由(controler),MVC这种理念就是指我们再web开发工程当中,按照模型、视图、路由作为相对独立的模块进行开发的思路。
视图就是之前创建的view文件,路由是urls文件。
六、Django 模板系统介绍
在上面完成了一个hello world的访问,但是这样的网站没有实际意义,在开始学习今天的知识之前,我们先回忆一下,学习Python之初学习到的一个知识点,Python的字符串格式化:
效果如下:
这个例子很简单,但和web开发有共同的地方,都是需要将数据展示到具体的格式当中,最明显的实例就是类似腾讯qq空间的网站,我们可以切换好多种表达的方式(皮肤),但是内容是不变的。这样就涉及到了一个表达方式和表达内容的区别,Django当中是通过模板系统来完成这一工作的。
七、Django 模板系统的基本语法
Django的模板系统将整个数据展示的功能分为四个步骤
构建模板对象
构建数据结构
模板加载数据
前端传递数据
用django还原上面的实例
在视图文件(\QShop\QShop\views.py)中
最后的返回值是将数据返回给http页面,但是会经过urls文件之手
我们然后通过制定路由得到效果如下:
在路由文件(\QShop\QShop\urls.py)中
Path(’temp/’,templateExample)的意思就是,当我们访问/temp/时,会使用视图中templateExample函数传给页面的参数
运行django,浏览器中输入127.0.0.1:8000/temp/
在上面是最简单的一个例子,接下来深度的学习Django模板系统的语法:
1、模板的三个元素组成
Django的模板系统有以下三种常用元素组成:
(1)变量:有双大阔号包围的用于接受变量的元素 {{ example }}
在视图(\QShop\QShop\views.py)中
不修改路由(urls)直接浏览器中运行,结果如下:
变量除了可以是字符串之外,也可以是列表、元组、字典、或者类,并且变量通过.可以调用到自己不需要传参的任何参数。例如:
在视图(\QShop\QShop\views.py)中,路由(urls.py)不需要修改
效果如下
(2)标签:标签是有大括号百分号包围的,具有语法规则的元素,常用的标签有以下几种
【1】If标签
判断标签
使用if标签一定要先写开始标签{% if 条件 %},最后还要写上结束标签{% endif %}
实例:
在视图(\QShop\QShop\views.py)中,路由(urls.py)不用改变
运行:
如果把data改成data={“name”:”” , “age”:”18”}
页面就会显示:你是谁,你多大了
【3】For标签
循环标签
使用for标签一定要先写开始标签{% for xx in xx %},最后还要写上结束标签{% endfor %}
实例:
在视图(\QShop\QShop\views.py)中,路由不变,只要不改变视图中的函数名,就不用改路由。
路由不变,直接访问,效果如下
【3】过滤器 在变量当中以竖线作为标识对变量进行修改的元素
Django的过滤器有很多种,我们在后面的课程当中会讲到自定义过滤器,今天来研究一个特殊的过滤器。
Safe过滤器:Django默认情况下,会将后端传递上来的字符串当中的代码自动转义,比如下面这段代码
在视图(\QShop\QShop\views.py)中
在路由(\QShop\QShop\urls.py)中
得到的效果如下
但是如果使用了safe标签,效果就会有所不同了,
在视图(\QShop\QShop\views.py)中
当然,这个标签要慎用,应为可能导致前端注入
展示一个最简单前端注入效果:
在视图(\QShop\QShop\views.py)中
效果如下
在view中写的东西复杂凌乱,尤其是python和html相互混合,看着一点都不方便,所以真正的重点来了!!!
八、使用Django进行前端的模板渲染
上面的笔记当中,我们学习了Django模板的基础代码,但是把HTML直接写在视图(view)当中并不是一种很好的习惯,而且在view中写html也非常不方便,不能联想输入。所以接下来研究的是Django模板系统加载独立的HTML页面。
1、创建项目静态和模块文件夹
一个完整的网页有什么:首先是html,js和css,然后还有图片,视频,音频,在真正的项目中这些都是有单独的文件夹来存放的,这样一个项目才能显得条理分明。
首先在项目下创建两个目录template和static。
Template只用来存放所有html文件
static用来存放所有静态文件,对于整个项目来说,所有前端的东西都是静态的,例如css、js、jpg、MP4……,所以在static下还要建立多个单独小文件夹,用来存放不同种的文件。
2、修改配置文件
然后我们如何让template和static下的文件与我们程序目录挂钩呢?在项目中我们不再使用../或者任何绝对路径的方式导入图片、css或者js,我们通过设置文件(setting.py)来进行目录的绑定
这是第一次接触到settings配置,我们必须认识到一个settings当中的配置,就是BASE_DIR,这个是Python os模块获取当前项目的根目录,我们在settings当中的大部分的路径配置都会用到这条配置。
[1] 配置settings当中的HTML文件加载路径
在配置文件(\QShop\QShop\settings.py)中添加:os.path.join(BASE_DIR,"templates"),这个代表只要找html文件就会通过项目的根目录中的template文件来寻找。
[2] 配置settings当中的静态文件加载路径
在配置文件(\QShop\QShop\settings.py)的最后,有个STATIC_URL = '/static/',这个代表可以使用/static/来表示静态文件,接下来就是与我们建立的static文件进行绑定,在下面输入,
一定要注意括号中的是元组,元组如果只有一个元素一定要加逗号,要不就会被当作字符串而报错!
Join是拼接的意思,BASE_DIR代表项目根目录,拼接BASE_DIR和static就是告诉系统,当我输入/static/时就是代表根目录下的static文件夹。
3、加载HTML文件
[1]创建html文件:建在template文件夹下,我们通常将页面首页命名为index.html
[2]然后编写HTML:
在\QShop\templates\index.html中
[3]加载HTML文件
在视图(\QShop\QShop\views.py)中
我们使用新的模块from django.template.loader import get_template ,get_template可以实现直接将html文件的内容作为模板对象,然后加载模板对象,返回至显示页面
别忘记给urls添加path(’index/’,index)
这样访问路由效果如下
重点(常用)!!当然,在开发的过程当中,Django给出了更加成熟的方法
在视图(\QShop\QShop\views.py)中导入更方便的模块from django.shurtcuts import render_to_response,
可以完成和上面一样的效果。
但是此模块厉害之处在于可以对网页传递参数,最终参数返回,在返回语句中return render_to_response(‘index.html’,locals()),index.html代表返回网页,而locals()代表返回函数中所有的参数给网页。
这也实现了网页和视图和路由的挂钩,访问网页,通过路由找到函数,函数把参数传给网页。
接下来用一个综合的例子,将今天所学串通。
九、将之前学习的模板系统的语法进行一个基本的整合使用。
目标: 定义一个学员信息的列表页。
思路:
(1)进入虚拟环境,创建新的django项目
(2)成员需要有信息:姓名,年龄,学科,照片等等,目前还没学从数据库中读写,所以我们将数据写在视图页面(view.py),后面会学习如何从数据库读取数据。
(3)将数据传入网页中,所以要创建一个html,并进行基本的美化排版。
就这三步
1、创建项目
首先进入虚拟环境创建一个新的项目(我取名为HX了),在pycharm中打开项目配置好环境,建立view.py页面,然后在setting文件中添加html和静态资源路径,准备工作做好接下来就开始编制世界吧
2、成员信息、视图编写
首先需要数据,数据里有一项是照片,所以我从网上找了一些图片,图片属于静态资源,存在static下的img文件夹里。
然后,每个人的数据肯定是以字典的形式进行存储的,name:xx,age:xx。这样才能一一对应,所有人的数据是以列表形式存放。
最后,我们还需要将数据传入网页中,通过刚才学习的第三种方法from django.shurtcuts import render_to_response来给网页传数据。
以上都是在视图(view)页面完成的。
接着指定路由,通过路由把网址和视图做关联。
在路由\QShop\QShop\urls.py中
3、网页界面
我们想要达到的效果是把我们的学员信息以列表的方式展现在网页上,既然是网页我们就提高一下自己的要求,做的美观一些,我这里使用了jQuery和boostrap做了一点美化和特效,这就需要靠自己去做出想要的效果了,我这里就展示一下最基本的如何把视图中编写的学生数据写在页面上。
在网页中展示学生数据肯定是通过表格(from)来展示的,当然你也可以通过一个一个标签页展示,就像lol中的所有英雄界面,这都靠你自己的想象力了。
设置好表头,如何把学员信息从参数students中获取出来,当然是通过for循环标签,遍历students列表,获取每个学生的字典,,获取的i是个字典,然后i[‘name’]获取字典中的姓名,在标签中我们通常使用i.name代替i[‘name’],一定不让忘记网页中的for循环标签还有个结束标签。
运行项目,在网页中输入你定义的网址名,效果如下:
这样一个基本的django项目就展示出来了,但是并不完全:数据靠自己写很不科学,数据一般都来源于用户注册的时候,我们将注册的信息扔进数据库。这就涉及到我们没有讲的mvc中的m。