用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

  1. C:\Users\dell>py -3 -m pip install flask

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

　　      a. 在目录下创建一个如下hello_flask.py 文件，例如创建E:\Code\PythonLearning\WebApp\hello_flask.py

  1. from flask import Flask
  2.  
  3. app = Flask(__name__)
  4.  
  5. @app.route('/')
  6. def hello() - > str:
  7.     return 'Hello world from Flask!'
  8.  
  9. app.run()

　　b. 启动Flask Web服务器

在cmd以管理员权限运行后，输入以下命令

  1. C:\Windows\system32>cd E:\Code\PythonLearning\WebApp
  2. C:\Windows\system32>e:
  3. 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

  1. from flask import Flask, render_template, request
  2. from vsearch import search4letters
  3.  
  4. app = Flask(__name__)
  5.  
  6. @app.route('/search4',methods=['GET','POST'])
  7. def do_search() -> 'html':
  8.     phrase = request.form['phrase']
  9.     letters = request.form['letters']
  10.     title = 'Here are your results:'
  11.     results = str(search4letters(phrase,letters))
  12.     return render_template('result.html',the_title=title,the_phrase=phrase,the_results=results,the_letters=letters)
  13.  
  14. @app.route('/')
  15. @app.route('/entry')
  16. def entry_page() -> 'html':
  17.     return render_template('entry.html',the_title='Welcome to this Web!')
  18.  
  19. if __name__=='__main__':
  20.     app.run(debug=True)

base.html

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.      <title>{{the_title}}</title>
  5.      <link rel="stylesheet" href="static/hf.css"></>
  6.   </head>
  7.   <body>
  8.      {% block body %}
  9.  
  10.      {% endblock %}
  11.   <body/>
  12. </html>

entry.html

  1. {% extends 'base.html' %}
  2.  
  3. {% block body %}
  4.  
  5. <h2> {{the_title}} </h2>
  6.  
  7. <form method='POST' action='/search4'>
  8. <table>
  9. <p>Use this Form to submit a search request:</p>
  10. <tr>
  11.   <tr><td> Phrase:</td> <td><input name='phrase' type='TEXT' width=''></td></tr>
  12.   <tr><td> Letters:</td> <td><input name='letters' type='TEXT' value='aeiou'></td></tr>
  13. </table>
  14. <p>When you're ready, click this button:</p>
  15. <p><input value='Do it' type='SUBMIT'></p>
  16. </form>
  17.  
  18. {% endblock %}

result.html

  1. {% extends 'base.html' %}
  2.  
  3. {% block body %}
  4.  
  5. <h2>{{the_title}}</h2>
  6.  
  7. <p>You submitted the following data:</p>
  8. <table>
  9. <tr>
  10.     <td>Phrase:</td><td>{{the_phrase}}</td>
  11. </tr>
  12. <tr>
  13.     <td>Letters:</td><td>{{the_letters}}</td>
  14. </tr>>
  15. </table>
  16.  
  17. <p>When "{{the_phrase}}" is searched for "{{the_letters}}"
  18. , the folLowing results are returned:</p>
  19. <h3>{{the_results}}</h3>
  20.  
  21. {% endblock %}

hf.css

  1. body {
  2.   font-family:      Verdana, Geneva, Arial, sans-serif;
  3.   font-size:        medium;
  4.   background-color: tan;
  5.   margin-top:       5%;
  6.   margin-bottom:    5%;
  7.   margin-left:      10%;
  8.   margin-right:     10%;
  9.   border:           1px dotted gray;
  10.   padding:          10px 10px 10px 10px;
  11. }
  12. a {
  13.   text-decoration:  none;
  14.   font-weight:      600;
  15. }
  16. a:hover {
  17.   text-decoration:  underline;
  18. }
  19. a img {
  20.   border:           0;
  21. }
  22. h2 {
  23.   font-size:        150%;
  24. }
  25. table {
  26.   margin-left:      20px;
  27.   margin-right:     20px;
  28.   caption-side:     bottom;
  29.   border-collapse:  collapse;
  30. }
  31. td, th {
  32.   padding:          5px;
  33.   text-align:       left;
  34. }
  35. .copyright {
  36.   font-size:        75%;
  37.   font-style:       italic;
  38. }
  39. .slogan {
  40.   font-size:        75%;
  41.   font-style:       italic;
  42. }
  43. .confirmentry {
  44.   font-weight:      600;
  45. }
  46.  
  47. /*** Tables ***/
  48.  
  49. table {
  50. font-size:          1em;
  51. background-color:   #fafcff;
  52. border:             1px solid #909090;
  53. color:              #2a2a2a;
  54. padding:            5px 5px 2px;
  55. border-collapse:    collapse;
  56. }
  57.  
  58. td, th {
  59. border:             thin dotted gray;
  60. }
  61.  
  62. /*** Inputs ***/
  63. input[type=text] {
  64.   font-size:        115%;
  65.   width:            30em;
  66. }
  67. input[type=submit] {
  68.   font-size:        125%;
  69. }
  70. select {
  71.   font-size:        125%;
  72. }
  1. 输入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. LeetCode 429 N-ary Tree Level Order Traversal 解题报告

    题目要求 Given an n-ary tree, return the level order traversal of its nodes' values. (ie, from left to r ...

  2. Appium-两个小报错

    (1)     执行脚本appium报错:> info: [debug] Emulator not running appium设置中取消勾选launch avd解决 (2)执行脚本python ...

  3. IDEA指定启动JDK版本

    使用场景: 开发人员在自己的机器上可能装了多个版本的JDK,但是在环境变量中只能配置一个 JAVA_HOME ,so你的IDEA Eclipse 可能因为你在 JAVA_HOME 配置JDK1.8 以 ...

  4. 多线程-interrupt()，isInterrupted()，interrupted()（转）

    Content 背景 中断 相关方法 阻塞方法 不可中断的阻塞方法 处理不支持中断的线程中断的常用方法 处理InterruptedException 待决中断 实例1 实例2 参考资料 Top 背景 ...

  5. 关于flexjson将json转为javabean的使用

    关于flexjson将json转为javabean的使用 import java.sql.Timestamp; import java.util.Date; import flexjson.JSOND ...

  6. yaml语言在线可视化翻译

    yaml语言在线可视化翻译 https://editor.swagger.io/

  7. C++中的内存区域及其性能特征

    首先须要指出的是.我们通经常使用"堆"和"自由存储"这两个术语来区分两种不同类型的动态分配内存. 1.常量数据:常量数据区域主要用于存储字符串以及其它在编译期就 ...

  8. 并发编程---IO模型

    IO模型 任务的提交方式有两种: 同步:应用程序提交完任务,等待结果结果,之后在执行下一个任务 异步:应用程序提交完任务,继续执行不等待结果,任务执行完,会自动出发异步中的会带哦函数 同步不等于阻塞: ...

  9. Windows XP解决显示桌面图标消失的问题

    1.依次单击“开始”,“运行”,在运行对话框中输入regsvr32 /n /i:u shell32.dll,按回车键 2.弹出“shell32.dll中的DllInstall成功”的窗口,表明已将数据 ...

  10. html-标签页

    <template> <div class="pos-frame"> <div class="pos h100"> < ...