用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:\Users\dell>py -3 -m pip install flask

　　2. 检查Flask是否安装好并能正常工作

　　      a. 在目录下创建一个如下hello_flask.py 文件，例如创建E:\Code\PythonLearning\WebApp\hello_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:\Windows\system32>cd E:\Code\PythonLearning\WebApp

C:\Windows\system32>e:

E:\Code\PythonLearning\WebApp>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=''></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%;

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

Python 6 -- 构建一个Web应用的更多相关文章

  1. Eclipse的maven构建一个web项目，以构建SpringMVC项目为例

    http://www.cnblogs.com/javaTest/archive/2012/04/28/2589574.html springmvc demo实例教程源代码下载:http://zuida ...

  2. 使用maven构建一个web项目

                          使用maven构建一个web项目     首先建立一个maven项目(关于环境配置上节有详细过程): 1)-->右键new,-->project ...

  3. 使用maven命令终端构建一个web项目及发布该项目

    构建环境: maven版本:3.3.9 系统平台:Windows7 x64 JDK版本:1.7 构建步骤: 1.打开maven安装目录,在地址栏输入cmd进入命令窗口 2.输入命令mvn archet ...

  4. 使用Flask构建一个Web应用

    Flask是一个使用Python编写的轻量级Web应用框架. 一.安装Flask 以管理员身份,打开命令提示符窗口,输入下面命令 py -3 -m pip install flask 这个命令会连接到 ...

  5. maven 构建一个web项目

    maven已经大型的Java项目的管理工具,其功能非常强大,这里简单总结一下maven构建web项目的过程.本文介绍的是集成环境下的maven构建web项目. 一.准备 1.安装maven. 2.把m ...

  6. jmeter 构建一个Web测试计划

    添加用户 第一步你想做的每一个JMeter测试计划是添加一个 线程组 元素. 线程组告诉 JMeter的用户数量你想模拟,用户应该发送的次数 请求,请求他们应该送多少. 继续添加ThreadGroup ...

  7. 【springBoot】之快速构建一个web项目

    基于maven,首先看pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifact ...

  8. 从零构建一个简单的 Python Web框架

    为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...

  9. 零基础学python之构建web应用（入门级）

    构建一个web应用 前面的学习回顾: IDLE是Python内置的IDE,用来试验和执行Python代码,可以是单语句代码段,也可以是文本编辑器中的多语句程序. 四个内置数据结构:列表.字典.集合和元 ...

随机推荐

  1. java 之程序中的http请求

    背景 java程序中有时需要我们发起http级别的请求,例如抓数据或者第三方对接时,一般分为两种:一种是只需我们发起请求,还有一种是我们不但要发起请求,还要拿到请求后的数据来进行下一步处理 实现 针对 ...

  2. struct和[]byte的转换，注意结构体内变量首字母一定大写

    type temp struct {     Afd int     Bee string }func main(){ text:=temp{3123,"4234"} b._:=j ...

  3. PHP 快速实现大文件上传

    简单的上传代码 最简上传代码 <?php move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES[ ...

  4. qemu-kvm内存虚拟化1

    2017-04-18 记得很早之前分析过KVM内部内存虚拟化的原理,仅仅知道KVM管理一个个slot并以此为基础转换GPA到HVA,却忽略了qemu端最初内存的申请,而今有时间借助于qemu源码分析下 ...

  5. 使用监听器解决路径问题，例如在jsp页面引入js,css的web应用路径

    使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...

  6. 漫画：什么是HashMap

    漫画:什么是HashMap 参考: HashMap源码解析 美团技术团队:Java 8系列之重新认识HashMap

  7. 使用docker部署Asp.net core web应用程序

    拉取aspnetcore最新docker镜像 aspnetcore的docker镜像在docker官网是有的,是由微软提供的.它的依赖镜像是microsoft/dotnet.通过访问网址:https: ...

  8. Mac本如何卸载MySQL

    Mac本如何卸载MySQL 在Mac上卸载MySQL上一件非常麻烦的事,如果没有卸载干净,就会无法安装新的MySQL 怎样才能完全卸载MySQL呢?(包括所有数据库)    执行以下操作: #打开终端 ...

  9. warning: LF will be replaced by CRLF in 解决办法

    今天用Git bash遇到的问题,看了几个回答之后发现一个比较有价值的,给大家分享一下,其他很多的回答都有很或多或少存在一些弊端. 原回答地址在stackoverflow上,附上链接--http:// ...

  10. "当前不会命中断点,没有与此行关联的可执行代码"可能和"断点位置不准确"有关

    今天用VS调试代码遇到一件怪事,在函数结束前的return那一行打了断点,却报"当前不会命中断点,没有与此行关联的可执行代码".看了自己是debug模式,而且没有开启优化,不应该出 ...