用Flask Web框架，实现浏览器页面交互。在此之前需要了解web的基本工作流程，可参照https://blog.csdn.net/m0_37466453/article/details/72752684。
1. 我们将要做什么？
我们希望做一个简单的包含页面简单交互的例子。
从页面entry.html中输入Phrase表示某1段英文，然后从中超出letters表示特定的几个字母。
2. 初次使用Flask Web框架
Flask是开源的轻量级Python框架。
1. 导入Flask
C:Usersdell>py -3 -m pip install flask
2. 检查Flask是否安装好并能正常工作
a. 在目录下创建一个如下hello_flask.py 文件，例如创建E:CodePythonLearningWebApphello_flask.py
from flask import Flask app = Flask(__name__) @app.route('/') def hello() - > str: return 'Hello world from Flask!' app.run()
b. 启动Flask Web服务器
在cmd以管理员权限运行后，输入以下命令
C:Windowssystem32>cd E:CodePythonLearningWebApp C:Windowssystem32>e: E:CodePythonLearningWebApp>py -3 hello_flask.py
当显示 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)时说明启动成功。
c. 从浏览器中输入http://127.0.0.1:5000即可查看到hello_flask.py的运行结果‘Hello world from Flask!’
3. 应用实现步骤
为了实现1中描述的“”从页面entry.html中输入Phrase表示某1段英文，然后从中超出letters表示特定的几个字母。”
1. 按以下目录建好相应的文件夹及内容
webapp
|
|----vsearch4web.py
|
|----static
| |
| |----hf.css
|
|----templates
| |
| |----base.html
| |
| |----entry.html
| |
| |----result.html
文件内容
vsearch4web.py
from flask import Flask, render_template, request from vsearch import search4letters app = Flask(__name__) @app.route('/search4',methods=['GET','POST']) def do_search() -> 'html': phrase = request.form['phrase'] letters = request.form['letters'] title = 'Here are your results:' results = str(search4letters(phrase,letters)) return render_template('result.html',the_title=title,the_phrase=phrase,the_results=results,the_letters=letters) @app.route('/') @app.route('/entry') def entry_page() -> 'html': return render_template('entry.html',the_title='Welcome to this Web!') if __name__=='__main__': app.run(debug=True)
base.html
<!doctype html>
<html>
<head>
<title>{{the_title}}</title>
<link rel="stylesheet" href="static/hf.css"></>
</head>
<body>
{% block body %}
{% endblock %}
<body/>
</html>
entry.html
{% extends 'base.html' %}
{% block body %}
<h2> {{the_title}} </h2>
<form method='POST' action='/search4'>
<table>
<p>Use this Form to submit a search request:</p>
<tr>
<tr><td> Phrase:</td> <td><input name='phrase' type='TEXT' width='60'></td></tr>
<tr><td> Letters:</td> <td><input name='letters' type='TEXT' value='aeiou'></td></tr>
</table>
<p>When you're ready, click this button:</p>
<p><input value='Do it' type='SUBMIT'></p>
</form>
{% endblock %}
result.html
{% extends 'base.html' %}
{% block body %}
<h2>{{the_title}}</h2>
<p>You submitted the following data:</p>
<table>
<tr>
<td>Phrase:</td><td>{{the_phrase}}</td>
</tr>
<tr>
<td>Letters:</td><td>{{the_letters}}</td>
</tr>>
</table>
<p>When "{{the_phrase}}" is searched for "{{the_letters}}"
, the folLowing results are returned:</p>
<h3>{{the_results}}</h3>
{% endblock %}
hf.css
body { font-family: Verdana, Geneva, Arial, sans-serif; font-size: medium; background-color: tan; margin-top: 5%; margin-bottom: 5%; margin-left: 10%; margin-right: 10%; border: 1px dotted gray; padding: 10px 10px 10px 10px; } a { text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } a img { border: 0; } h2 { font-size: 150%; } table { margin-left: 20px; margin-right: 20px; caption-side: bottom; border-collapse: collapse; } td, th { padding: 5px; text-align: left; } .copyright { font-size: 75%; font-style: italic; } .slogan { font-size: 75%; font-style: italic; } .confirmentry { font-weight: 600; } /*** Tables ***/ table { font-size: 1em; background-color: #fafcff; border: 1px solid #909090; color: #2a2a2a; padding: 5px 5px 2px; border-collapse: collapse; } td, th { border: thin dotted gray; } /*** Inputs ***/ input[type=text] { font-size: 115%; 30em; } input[type=submit] { font-size: 125%; } select { font-size: 125%; }
输入py -3 vsearch4web.py来启动Flask Web服务器后，在浏览器输入http://127.0.0.1:5000，在输入框中输入需要查找的字段来查看其中出现的元音。
此文为《Head First Python》读书笔记，便于日后查阅。