@@ -7234,3 +7234,217 @@ SELECT * from books
72347234
72357235以上十步就是sqlite3写入数据库的主要步骤，作为Flask系列的第二篇，为后面的前端讲解打下基础。
72367236
7237+ # ### 3 Flask各层调用关系
7238+
7239+ 这篇介绍Flask和B/ S模式，即浏览器/ 服务器模式，是接下来快速理解Flask代码的关键理论篇：** 理解Views、models和渲染模板层的调用关系** 。
7240+
7241+ 1 ) 发出请求
7242+
7243+ 当我们在浏览器地址栏中输入某个地址，按回车后，完成第一步。
7244+
7245+ 2 ) 视图层 views接收1 )步发出的请求，Flask中使用解释器的方式处理这个求情，实例代码如下，它通常涉及到调用models层和模板文件层
7246+
7247+ ```python
7248+ @ main_blue.route(' /' methods = [' GET' ' POST'
7249+ def index():
7250+ form = TestForm()
7251+ print (' test'
7252+ ```
7253+
7254+ 3 ) models层会负责创建数据模型，执行CRUD 操作
7255+
7256+ 4 ) 模板文件层处理html模板
7257+
7258+ 5 ) 组合后返回html
7259+
7260+ 6 ) models层和html模板组合后返回给views层
7261+
7262+ 7 ）最后views层响应并渲染到浏览器页面，我们就能看到请求的页面。
7263+
7264+ 完整过程图如下所示：
7265+
7266+ 
7267+
7268+ 读者朋友们，如果你和例子君一样都是初学Flask编程，需要好好理解上面的过程。理解这些对于接下来的编程会有一定的理论指导，方向性指导价值。
7269+
7270+
7271+
7272+ # ### 4 Flask之表单操作
7273+
7274+ ** 1 开篇**
7275+
7276+ 先说一些关于Flask的基本知识，现在不熟悉它们，并不会影响对本篇的理解和掌握。
7277+
7278+ Flask是一个基于Python开发，依赖`jinja2` 模板和`Werkzeug` WSGI 服务的一个微型框架。
7279+
7280+ `Werkzeug` 用来处理Socket服务，其在Flask中被用于接受和处理http请求；`Jinja2` 被用来对模板进行处理，将`模板` 和`数据` 进行渲染，返回给用户的浏览器。
7281+
7282+ 这到这些，对于理解后面调试出现的两个问题会有帮助，不过不熟悉仍然没有关系。
7283+
7284+ ** 2 基本表单**
7285+
7286+ 首先导入所需模块：
7287+
7288+ ```python
7289+ from wtforms import StringField,PasswordField, BooleanField, SubmitField
7290+ from flask_wtf import FlaskForm
7291+ ```
7292+
7293+ `wtforms` 和`flask_wtf` 是flask创建web表单类常用的包。
7294+
7295+ 具体创建表单类的方法如下，登入表单`LoginForm` 继承自`FlaskForm` .
7296+
7297+ 分别创建`StringFiled` 实例用户名输入框`user_name` ，密码框`password` ，勾选框`remember_me` 和提交按钮`submit` .
7298+
7299+ ```python
7300+ class LoginForm(FlaskForm):
7301+ user_name = StringField()
7302+ password = PasswordField()
7303+ remember_me = BooleanField(label = ' 记住我'
7304+ submit = SubmitField(' Submit'
7305+ ```
7306+
7307+ 至此表单类对象创建完毕
7308+
7309+ ** 3 html模板**
7310+
7311+ 使用`Bootstrap` . 它是由Twitter推出的一个用于前端开发的开源工具包，给予HTML 、CSS 、JavaScriot，提供简洁、直观、强悍的前端开发框架，是目前最受环境的前端框架。
7312+
7313+ `flak_bootstrap` 提供使用的接口。方法如下，首先`pip install bootstrap` ，然后创建一个实例`bootstrap` .
7314+
7315+ ```python
7316+ from flask_bootstrap import Bootstrap
7317+ bootstrap = Bootstrap()
7318+ ```
7319+
7320+ 然后创建`index.html` 文件，第一行导入创建的Bootstrap实例`bootstrap` ：
7321+
7322+ ```python
7323+ {% import " bootstrap/wtf.html" as wtf % }
7324+ ```
7325+
7326+ 再创建第2 节中创建的`LoginForm` 实例`form` ，调用渲染模板方法，参数`form` 赋值为实例`form` :
7327+
7328+ ```python
7329+ from flask import render_template
7330+ form = LoginForm()
7331+ render_template(' index.html' form = form)
7332+ ```
7333+
7334+ 再在index.html输入以下代码，`{{ wtf.quick_form(form) }}` 将实例`form` 渲染到html页面中。
7335+
7336+ ```python
7337+ < div class =" container" >
7338+ < h3> 系统登入< / h3>
7339+ < div class =" col-md-4" >
7340+ {{ wtf.quick_form(form) }}
7341+ < / div>
7342+ < / div>
7343+ ```
7344+
7345+ ** 4 index页面路由**
7346+
7347+ `flask_wtf` 创建的form，封装方法`validate_on_submit` ，具有表单验证功能。
7348+
7349+ ```python
7350+ @ app.route(' /' methods = [' GET' ' POST'
7351+ def index():
7352+ form = LoginForm()
7353+ if form.validate_on_submit():
7354+ print (form.data[' user_name'
7355+ return redirect(url_for(' print_success'
7356+
7357+ return render_template(' index.html' form = form)
7358+ ```
7359+
7360+ 验证通过跳转到`print_success` 方法终端点：
7361+
7362+ ```python
7363+ @ app.route(' /success'
7364+ def print_success():
7365+ return " 表单验证通过"
7366+ ```
7367+
7368+ ** 5 完整代码**
7369+
7370+ 共有两个文件：一个py，一个html:
7371+
7372+ ```python
7373+ from flask import Flask
7374+ from flask import render_template, redirect, url_for
7375+ from wtforms import StringField,PasswordField, BooleanField, SubmitField
7376+ from flask_wtf import FlaskForm
7377+ from flask_bootstrap import Bootstrap
7378+
7379+ bootstrap = Bootstrap()
7380+
7381+ app = Flask(__name__ )
7382+ app.config[' SECRET_KEY' " hard_to_guess_secret_key$$#@"
7383+
7384+ bootstrap.init_app(app)
7385+
7386+ @ app.route(' /' methods = [' GET' ' POST'
7387+ def index():
7388+ form = LoginForm()
7389+ if form.validate_on_submit():
7390+ print (form.data[' user_name'
7391+ return redirect(url_for(' print_success'
7392+
7393+ return render_template(' index.html' form = form)
7394+
7395+ @ app.route(' /success'
7396+ def print_success():
7397+ return " 表单验证通过"
7398+
7399+
7400+ class LoginForm(FlaskForm):
7401+ user_name = StringField()
7402+ password = PasswordField()
7403+ remember_me = BooleanField(label = ' 记住我'
7404+ submit = SubmitField(' Submit'
7405+
7406+ if __name__ == " __main__"
7407+ app.run(debug = True )
7408+ ```
7409+
7410+ html代码：
7411+
7412+ ```python
7413+ {% import " bootstrap/wtf.html" as wtf % }
7414+ < div class =" container" >
7415+ < h3> 系统登入< / h3>
7416+ < div class =" col-md-4" >
7417+ {{ wtf.quick_form(form) }}
7418+ < / div>
7419+ < / div>
7420+ ```
7421+
7422+ 启动后，控制台显示如下：
7423+
7424+ 
7425+
7426+ 然后网页中输入127.0 .0.1:5000 ,网页显示：
7427+
7428+ 
7429+
7430+ ** 6 两个错误**
7431+
7432+ 例子君也是Flask新手，在调试过程中，遇到下面两个错误。
7433+
7434+ ** 1 ) CSRF 需要配置密码**
7435+
7436+ 
7437+
7438+ 遇到这个错误，解决的方法就是配置一个密码。具体对应到第5 节完整代码部分中的此行：
7439+
7440+ ```
7441+ app.config[' SECRET_KEY' " hard_to_guess_secret_key$$#@"
7442+ ```
7443+
7444+ ** 2 ) index.html未找到异常**
7445+
7446+ 
7447+
7448+
7449+
7450+ 出现这个错误的原因不是因为index.html的物理路径有问题，而是我们需要创建一个文件夹并命名为：`templates` ，然后把index.html移动到此文件夹下。
0 commit comments