第 2 章 开发 Web 应用

本章中，我们先来了解 Web 应用的概念，然后一起实际开发一个简单
的留言板应用，借此来了解 Web 应用开发的基本流程。至于留言板应
用，它类似于观光景点的留言板，可以让访问网站的人在上面添加留
言，说白了就是一个简单的网络留言板。正文中会涉及 HTML/CSS 和
Python 代码，但本书将省去对这些语法的说明。另外，本章的开发环
境为 VirtualBox 虚拟机上的 Ubuntu 和 Python 2.7，同时还会用到
virtualenv。
2.1　了解Web 应用
要想开发 Web 应用，首先要知道 Web 应用是什么，它是怎样工作
的。所以我们先来了解一下什么是 Web 应用。
2.1.1　Web 应用是什么
顾名思义，Web 应用就是可以通过网络使用的应用程序。比如 Google
的搜索服务、Gmail、Wikipedia、各种博客服务、Twitter 等迷你博
客、GREE 和手机游戏、Facebook 等社交网站以及上面的社交游戏
等，这些都是 Web 应用。人们使用 Web 应用时需要通过 Web 浏览器
访问（连接）相应服务。
那么，同样需要通过 Web 浏览器阅览的 Web 站点又如何呢？ Web 站
点只是单纯地显示页面，它们能称作 Web 应用吗？
答案是不一定。某些 Web 站点或许可以称为 Web 应用。因为虽然有
些东西在阅览者眼中像 Web 站点，但它实际上却是由 CMS（Content
Management System，内容管理系统）等 Web 应用构成的。Web 浏览
器会从访问对象的计算机（服务器）中下载 HTML、CSS、图片等各种
内容，然后再把这些内容显示在我们的屏幕上。如果负责发送内容的
服务器只是返回一些早已准备好的静态内容，那么这个 Web 站点就不
能称作 Web 应用。只有能够动态生成并返回内容的系统（比如通过
Web 浏览器接收用户输入的数据，再根据这些数据生成内容）才能称
作 Web 应用。
NOTE
CMS 是负责管理和发送文章、图片等内容的系统。Wiki 和博客系
统也都属于 CMS。
2.1.2　Web 应用与桌面应用的区别
要通过 Web 浏览器连接服务器使用的应用叫 Web 应用；相对地，要
将软件安装在计算机上才能使用的应用叫桌面应用。二者的区别如
下。
比较项目Web 应用桌面应用
服务器需要可有可无
网络连接需要部分应用需要
使用 OS 具备的功能不可能可能
安装不需要需要
升级不需要使用者专门注意需要使用者亲自动手
跨平台使用有 Web 浏览器就能用需要各平台分别作处理
移动端支持与 PC 端基本相同需要各平台分别作处理
运行速度慢快
从这张表上看，二者各有所长。但如果要开发一个让使用者通过网络
互相交流信息的应用，那么由于桌面应用也同样需要用到服务器，所
以使用 Web 应用开发起来会简单很多。不过，这个表中的内容也不是
一成不变的。
比如 Web 应用本来离不开网络，但如今已有一部分应用可以离线运
行。另外，某些桌面应用也开始具备自动升级新版本的功能（比如
Google Chrome），这让使用者不必再费心手动升级。可以说，Web 应
用和桌面应用之间的距离正在逐渐缩小。
2.1.3　Web 应用的机制
接下来我们来了解一下 Web 应用的机制。
从我们在 Web 浏览器中输入 URL 到显示出页面，其间要进行下述处
理。
① 用户在 Web 浏览器中输入 URL
② 向 DNS 服务器询问该 URL 中的域名，获取 IP 地址
③ Web 浏览器连接该 IP 地址的 Web 服务器，开始 HTTP 通信
④ Web 服务器根据 HTTP 发送来的信息运行 Web 应用，获取相应内
容
⑤ Web 服务器响应，返回执行应用后得到的 HTML、CSS、
JavaScript、图片文件等内容
⑥ Web 浏览器将收到的内容显示在页面中
下表是对上述处理流程中的术语进行的说明。
Web 浏览器
通过 HTTP 等协议与 URL 所示的计算机通信，将 HTML、CSS、图
片等内容显示在页面中的软件
URL
Uniform Resource Locator（统一资源定位符）的简称，其中包
含域名。这个字符串用来表示计算机需要访问网络上的哪些内容
域名与 IP 地址挂钩的字符串（比如 URL 中包含的 www.beproud.jp
等字符串）
DNS 服务器可以通过域名查询 IP 地址的服务器
IP 地址
这个数值用来在网络上识别我们想访问的计算机（以 IPv4 地址为
例，IP 地址由 0 ～ 255 的数字和点组成，比如
192.168.0.1）
HTTP
Hypertext Transfer Protocol（超文本传输协议）的简称，是
与被访问计算机之间的通信协议
HTML 用来描述文档（包括文字和图片等）结构的语言
CSS 描述 HTML 等语言描述的文档该如何显示的语言、机制
JavaScript 在 Web 浏览器上运行的程序
Web 服务器通过 HTTP 进行通信的服务器程序 / 计算机
Web 应用在 Web 服务器上运行的程序
CGI
Common Gateway Interface（通用网关接口）的简称，Web 应用
的机制之一
上述流程可以用图 2.1 表示。
图 2.1　Web 应用的处理流程
◉ Web 应用与 CGI
CGI 是 Web 服务器运行 Web 应用的一种机制。Web 服务器执行 CGI
程序（CGI 脚本），然后将该程序的标准输出结果作为 HTTP 通信的
响应返回给对方。最简单的 CGI 程序就是在控制台界面上显示字符
串。
CGIHTTPServer 是 Python 标准模块中的 Web 服务器，它可以运行
CGI 程序。现在我们试着运行下面这个 CGI 程序（LIST 2.1）。
LIST 2.1　hello.py
#!/usr/bin/env python
print "200 OK"
print "Content-Type: text/plain"
print ""
print "Hello CGI!"
用 python 命令运行这个脚本，然后控制台界面中将显示如 LIST 2.2
所示的 4 行字符串。
LIST 2.2　用 python 命令运行 hello.py 的结果
$ python hello.py
200 OK
Content-Type: text/plain
Hello CGI!
用 CGIHTTPServer 运行 CGI 程序时，待运行文件必须位于 cgi-bin
目录下，所以我们要创建这个目录并将 hello.py 放进去。另外，
必须具有运行权限才可以运行这些文件，因此还要用 chmod 命令赋
予运行权限。配置好 CGI 程序之后，我们就可以按照下面的例子，用
python 命令的 -m 选项运行 CGIHTTPServer 了。
LIST 2.3　CGI 程序的配置与 CGIHTTPServer 的运行
$ mkdir cgi-bin
$ mv hello.py cgi-bin/
$ chmod u+x cgi-bin/hello.py
$ python -m CGIHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
执行 LIST 2.3 中的命令后，在该环境（这里是 VirtualBox 上的
Ubuntu）的 8000 端口等待请求的 Web 服务器将会启动。在终端按下
Ctrl + C 键可以关闭服务器。
要想通过本地环境（主 OS）的 Web 浏览器查看效果，我们需要先设
置端口转发。设置方法与附录 B 中介绍的 SSH 端口的设置方法一
样，这里我们给 VirtualBox 的端口转发添加如下设置：主、客端口
均为 8000，协议为 TCP。
完成端口转发的设置后，我们只要通过 Web 浏览器访问
http://127.0.0.1:8000/cgi-bin/hello.py，即可看到 Hello CGI!
字样。
NOTE
127.0.0.1 代表的是自己的计算机的 IP 地址。设置过
VirtualBox 的端口转发之后，我们对自己的计算机（主OS）的
8000 端口的访问会被转发到客 OS 的 8000 端口。
本例中的 CGI 程序由 Python 代码编写而成。实际上，只要 CGI 程
序能够进行标准输出，用任何语言都没有问题。
◉ Web 应用与应用服务器
应用服务器指能运行 Web 应用的功能且能与 Web 服务器通信的服务
器。处于启动状态的应用服务器会一直等待 Web 服务器发来请求，一
旦接到请求便会运行 Web 应用并返回结果。由于待运行的程序一直放
在内存里，所以它的速度通常要比 CGI 程序的速度更快。Web 服务器
与应用服务器之间的通信协议通常为 HTTP 或 FCGI 等。如果一个应
用服务器可以通过 HTTP 通信，那么我们就可以用 Web 浏览器访问
它。
本章使用的 Flask 内置了用于开发的应用服务器（Web 服务器），因
此不需要再另外准备 Web 服务器。
2.2　前置准备
接下来我们需要为开发 Web 应用做一些前置准备。这里需要使用
Python 和 virtualenv，二者的安装请参考第 1 章。
2.2.1　关于 Flask
开发留言板应用时，我们会用到 Flask ，因此需要事先安装。Flask
是一个用 Python 编写的 Web 应用框架，它整合了 Werkzeug（WSGI
实用工具）和 Jinja2（模板引擎）两个库。用它可以轻松完成小规模
的应用程序开发。
http://flask.pocoo.org/
2.2.2　安装Flask
安装 Flask 之前，我们先用 virtualenv 命令搭建开发应用所需的虚
拟环境。用 LIST 2.4 中的命令可以搭建出名为 venv 的虚拟环境。
LIST 2.4　搭建名为 venv 的虚拟环境
$ virtualenv venv
通过 source 命令执行 venv/bin 目录下的 activate 脚本，启动
我们刚刚搭建好的虚拟环境（LIST 2.5）。执行完成后，命令提示符
上会显示虚拟环境名 (venv)。
LIST 2.5　启动虚拟环境 venv
$ source venv/bin/activate
NOTE
Windows 需要使用 venv\Scripts\activate 命令启动虚拟环境。
接下来使用 pip 命令在虚拟环境上安装最新版本的 Flask。我们需要
在 venv 虚拟环境处于激活状态时执行 LIST 2.6 中的命令。
LIST 2.6　用 pip 命令安装 Flask
1
1
$ pip install -U Flask
指定 -U 选项之后，可以用新版本替换已经安装的旧版本。2014 年
12 月时，最新的 Flask 版本为 0.10.1。至此 Flask 安装完毕，前
置准备结束。
2.3　Web 应用的开发流程
那么，接下来我们应该按什么顺序开发 Web 应用呢？
现在唯一确定下来的事情就是要开发一个留言板应用，除此之外毫无
计划。首先我们要确定这个应用的需求，再以需求为出发点考虑如何
实现页面和功能，然后开始敲代码。等编码完成后，还要测试该应用
是否能够正常运行。
整个流程总结起来是下面这样的。
① 确认需求（确认要开发什么应用）
② 根据需求明确成品必备的功能
③ 根据功能明确成品必备的页面
④ 页面设计
⑤ 实现功能
⑥ 将功能植入到页面中
⑦ 确认是否能正常运行
⑧ 完成
关于上述各流程，我们将在实际开发过程中详细了解。
2.4　明确要开发什么应用
这里，我们来了解一下这个应用的需求以及必备功能和页面。
2.4.1　留言板应用的需求
首先，我们来确定留言板应用是个什么样的应用，需要实现些什么
（即需求）。
如果不事先明确需求或规格，很容易在编码过程中遇到“原本想做什
么来着”“这个功能有必要做吗”之类的问题，导致项目一团乱。因
此我们需要先确定这个留言板应用的需求，其具体内容如下。
① 在 Web 浏览器上显示一个包含“提交留言”表单的页面
② 可以在提交留言表单中输入名字和留言正文
③ 通过提交留言表单发送的名字和留言内容会被保存
④ 已保存的名字、留言、提交日期会显示在页面中
⑤ 整个应用由一个页面构成，页面上部为提交留言表单，下部显示已
提交的内容
⑥ 提交的内容按新旧顺序由上到下排列
⑦ 可经由网络（互联网）使用本系统
⑧ 可同时在多台计算机上显示已提交的内容
2.4.2　明确必备的功能
确定好该应用的需求后，我们来思考一下该用哪些功能来满足这些需
求。
这次我们要开发的是一个 Web 应用，并且导入了专门开发 Web 应用
的框架，因此能够轻松实现需求①在 Web 浏览器上显示、⑦经由网络
使用以及⑧同时在多台计算机上显示。
从该应用的需求来看，我们需要的功能如下表所示。
功能说明
需求编
号
提交留言
功能
显示可输入名字和留言的表单，保存该表单发送的数据
①、
②、③
留言显示
功能
取出提交留言功能保存的数据（优先提交日期较新的数据）
并显示在页面上
④、⑥
Web 应用
在 Web 浏览器上显示，并且可让多台计算机同时经由网络
使用该应用
①、
⑦、⑧
需求⑤是与页面相关的问题，我们在下一小节学习页面的时候再处
理。这里，我们再确认一遍已明确的功能，看看是否能满足需求。
2.4.3　明确必备的页面
接下来我们根据应用的功能分析所需的页面，结果如下。
功能必备的页面说明
提交留言功
能
可以输入名字和留言的表
单
可供输入名字与留言的栏、提交按钮
留言显示功
能
显示有名字和留言的列表
在页面上列表显示已提交的名字和留
言
需求中提到整个应用由一个页面构成（需求⑤），所以我们要将这两
个页面元素糅合到同一个页面中。于是，必备的页面就成了下面这
样。
必备的页面 页面元素
提交和显示留言的页面可以输入名字和留言的表单、显示有名字和留言的列表
至此，我们明确了必备的页面。接下来可以开始设计页面了。
2.5　页面设计
需要的功能和页面都已经敲定，接下来，我们就动手设计页面吧。
至于为什么先实现页面而非功能，是因为当页面完成后，我们可以更
好地把握成品应用的整体印象。在把功能植入系统之前，即页面设计
阶段，我们需要先写好 HTML 文件和 CSS 文件。
2.5.1　确定成品页面的形式
在开始编写 HTML 代码之前，还需先按捺住自己跃跃欲试的心情，把
我们希望呈现的页面明确下来。所以，现在要做的就是把必备页面转
化成图。这一步称为页面设计。
建议各位先在纸上画出页面的草图。如果希望后期修改起来方便，或
者希望页面草图干净漂亮，还可以考虑用绘图软件或页面设计方面的
专业软件来画。
这次我们没有使用工具，而是直接画了一张页面草图（图 2.2）。
图 2.2　留言板应用的页面草图
按照需求，上面是表单，下面显示提交的评论内容。另外，这张草图
还为各个显示元素（表单和文章）添加了注释。这样一张草图不但能
在植入功能时为我们提供参考，还能随时提醒我们仍缺少哪些功能，
这对开发来说意义重大。
2.5.2　编写 HTML 和 CSS
下面我们开始编写 HTML 文件和 CSS 文件。为了查看其在 Web 浏览
器中的效果，我们将在本地环境（主 OS）中进行编写。编写完成的文
件可以通过 scp 命令发送到服务器，以便后续使用。
首先我们来参考草图编写 HTML 文件。现阶段不必太在意页面布局，
这些外观上的东西都可以留在编写 CSS 文件的时候进行调整。
LIST 2.7 是我们编写的 HTML 文件的源码。
 

LIST 2.7　index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title> 留言板</title>
</head>
<body>
<h1> 留言板</h1>
<form action="/post" method="post">
<p> 请留言</p>
<table>
<tr>
<th> 名字</th>
<td>
<input type="text" size="20" name="name">
</td>
</tr>
<tr>
<th> 留言</th>
<td>
<textarea rows="5" cols="40" name="comment">
</textarea>
</td>
</tr>
</table>
<p><button type="submit"> 提交</button></p>
</form>
<div>
<h2> 留言记录</h2>
<h3> 游客 的留言(2014/10/31 10:00:00):</h3>
<p>
留言内容<br>
留言内容
</p>
<h3> 游客 的留言(2014/10/31 09:00:00):</h3>
<p>
留言内容<br>
留言内容
</p>
</div>
</body>
</html>