1.快速开发网站
render_template是Flask框架的一个函数,用于渲染模板并生成动态的HTML文件
app = Flask(name, template_floder(''路径''))
构造一个Flask类赋给app,
template_floder修改寻找模板的默认路径,默认是当前目录下的templates文件(没有 则需要创建一个目录文件)
from flask import Flask,render_template
app = Flask(__name__) #实例化一个Flask类并赋予app
#创建网址/show/info和函数index的对应关系
#当用户访问/show/info,网站自动执行index
@app.route("/show/info")
def index():
return render_template("index.html")
if __name__ == '__main__':
app.run()
对应的HTML文件
<!DOCTYPE html>
<html>
<head>
<title>MyPage</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello, World!</h1>
<p><span style="color: aqua;">Aha!</span>This is a sample web page.This is the changes</p>
</body>
</html>
2.浏览器能识别的标签
2.1只能在<head>里
<meta charset='UTF-8'>编码
<title>头显示
<div>
<h1>Hello, World!</h1>#占据一整行
</div>
2.2在<body>内
<h1>~<h6>级标题
<div>块级标签,一个占一行
<span>行内标签
<div>
<p>
<span style="color: aqua;">Aha!</span>
<span>This is a sample web page.This is the changes</span>
</p>
</div>
练习题 运用<div>和<span>
<!DOCTYPE html>
<html>
<head>
<title>MyPage</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<h3>Time:8:53</h3>
</div>
<div>
<p>
<span style="color:#39c5bb;">Aha!</span>
<span>I made a web with Flask</span>
</p>
<p>
There will be inserted some words...
</p>
</div>
<div>
<h3>Time:8:53</h3>
</div>
<div>
<p>
<span style="color:#39c5bb;">Aha!</span>
<span>I put some words in here</span>
</p>
<p>
There will be inserted some words...
</p>
</div>
</body>
</html>
2.4超链接
<a href="">用于跳转页面
<a href="https://cn.bing.com">Click here to jump</a>
用于自己网站的跳转
<a href="http://127.0.0.1:5000/get/news">Click here to jump</a>
更简洁的写法
<a href="/get/news">Click here to jump</a>
target="_blank"点击链接不在本页面跳转,生成新的标签页
<a href="/list/goods" target="_blank">Click here to show you some goods</a>
2.5图片
<img src="">用于添加标签,是自闭和标签,因此没有</img>
<img src="https://ts1.cn.mm.bing.net/th?id=OIP.yMArSeOqnCJvLqSZpAzq7wAAAA&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=MultiSMRSV2Source">
用于自己网站的图片(本地图片)
-需要在本目录下创建一个static目录文件用于存放
-在自己网页中引用地址<img src="/static/图片.jpg">
可以使用width和height来调整图片大小
<img src="/static/helloworld.jpg" width="400" height="200">
小结
划分
块级标签
<div></div>
<h1></h1>~<h6><h6>
行内标签
<span></span>
<a></a>
<img />
嵌套
<a href="Link" target="_blank"><img src="ImgLink"></a>#target=_blank用于生成新的标签页,不在当前页面跳转
2.6列表标签
无序号(块级标签)
<ul>
<li></li>
<li></li>
</ul>
有序号(块级标签)
<ul>
<li></li>
<li></li>
</ul>
2.7表格标签
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>S1001</td>
<td>Zhang San</td>
<td>19</td>
</tr>
<tr>
<td>S1002</td>
<td>Li Si</td>
<td>20</td>
</tr>
<tr>
<td>S1003</td>
<td>Wang Wu</td>
<td>21</td>
</tr>
</tbody>
</table>
2.8input系列
<input type="">输入,自闭和标签,行内标签
type=text 文本输入框
type=password 密码框
type=file 选择文件框
type=radio 单选框 name标签一样就只能选一个
type=checkbox 复选框
type=button value=按钮内容--普通按钮
type=submit 也是按钮--提交表单
<div>
<h3>输入内容</h3>
<p>账号 <input type="text"></p>
<p>密码 <input type="password"></p>
<p>上传文件 <input type="file"></p>
<p>您的性别 <input type="radio" name="gender">男 <input type="radio" name="gender">女</p>
</div>
2.9下拉框
<select>下拉框(单个)
<select mutiple>下拉框(多个)
2.10多行文本
<textarea rows=3>支持三行内容的多行文本输入框
案例:用户注册
网络请求的两种方式
GET请求和POST请求
GET请求【URL方法,表单方法】:输入地址、跳转链接、向后台传入数据数据会拼接在URL上
POST请求【表单方法】:向后台提交表单,数据不体现在URL中,体现在请求体中
@app.route('/register', methods=['GET'])
用form标签包裹内容,只有form包裹的内容可以被提交
<form method="get" action="/registersuccess">
Account: <input type="text" name="account">
Password: <input type="password" name="password">
<input type="submit" value="Submit">
</form>
name提交的属性名,method提交的方式,action提交的地址。以GET的方式接收返回的结果,request.args是包含元组的列表
form flask import request
@app.route('/registersuccess', methods=['GET'])
def register_success():
#接收结果
print(request.args)
#返回结果
return render_template('register_success.html')
以POST的方式接收返回的结果,request.args是包含元组的列表,只有用户交互的标签才可以返回到后台
@app.route('/post_registersuccess', methods=['POST'])
def register_success():
#接收结果
print(request.form)
#返回结果
return render_template('post_register_success.html')
实例:用户注册表单
<form method="post" action="/post_registersuccess">
<div>
Account: <input type="text" name="account">
Password: <input type="password" name="password">
<br>
Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</div>
<div>
Favorite thing:
<input type="checkbox" name="hobby" value="basketball">Basketball
<input type="checkbox" name="hobby" value="football">Football
<input type="checkbox" name="hobby" value="tennis">Tennis
<input type="checkbox" name="hobby" value="Reading">Reading
</div>
<div>
From city:
<select name="city">
<option value="Shanghai">Shanghai</option>
<option value="Nanjin">Nanjin</option>
<option value="Shaanxi">Shaanxi</option>
</select>
</div>
<div>
Skills:
<select multiple name="skill">
<option value="p">Programing</option>
<option value="a">Arting</option>
<option value="m">Managing</option>
</select>
</div>
<div>
Tips:<textarea name="tips" rows="2"></textarea>
</div>
<input type="submit" value="Submit">
</form>
获得用户返回的值,单个用get,多个用getlist
request.form.get("name")
根据用户的请求方式返回页面(将submit也发送到/register)
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == "GET": #将POST请求和GET请求都发送到这个地址,然后根据请求方式的不同展示不同页面
return render_template('register.html')
else:
account = request.form.get("account")
password = request.form.get("password")
gender = request.form.get("gender")
hobby = request.form.getlist("hobby")
city = request.form.get("city")
skill = request.form.getlist("skill")
return 'success'
相同的请求,例如登录和返回成功,注册和返回成功可以放在一个页面,不同的功能不要放在同一个页面
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == "GET":
return render_template('login.html')
else:
return 'login success'