Python 6 -- 构建一个Web应用

用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. 按以下目录建好相应的文件夹及内容

文件内容

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》读书笔记，便于日后查阅。