python web开发之Flask框架

准备工作

安装

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)

<!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>

@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%}

简单写了写，如有错误，欢迎指正；