Flask：

flask是一个微框架，主要面向需求简单的小应用，是基于Werkzeug，Jinja 2 的Python微架构（微框架 的核心意图是将Web工程项目的核心部分进行高度集中并且尽量简单，从而在整个Web工程中形成一个独立的部分，同时其余部分可以根据我们的需求任意扩展）。

flask创建项目架构 flask实战项目教程_html


简单的代码实例;

from flask import Flask
#创建Flask的实例
app = Flask(__name__) 
@app.route("/")   #URL路由,将url与服务器绑定
def hello ( ): 
    return "Hello World!"
常用的配置方法;
1. 脚本直接写入`
app.config['SECRET_KEY'] = 'some strange words'   # 设置全局属性参数语法
2. 配置单独文件;（同3）

简单来说就是脚本太多了，放在主题代码里面不够美观简练，因此要单独建立文件，然后引入。

3. 不同配置类：

大型项目需要多个配置组合，比如开发时的配置，测试的配置，部署的配置……这样我们需要在配置文件里创建不同的配置类，然后在创建程序实例时引入相应的配置类。最佳实践是创建一个存储通用配置的基类，然后为不同的使用使用场景创建新的继承基类的配置类。
（最后引入这个文件然后调用相关的类就可以了）

class Debugconfig():
    DEBUG = True
    SECRET_KEY = 'BBBBBBBBB'
    PAGE_SIZE = 10

class Developconfig():
    DEBUG = True
    SECRET_KEY = 'BBBBBBBBB'
    PAGE_SIZE = 10

class Testconfig():
    DEBUG = True
    SECRET_KEY = 'BBBBBBBBB'
    PAGE_SIZE = 10

在Flask框架中使用route()装饰器将一个URLs地址与请求处理函数绑定。

@app.route('/login.do',methods=['POST','GET']）   # 设置请求地址携带参数，不写method默认只接受GET方法
在Falsk中对静态文件的处理;
  • 静态网页（模板）的创建需要在工程文件夹中创建 templates 子文件夹，今后所有的html网页都放在该文件夹中；
  • 样式表、图片等静态资源的创建需要在工程文件夹中创建 static 子文件夹，今后所有的静态文件都放在该文件夹中。

flask创建项目架构 flask实战项目教程_css_02


html静态页面应用外部CSS样式表的两种方式：

<!--绝对路径，不容易丢失样式。-->
<link rel="stylesheet" href=" {{ url_for('static', filename='css/style.css', _external=True) }} "/>
<!--相对路径，简单容易。-->
<link rel="stylesheet" href="static/css/style.css" />
  • _external=True 参数为可选参数，其作用是引用方式的不同：
    _external 参数为True，引用地址为：http://localhost:5000/static/css/style.css
    _exernal 参数为False，引用地址为：/css/style.css (不使用该参数，默认为False)

模板中的表达式：

在Flask框架模板（即工程中的HTML页面）中，可以使用 {{ variable }} 双括号输出动态变量值。
变量可以是网页内临时声明的变量，更多情况下是传递到页面的参数变量（字符串、数字、字典等等）

<!-- 输出name的值 -->
<h1>你好 {{ name }}</h1>

同意可以使用{% 结构化表达式 %} 表示各结构化语句（判断、循环等）

<!-- 判断 -->
{% if 表达式 %}
……
<!-- 否则 -->
{% else %}
……
<!-- 结束判断 -->
{% endif %}

1. 创建Flask项目:

flask创建项目架构 flask实战项目教程_flask创建项目架构_03

创建成功之后会如下图所示:

flask创建项目架构 flask实战项目教程_人工智能_04

2. 建立相应的文件（html文件，style.css等）:

flask创建项目架构 flask实战项目教程_css_05

datashow.py代码:
import config                      #引入config文件
from config_class  import *   #不同配置类     
from flask import Flask,render_template,request,Response,session


# Flask类的实例
app = Flask(__name__)

app.config['DEBUG'] = True
app.config['SECRET_KEY'] = 'BBBBBBBBB'


#使用config文件
app.config.from_object(config)
#使用config类
app.config.from_object(Debugconfig)

@app.route('/')   # URL路由 将url与服务器绑定
def index():
    return render_template('index.html')

@app.route('/login.do',methods=['POST','GET'])
def login():
    #表单提交的数据用request.form
    username = request.form.get('userName')
    userpwd = request.form.get('userPwd')

    if username == 'zhangsan' and userpwd =='123456':
        session['user'] = 'zhangsan'
        return render_template('index.html')

    elif username != None and (username == 'zhangsan' and userpwd !='123456'):
        return render_template('login.html',message='用户名或者密码错误')

    return render_template('login.html')


if __name__ == '__main__':
    app.run(host='10.0.14.216',port=8080, debug=True)
index.html文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		</script>
		<style type="text/css">
			a{
				margin-right: 12px;
			}
		</style>
	</head>
	<body style="min-width:1200px;padding: 0px;margin: 0;background-color: lavenderblush;">
		<div id="header" style="...">
        	<div style="width: 90%;border: solid 0px red;margin-left: 5%;padding: 6px" align="left">
           		<div style="border: solid 0px red;padding: 0px;float:left"></div>
                	<div style="border: solid 0px red;padding: 0px;float:right">
                	<a href="/login.do">
					{% if session.get('user') == None %}
					登陆
				    {% else %}
						{{session.get('user')}}
					{% endif %}
					</a>
                </div>
           </div>
       </div>
		<div id='main' style="width: 90%;border: solid 0px red;margin-left: 5%;" align="center">
			<div id='left' style="min-height:800px;background-color: white;width: 14%;float:left;border: solid 0px red;margin: 4px;">
				<ul>
					<li><a href="table_lianliankan.html" target="innerFrame">人工智能</a></li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					<li>人工智能</li>
					
				</ul>
			</div>
			<div id='middle' style="min-height:800px;background-color: white;width: 60%;float:left;border: solid 0px red;margin: 4px;">
				<div style="width: 100%;">
					a
					<!--
					<iframe border="0" scrolling="no" width="100%" height="800px" name="innerFrame" src="html_form.html"></iframe>
					-->
				</div>
			</div>
			<div id='right' style="min-height:800px;background-color: white;width: 24%;float:right;border: solid 0px red;margin: 4px;">
				<div style="width: 100%;">aaaa</div>
			</div>
		</div>
		<div style="background-color: #FF0000;position: fixed;left: 8px;top:200px;height: 400px;">
			左广告
		</div>
		<div style="background-color: #FF0000;position: fixed;right: 8px;top:200px;height: 400px;">
			右广告
		</div>
	</body>
</html>
login.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="static/css/style.css" />-->
    <link rel="stylesheet" href="{{url_for('static',filename='css/style.css',_external=True)}}" />
</head>
<body>

    <form action="/login.do" method="post">
        <table>
            <span color="red"> {{message}}</span>
            <tr>
                <td>用户名：</td><td><input type="text" name="userName" /></td>
            </tr>
             <tr>
                <td>密码：</td><td><input type="password" name="userPwd" /></td>
            </tr>
             <tr>
                 <td>
                     <input type="reset" value="重置" />
                     <input type="submit" value="提交" />
                 </td>
            </tr>
        </table>
    </form>
</body>
</html>
style.css代码：

（部分代码是无效的，因为这是以前使用过的css，所以为了简便就直接复制过来了。）

@charset "utf-8";
body{
	text-align: center;
}
div{
	/*background-color: darkgrey !important;
	background-color: #2E8B57 !important;*/
}
table{
	BACKGROUND-COLOR: seagreen;
	font-family: "楷体";
	font-size: 50px;
	width: 400px;
}

TABLE{
	background-color: #FF00FF;	
}

#P1{
	background-color: ghostwhite;
}
#p1{
	background-color: lightgreen;
}
.C1{
	background-color: #FF00FF;
}

.C2{
	font-family: "mv boli";
	font-size: 20px;
}
h1,h2,h3,h4,h5{
	color: #2E8B57;
}
ul li .name2{
	
}
a:visited{
	color: white;
}
a:hover{
	color:white;
}
运行效果图：

flask创建项目架构 flask实战项目教程_Flask_06

登陆页面：

flask创建项目架构 flask实战项目教程_html_07

登陆成功：

flask创建项目架构 flask实战项目教程_flask创建项目架构_08

登陆失败：

flask创建项目架构 flask实战项目教程_人工智能_09