准备工作
安装
pip/conda install flask
pip/conda install flask-wtf
pip/conda install flask-bootstrap
pip/conda install flask-sqlalchemy
pip/conda install flask-script
pip/conda install flask-login
Flask基本框架
初始化
from flask import Flask
app = Flask(__name__): Flask 类的构造函数只有一个必须指定的参数,即程序主模块或包的名字。在大多数程序 中,Python 的 __name__ 变量就是所需的值。
路由和视图函数:
客户端(例如 Web 浏览器)把请求发送给 Web 服务器,Web 服务器再把请求发送给 程序实例需要知道对每个 URL 请求运行哪些代码,所以保存了一个 URL 到 Python 函数的映射关系。处理 URL 和函数之间关系的程序称为路由。 在 Flask 程序中定义路由的最简便方式,是使用程序实例提供的 app.route 修饰器,把修饰的函数注册为路由。
路径变量的语法是/path/<converter:varname>
。在路径变量前还可以使用可选的转换器,有以下几种转换器。
转换器 | 作用 |
---|---|
string | 默认选项,接受除了斜杠之外的字符串 |
int | 接受整数 |
float | 接受浮点数 |
path | 和string类似,不过可以接受带斜杠的字符串 |
any | 匹配任何一种转换器 |
uuid | 接受UUID字符串 |
下面的例子说明了如何使用这个修饰器声明路由:
@app.route('/',methods=['GET','POST']) #域名 def index(): return 'Hello World!' @app.route('/user/<name>') def user(name): return '<h1>Hello, %s!</h1>' % name @app.route('/post/<int:post_id>') def show_post(post_id): # show the post with the given id, the id is an integer return 'Post %d' % post_id
下面是一个小型的案例:
# -*- coding:utf-8 -*-
from flask import Flask
from flask import request
app=Flask(__name__)
@app.route('/')
def index():
return '<h1>INDEX</h1>'
@app.route('/login',methods=['GET'])
def loginUI():
return '''
<form action="/login" method="POST">
<input type="text" name="username"><br>
<input type="password" name="password">
<input type="submit" value="提交"><br></form>'''
@app.route('/login',methods=['POST'])
def login():
if request.form['username']=='admin' and request.form['password']=='123':
return '<h3>LOGIN SUCCESS</h3>'
else:
return '<h3>LOGIN FAILED</h3>'
运用模板:
Flask默认使用jinja2作为模板;在jinja2中,html文件放在templates目录下,css,js文件放在static目录下,完成后的目录如下图:
在模板中,
-
{% %}:指令语句(if while)
-
{{ }}——访问变量或变量的属性
-
jinja2能识别所有类型的变量,甚至一些复杂的类型,例如:列表、字典、对象
-
可以使用过滤器
-
-
{# #}——注释
-
{% include 'footer.html' %} ——导入另外一个模板到当前模板中
-
{% import 'forms.html' as forms %} ——导入模板,与上面的有部分不同
-
{% extends "base.html"%}——继承模板
-
{{url_for("static",filename="....")}}——访问static文件夹中的文件(必须是static文件)
将上面的案列做出改变:
将前端和后端分离开;
加入css;
one.html继承了base.html,base.html只是提供了基本的结构,one.html修改自己需要的内容
web.py
# -*- coding:utf-8 -*-
from flask import Flask
from flask import request
from flask import render_template
app=Flask(__name__)
@app.route('/')
def index():
return render_template('one.html')
@app.route('/login',methods=['GET'])
def loginUI():
return render_template('login.html')
@app.route('/login',methods=['POST'])
def login():
if request.form['username']=='admin' and request.form['password']=='123':
return render_template('login.html',username=request.form['username'])
else:
return render_template('login.html',message='bad username')
if __name__ == '__main__':
app.run(host='127.0.0.1', port=777, debug=True)
login.html
<!DOCTYPE html>
<html lang='zh-cn' >
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="{{ url_for('static',filename='css//login.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div class="login">
<span class="name" >登录</span>
<hr color="white"/>
<form action="/login" method="POST">
<table align="center" >
<tr>
<td><input type="text" name="username" placeholder="输入用户名" /></td>
</tr>
<tr>
<td><input type="password" name="password" placeholder="输入密码"/></td>
</tr>
<tr>
<td >
<input type="submit" value="登录" class="button" />
</td>
</tr>
</table>
</form>
{% if message %}
<p>{{ message }}</p>
{% endif %}
</div>
</body>
</html>
login.css
@charset "UTF-8";
.login{
margin-top: 100px;
margin-left: 450px;
height: 408px;
width: 368px;
background-color: #00FFFF;
}
.name{
position: relative;
font-size: 28px;
margin-top: 100px;
margin-left: 20px;
margin-top: 40px;
width: 86%;
}
.login table{
width: 80%;
border-spacing: 20px;
}
.login table tr {
padding: 60px;
}
.login table tr td{
font-size: 30px;
width: 100%;
position: relative;
margin-bottom: 40px;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
}
.login table tr td input{
font-size: 15px;
height: 40px;
width: 100%;
}
.button{
margin-top: 20px;
width: 100%;
height: 45px;
background-color: #ee7700;
border: none;
color: white;
font-size: 18px;
}
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock%}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
one.html
{% extends 'base.html' %}
{% block content %}
<h2>this is one.html extend base.html</h2>
{% endblock%}
简单写了写,如有错误,欢迎指正;