《FlaskWeb开发：基于Python的Web应用开发实战》第4节

落叶飞空

这一节学习Flask的表单操作实现一个生成微信撤回的昵称


最终效果如下：

网址如下（目前不能在微信中打开）：
http://60.205.181.198/wechat

python代码如下：

1. from flask import Flask, render_template
   
2. from flask_wtf import FlaskForm
   
3. from wtforms import StringField, SubmitField
   
4. from wtforms.validators import DataRequired
   
5. from flask_bootstrap import Bootstrap
   
6. 
   
7. 
   
8. app = Flask(__name__)
   
9. app.config['SECRET_KEY'] = 'hard to guess string'
   
10. bootstrap = Bootstrap(app)
    
11. 
    
12. @app.route('/')
    
13. def index():
    
14.     return render_template('index.html')
    
15. 
    
16. 
    
17. class NameForm(FlaskForm):
    
18.     name = StringField('名字', validators=[DataRequired()])
    
19.     suffix = StringField('后缀', validators=[DataRequired()])
    
20.     result = StringField('昵称')
    
21.     submit = SubmitField('生成')
    
22. 
    
23. 
    
24. @app.route('/wechat/', methods=['GET', 'POST'])
    
25. def wechat():
    
26.     form = NameForm()
    
27.     if form.validate_on_submit():
    
28.         name = form.name.data
    
29.         suffix = form.suffix.data
    
30.         form.result.data = chr(65197) + suffix + chr(65197) + name
    
31.     return render_template('wechat.html', form=form)
    
32. 
    
33. 
    
34. @app.route('/user/<name>')
    
35. def user(name):
    
36.     return render_template('user.html', name=name)
    
37. 
    
38. 
    
39. @app.errorhandler(404)
    
40. def page_not_found(e):
    
41.     return render_template('404.html'),404
    
42. 
    
43. if __name__ == '__main__':
    
44.     app.run(debug=True)
    

复制代码

首先引入关键的库文件：

1. from flask_wtf import FlaskForm
   
2. from wtforms import StringField, SubmitField
   
3. from wtforms.validators import DataRequired

复制代码

然后通过继承表单类定义我们需要的表单：

1. class NameForm(FlaskForm):
   
2.     name = StringField('名字', validators=[DataRequired()])
   
3.     suffix = StringField('后缀', validators=[DataRequired()])
   
4.     result = StringField('昵称')
   
5.     submit = SubmitField('生成')

复制代码

其中表单由四部分组成：
名称分别为名字，后缀，昵称的三个文本框，一个名为生成的提交按钮。

然后定义我们的路由：

1. @app.route('/wechat/', methods=['GET', 'POST'])
   
2. def wechat():
   
3.     form = NameForm()
   
4.     if form.validate_on_submit():
   
5.         name = form.name.data
   
6.         suffix = form.suffix.data
   
7.         form.result.data = chr(65197) + suffix + chr(65197) + name
   
8.     return render_template('wechat.html', form=form)

复制代码

在templates文件夹下定义wechat.html:

1. {% extends "base.html" %}
   
2. {% import "bootstrap/wtf.html" as wtf %}
   
3. {% block title %}Flasky{% endblock %}
   
4. {% block page_content %}
   
5. <div class="page-header">
   
6. <h1>输入名字和后缀点击生成即可！</h1>
   
7. </div>
   
8. [code]{% import "bootstrap/wtf.html" as wtf %}
   
9. {{ wtf.quick_form(form) }}

复制代码

其中负责通过bootsrap渲染表单。

1. 
   
2. {% import "bootstrap/wtf.html" as wtf %}
   
3. 
   
4. {{ wtf.quick_form(form) }}

复制代码

将微信昵称修改为生成的昵称即可实现撤回出现如下效果：