0基础python网站开发-服务器与HTML
一、服务器的基础知识
服务器是一个管理资源的计算机,它可以让用户通过网络进行访问。
二、flask
flask是Python的一个库,使用它可以搭建一个服务器。
要使用flask,我们需要先对资源做如下布局:
展开后:
三、导库创建服务器应用
代码展示:
from flask import Flask
app = Flask(__name__)
Flask 类中的功能函数:
功能函数 | 作用 |
---|---|
route() | 识别请求网址路径 |
closing() | 关闭链接功能 |
run() | C启动服务器应用对象 |
四、启动服务器应用对象
调用服务器应用对象的run功能函数,进行启动:
代码展示:
from flask import Flask
app = Flask(__name__)
app.run()
注意:run()方法在不传入任何参数的情况下,启动的网址为 127.0.0.1:5000
五、路由和函数
使用服务器应用对象的route功能函数能够识别请求网址,并通过@符号来关联并触发一个自定义的函数。
@app.route("网址路径")
def index():
return "你好,服务器!"
1、@是关联并触发index函数
2、"/" 代表当前位置
请求网址 | 对应的路由设置 |
---|---|
http://127.0.0.1:5000/ | @app.route("/") |
完整代码:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return "你好,服务器!"
app.run()
运行效果:
服务器程序只有不停的在运行,才能随时随地让其他人通过网络进行访问。
可以自己在一些平台申请域名搭建网站(选中以查看)
路由与函数的基本原则:一 一 对应紧相连
六、不同的网页请求
浏览器中的请求网址 | 对应的路由 | 执行函数 | 浏览器呈现的内容 |
---|---|---|---|
http://127.0.0.1:5000 | @app.route("/") | index | 在网页中再次…….! |
http://127.0.0.1:5000/login | @app.route("/login") | login | 欢迎来到登录页面 |
示例代码:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return "在网页中再次见到Python的强大之处!"
@app.route("/login")
def login():
return "欢迎来到登录界面!"
app.run()
执行效果:
return返回当前内容,内容可以是字符串、数字、html。
七、渲染HTML
from flask import render_template
render_template("html文件名")
注意:Html文件名必须放在templates文件夹下
例如:渲染个人网页:render_template("index.html")
八、render_template
通过设置render_template函数的第二个参数,就能将数据传递到HTML中。
语法:render_template("html文件名",变量名 = 数据)
注意:
1、变量名必须存在,用于HTML接收(在符合变量命名的规则下可以任意命名)
2、数据可以是任何数据类型(字符串、数字、变量、字典、列表…)
例如:render_template("index.html",news = "武汉樱花节")
九、模板语法
模板语法能够接收从服务器传入的变量数据,并且呈现变量对应的动态内容。
模板语法主要有两类:变量和控制语句
9.1 模板语法—变量
<html标签>{{变量名}}</html标签>
说明:
1、变量名是用来接收传入的数据;
2、变量名必须与传入的变量名保持一致
举例子: Python中的函数返回值为:
render_template("index.html",news = "武汉樱花节")
inex.html中接收数据的代码为:
<p></p> 或者 <h1></h1>
易错点:
1、变量名必须放在两对大括号中;
2、变量名必须存在,且和传入的变量名相同;
9.2 模板语法-for循环
常用的控制语句:for循环和条件判断 语法格式
{% for 变量名 in 列表名 %}
<标签>{{变量名}}</标签>
{% endfor %}
说明:
1、完整的for循环语句包含三部分:头(for循环语句开始)体(循环体)、尾(for循环语句结束)
2、循环头和循环尾都必须嵌套在{% %}内部
十、创建带有链接的图片
语法:
<a href="链接网址">
<img src="图标的地址">
</a>
添加“默契大考验”入口,在index.html中的body标签内:
<a href="/privatepic">
<img src='../static/images/默契.gif'>
</a>
十一、form标签
在HTML中,通常将form标签和一些其他的标签进行组合连用来实现答题页面。
<form action="/privatepic">
<p>我的名字叫什么?</p>
<input name="who"/>
<button> 提交 </button>
</form>
说明:
1、action属性用于指定form表单提交的目的地(路由中的网址)
2、<input>标签实现输入框效果,其name属性是给输入框命名,便于服务器对用户输入的数据接收
3、<button>标签实现提交按钮效果(在IE浏览器中不支持提交功能)
注意:标签的左尖括号(<)与单词之间不能存在空格
注意事项:如果标签的左尖括号(<)与单词之间存在空格,那么该标签中的内容就不能正常显示,而且这个标签上添加的css样式也是不能呈现出来的。
十二、接收数据
在Python程序中,使用get功能函数来接收用户在HTML页面的输入框内输入的内容。
语法:
from flask import request
变量名 = request.values.get("HTML中input标签的name属性值")
注意:get()功能函数的name属性值与字符串之间不存在任何空格
举例: 在privatepic.html中存在input标签如下:
<input name="who">
Python中接收用户在input标签上输入的内容为:
request.values.get("who")
十三、文件上传
<form action="路由网址"
method="post" enctype="multipart/form-data" >
<input name='title'/>
<input type="file" name="file"/>
<button> 提交 </button>
</form>
注意:
1、input标签的type属性值默认是"text"(文本类型),如果用于上传文件,必须设置type = "file" (文件类型)
2、若表单中包含文件类型的输入框,必须在form标签中指定method="post" 属性,默认是"get"
3、由于该表单含有多种input类型数据(文本、文件),所以必须在form标签中指定enctype="multipart/form-data" 属性
4、enctype是encodetype(编码类型)的缩写。
5、multipart/form-data是指表单数据有多部分构成,既有文本,又有文件等数据。
十四、post方法
实现上传文件功能,必须使用form表单的post方法向服务器发送请求,那么服务器中的Python程序也必须使用post方法来接收。
form表单的应用
1、向服务器发送携带数据的请求(使用post方法发送)
在html中:
<form method="post" action="/processwork">....</form>
2、服务器接收数据并处理(必须使用post方法接收)
在Python中:
@app.route("/processwork",methods=["POST"])
注意:
1、methods的属性值是一个列表,列表元素是大写的"POST"字符串
2、此设置只接收post方法请求,不再接收get方法请求
“作品上传”中form表单对应的HTML代码更新为:(post方法)
<form method="post" action="/processwork">
....
</form>
新增"/processwork"路由对应的Python代码:(post方法)
@app.route("/processwork",methods = ["POST"])
def process_work():
return ……
十五、接收并保存文件
在Python程序中,需要使用request模块中子模块files的get功能函数来接收文件数据。
语法: 变量名 = request.files.get("input标签的name属性值")
1、使用request模块中子模块files的get功能函数来接收文件数据
变量名 = request.files.get("input标签的name属性值")
2、接收到的文件数据在服务器上没有存储地址,而保存图片需要一个地址,因此需要将获取到的文件数据进行保存操作
文件存放在static文件夹下的images文件夹中。
# 接收文件数据对象,并赋值给变量file
file = request.files.get('file')
# 通过file对象的filename属性获取文件名
fname = file.filename
# 通过学而思封装的函数获取存储文件的绝对路径
fpath = save_path(fname)
# 通过file对象的save功能函数存储文件
file.save(fpath)
十六、pickle模块
pickle是Python中的模块,它能够将Python数据(列表、字典、字符串等)进行永久性保存,保存形式通常是pickle文件。
说明:pickle文件,就是以.pickle为后缀名的文件(例如:works.pickle 、news.pickle)
当使用pickle保存Python数据到pickle文件时,数据是原样保存,原样读取(就像照镜子)
16.1 pickle保存Python数据
pickle模块中的dump函数能够将Python数据保存到pickle文件中。
语法:
import pickle
with open("文档名.pickle","wb") as 变量名:
pickle.dump(存入的数据,变量名)
说明:
dump函数有两个参数,第一个是存入的数据(任意类型),第二个是打开的文件
注意:
1、打开的文档格式是.pickle格式(若不存在,程序自动创建)
2、打开文档的模式必须是"wb",其中"w"是write的缩写,"b"是bytes(字节)的缩写;因为通过pickle对数据进行存储时,必须用二进制(b)模式写入文件.
打开pickle文档,保存作品数据(works变量)
import pickle
with open("works.pickle","wb") as f:
pickle.dump(works,f)
16.2 读取Python数据
语法:
with open("文档名.pickle","rb") as f:
变量 = pickle.load(f)
说明:
load函数有一个参数,表示打开的pickle文件
注意:
1、读取文件时需要确保文件已存在,否则会报错。
2、读取文件时需要用"r"(read)模式打开文档,又因为存入时使用的是"wb",因此读取时需要使用"rb"。
打开pickle文档,读取作品数据的代码如下:
with open("works.pickle","rb") as f:
works = pickle.load(f)
十七、重定向
重定向(redirect)就是将网络请求重新定位到其它位置。
语法:
from flask import redirect
@app.route(….)
def 函数名():
….
return redirect('路由网址')
例如:
1、redirect('/') 跳转到默认网址中对应的网页
2、redirect('/privatepic') 跳转到默契大考验对应的网页
十八、携带数据的请求方式
通常情况下,使用get方法向服务器发送携带数据的请求有两种方式:
1、使用form表单的get方法(适用用户输入场景):
拼接的网址为:
http://127.0.0.1:5000 + form标签的action属性值(路由网址) + 问号(?) + input标签的name值(变量名)= 输入的数据(值)
2、使用a标签(手动将携带的数据添加到链接中)
<a href = "路由网址 ? 变量名=值"></a>
说明:以上两种方式的网址组成部分都是相同的
十九、接收a标签中携带的数据
携带数据的a标签
向服务器发送携带数据的请求(在HTML中)
<a href = "路由网址?变量名=值"></a>
接收携带的数据(在Python中)
变量名 = request.values.get("变量名")
说明:此应用与form表单的应用类似
获取删除的作品
向服务器发送携带数据的请求(在HTML中)
<a href = "/delete?worktitle={{work['title']}}"></a>
接收携带的数据(在Python中)
work_title = request.values.get("worktitle")
二十、文本域输入框
<form action="路由网址" >
<input name="title"/>
<textarea name="变量名"></textarea>
<button> 提交 </button>
</form>
说明:
1、此标签需要成对出现,type属性值默认且只能是"textarea"(也是文本类型)
2、此标签能够允许多行数据输入,功能与input标签类似
当在<textarea></textarea>标签中添加内容:
<textarea name="text">我是输入框中默认存在的数据</textarea>
运行效果:
在messageboard.html中body标签内:
<form action="/messageboard">
<p>昵称:</p>
<input name="who"/>
<p>留言:</p>
<textarea name="text"></textarea>
<button>提交</button>
</form>