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:\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应用的更多相关文章
- Eclipse的maven构建一个web项目，以构建SpringMVC项目为例
http://www.cnblogs.com/javaTest/archive/2012/04/28/2589574.html springmvc demo实例教程源代码下载:http://zuida ...
- 使用maven构建一个web项目
使用maven构建一个web项目 首先建立一个maven项目(关于环境配置上节有详细过程): 1)-->右键new,-->project ...
- 使用maven命令终端构建一个web项目及发布该项目
构建环境: maven版本:3.3.9 系统平台:Windows7 x64 JDK版本:1.7 构建步骤: 1.打开maven安装目录,在地址栏输入cmd进入命令窗口 2.输入命令mvn archet ...
- 使用Flask构建一个Web应用
Flask是一个使用Python编写的轻量级Web应用框架. 一.安装Flask 以管理员身份,打开命令提示符窗口,输入下面命令 py -3 -m pip install flask 这个命令会连接到 ...
- maven 构建一个web项目
maven已经大型的Java项目的管理工具,其功能非常强大,这里简单总结一下maven构建web项目的过程.本文介绍的是集成环境下的maven构建web项目. 一.准备 1.安装maven. 2.把m ...
- jmeter 构建一个Web测试计划
添加用户 第一步你想做的每一个JMeter测试计划是添加一个 线程组 元素. 线程组告诉 JMeter的用户数量你想模拟,用户应该发送的次数 请求,请求他们应该送多少. 继续添加ThreadGroup ...
- 【springBoot】之快速构建一个web项目
基于maven,首先看pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifact ...
- 从零构建一个简单的 Python Web框架
为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...
- 零基础学python之构建web应用（入门级）
构建一个web应用 前面的学习回顾: IDLE是Python内置的IDE,用来试验和执行Python代码,可以是单语句代码段,也可以是文本编辑器中的多语句程序. 四个内置数据结构:列表.字典.集合和元 ...
随机推荐
- linux新增动态库后可执行程序找不到的问题
linux为了加快程式执行时对共享库的定位速度,避免使用搜索路径查找共享库的低效率,所以是直接读取库列表文档 /etc/ld.so.cache 从中进行搜索./etc/ld.so.cache 是个非文 ...
- 洛谷P3311 [SDOI2014]数数 AC自动机+dp
正解:AC自动机+dp 解题报告: 传送门! 首先看到多串匹配balabala显然想到建个AC自动机? 然后可以用一点儿数位dp的思想地想下(,,,其实并不算QAQ 幸运数可以分为两类:位数<n ...
- java开发中乱码的解决
总结一下,在JavaWeb中针对各种情况处理中文乱码的方法. 首先我们看下,一个请求响应的流程 浏览器------------------>Servlet容器---------------> ...
- C# Asp.net Quartz.NET作业调度之创建、安装、卸载、调试windows服务的简单事例
一.创建windows服务 1.用VS创建windows服务,结果如下: 2.删除默认生成的Service1.cs文件,然后创建自己的服务文件(如:MyService),并修改Program.cs文件 ...
- 如何使用CryptoJS配合Java进行AES加密和解密
注意 1. PKCS5Padding和PKCS7Padding是一样的 2. 加密时使用的key和iv要转换成base64格式 一.前端 1.函数 function encrypt (msg, key ...
- python-面向对象-03_面向对象基础语法
面向对象基础语法 目标 dir 内置函数 定义简单的类(只包含方法) 方法中的 self 参数 初始化方法 内置方法和属性 01. dir 内置函数(知道) 在 Python 中 对象几乎是无所不在的 ...
- Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...
- sql server 复制、镜像常见故障处理
sql server2008数据库复制实现数据同步常见问题 操作使用的一些技巧(事务复制类型): 1.如何修改一个已经发布的表的属性? 将发布所有订阅删除,(发布不用删除),就可以在发布属性的项目中取 ...
- centos删除用户出错userdel: user xxx is currently used by process 23750
今天ytkah管理centos用户准备删除某个用户时出错了,提示userdel: user xxx is currently used by process 23750,这是因为xxx用户还在登陆中, ...
- chmod a+r file：给所有用户添加读的权限
chmod a+r *:用户自己使用此命令,柯给所有用户添加可读的权限 超级用户给其他用户设置权限:sudo chmod a+rx /home/user 使所有人可以访问,读取文件,bu no W ...