第1章 Web开发概述

第 1 章

Web 开发概述

当今是高速发展的互联网时代，大家经常使用计算机上的浏览器或者手机购物、刷新闻、娱乐，以及学习等。这些丰富多彩的应用，背后的软件系统是基于 Web 技术开发的。Web 应用程序可以分为服务器端和客户端两部分，其中所有的程序逻辑都在 Web 服务器中，网页的交互功能极其有限，一般都是单击链接，跳转到另一个网页上。本书将带领大家揭秘 Web 开发背后的奥秘，了解 Web 开发的工作原理，理解并掌握 Web 开发相关技术，包括前端开发和后端开发两方面，从而快速上手开发 Web 应用。本章主要介绍 Web 开发的相关概念，包括 B/S 结构和 C/S 结构、服务器端和客户端、请求与响应等，了解 Web 开发涉及的技术知识，为后续学习做好准备。

1.1 Web 开发简介

Web 开发是指为 Internet 或 Intranet 构建和维护网站的过程所涉及的工作，该网站可通过 Web 浏览器访问并托管在本地硬件或云服务器上。Web 开发包括从单个纯文本网页到复杂 Web 应用程序的所有内容。

开发网站的主要方法包括编码和网络标记。然而，还有许多开发任务也涉及 Web 开发，如脚本、安全配置、内容开发和电子商务基础设施。Web 开发涉及两方面，即 Web 前端开发和 Web 后端开发。

Web 前端开发的重点是提供用户界面，供用户进行观看和操作。例如，我们在网上看到的各种美观的 Web 网页，就是通过浏览器来解释 HTML 实现的。当然，要显示出各种美观的界面，并且让用户方便地操作，只有 HTML 是不够的，还需要使用 CSS 技术来控制界面的显示样式和效果，如字体、字号、背景色、间距、一些动画效果等，以及使用 JavaScript 语言实现数据获取、分析处理和业务相关的逻辑等。

Web 后端开发的主要工作是对于数据的管理。通常包括数据的存储（增加、删除、修改）和查询。这听起来似乎很简单，其实有的业务流程非常复杂，例如，淘宝购物过程，一个购买操作就涉及很多逻辑处理。如果设计用户量非常大，需要响应百万级以上的客户访问，就需要精心地设计架构，做好多服务分布式、集群式来处理大量的用户请求。

1.1.1 体系结构

常见的网络应用程序体系结构有两种：一种是基于客户端 / 服务器端的 C/S 结构；另一种是基于浏览器 / Web 服务器的 B/S 结构。

C/S 结构，全称为 Client/Server，表示所有的显示和业务逻辑都在客户端，服务端提供数据，如图 1-1 所示。

B/S 结构，全称为 Browse/Server。浏览器负责网页显示，Web・服务器负责业务逻辑，数据放在数据库

服务器，属于典型的三层 / 多层架构，如图 1-2 所示。

本书介绍的 Web 程序开发属于 B/S 结构，其遵循请求响应机制，由浏览器发出请求，服务器端接收后进行处理并做出响应。

1.1.2 服务器端与客户端

Web 开发主要包括两部分，即服务器端与客户端，如图 1-3 所示。

“服务器” 是一个非常宽泛的概念。从硬件的角度来讲，服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其他客户机（如 PC 机、智能手机、ATM 等终端，甚至是火车系统等大型设备）提供计算或者应用服务。从软件的角度来讲，服务器其实就是安装在计算机上的一个软件。根据其作用的不同，服务器又可以分为各种不同的类型，如应用服务器、数据库服务器、Redis 服务器、DNS 服务器、ftp 服务器等。

综上所述，服务器其实就是一台安装了服务器软件的高性能计算机。常见的服务器硬件设备，包括刀片服务器、塔式服务器、机房等。由于服务器是一台计算机，所以它必须在安装操作系统后，才能够安装使用其他服务器软件。常见的服务器操作系统包括 Linux 系统、UNIX 系统，以及 Windows Server 系统等。

硬件服务器在安装好系统后，就可以安装应用软件了，像我们熟知的 Tomcat、MySQL、Redis、FastDFS、ElasticSearch 等都属于服务器应用软件，它们分别提供自己特定的服务器功能。如果一台服务器上安装了 Tomcat，我们就把这台服务器叫作 Tomcat 服务器。

Web 服务器是一个容器，也是一个连接用户与程序之间的中间件。Web 服务器由硬件和软件共同构成。服务器硬件，指能够提供服务让其他客户端访问的设备。服务器软件，本质上是一个应用程序，由代码编写而成，运行在服务器设备上，能够接收请求并根据请求给客户端响应数据、发布静态或动态资源。

Web 服务器主要用来接收客户端发送的请求和响应客户端请求。Web 服务器可以向浏览器等客户端提供文档、放置网站文件供全世界浏览，还可以放置数据文件供其下载。Web 服务器有很多，流行的 Web 服务器有 Tomcat、Apache、JBoss（Redhat）、GlassFish（Oracle）、Resin（Caucho）、Weblogic（Oracle）、WebSphere（IBM）等。

客户端与服务器端相对应，是为客户提供本地服务的程序，用于接收用户的输入（操作）、展示服务器端的数据，以及向服务器端传递数据等。常见的客户端包括 PC 端网页、移动端网页、移动端 App、lot 设备等。

1.1.3 请求与响应

前面提到了 Web 开发遵循请求响应机制，下面简单介绍一下什么是请求和响应。

我们把服务器端应用程序中的各个功能称为业务，如商城项目中的用户注册、用户登录、添加购物车、提交订单、结算订单等。而每项业务的完成，都需要通过请求和响应来实现。

为了方便大家理解，可以对比生活中点菜的过程，如图 1-4 所示。

顾客来到餐厅，通过服务员点菜，这个过程可以看作浏览器向服务器端发出请求，而服务器端将点菜结果反馈给后厨，然后做完后再端给顾客，类似服务器端作出响应，将结果返回给浏览器的过程。

请求消息包括请求行、请求头、请求参数。发送请求需要借助 HttpServletRequest 请求域对象传递数据，HttpServletRequest 是一个接口，它的父接口是 ServletRequest，在开发中常用的是带协议的 HttpServletRequest 请求对象。

响应信息包括响应行、响应头、响应体。做出响应需要借助 HttpServlet-Response 响应域对象。HttpServletResponse 是一个接口，它的父接口是 ServletR 用带协议的 HttpServletRequest 响应对象。

另外，请求的转发与重定向是 Web 应用页面跳转的主要手段，在 Web 应用中使用非常广泛。转发在服务器端内部完成，浏览器感知不到，整个过程只发送一次请求。而对于重定向，浏览器是有感知的，服务器端以 302 状态码通知浏览器访问新地址，整个过程需要发送两次请求。关于请求和响应，接下来会在第 7 章详细介绍。

1.1.4 工作原理

Web 开发的工作原理如图 1-5 所示。客户端发起请求，服务器端收到请求，然后将资源发送回客户端，客户端接收资源并显示出来。这就是 Web 的工作原理，它确保我们能够轻松地访问网站，并获取所需的信息。

具体步骤如下。

（1）用户打开客户端，启动浏览器程序，并在浏览器中指定一个 URL（统一资源定位器），浏览器便向该 URL 所指向的 Web 服务器端发出请求。

（2）服务器端接收到请求后，根据请求的 URL 路径，调用相

应的处理程序，如 Java、PHP、Python 等。

1.2 Web 开发技术体系

Web 开发相关技术包括客户端技术、服务器端技术，以及持久层技术，如图 1-6 所示。

- 持久层技术：包括 MySQL、JDBC、数据库连接池、DBUtils 等。

本书主要介绍客户端技术、服务器端技术和持久层技术，SQL 语言对于有一定 Java 基础的开发人员来说，相信不会陌生，这里将不再赘述。

Web 开发既包括前端页面开发，又包括后端接口实现。

1.2.1 客户端技术

下面对客户端相关技术进行简单介绍。

HTML、CSS 和 JavaScript 俗称 “前端三剑客”。HTML 负责页面的整体骨架和内容展示；CSS 负责美化页面，让内容展示得更美观；JavaScript 则负责页面的逻辑代码部分，如页面的动态修改行为等。学习了这三项技术就能搭建出简单的静态页面。

1. HTML

HTML 的全称为 HyperText Markup Language，中文名称为超文本标记语言。超文本标记语言不是编程语言，没有逻辑可言，只是一套标记语言。标记语言就是预先设定好了一些标签，有对应的显示效果而已。HTML 文件也称作 Web 页面，其只包含文本和标签，基本结构包括文档头、 标签、 标签、 标签等。

2. CSS

CSS 的全称为 Cascading Style Sheet，中文名称为层叠样式表。它是由 W3C 协会制定并发布的一个网页排版式标准，是对 HTML 语言功能的补充。CSS 是用来描述 HTML 文档样式的一种标记型语言，描述了在媒体上的标签应该如何被渲染。本书将重点介绍 CSS 基本语法及简单应用。

3. JavaScript

JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、解释型的、基于对象的脚本语言。JavaScript 脚本语言不依赖操作系统，仅需要浏览器的支持。目前，JavaScript 已被大多数的浏览器所支持。也就是说，只要机器上的浏览器支持 JavaScript 脚本语言，JavaScript 脚本在编写后就可以带到任意机器上使用。

虽然它外观看起来像 Java，且 JavaScript 的语法与 Java 是大致相仿的，但除此之外这两门编程语言之间没有任何联系。

4. Vue

Vue 是一套用于构建用户界面的渐进式框架，同时也是一个 JavaScript 框架。Vue 框架遵循前后端分离的开发理念，是轻量级的，有很多独立的功能或库，使用 Vue 时可以根据项目需求来选用它的一些功能。一方面，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合；另一方面，当与现代化的工具链，以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

5. AJAX

AJAX 的全称为 Asynchronous JavaScript And XML。Asynchronous 指 “异步的”，顾名思义，AJAX 指的是异步的 JavaScript 和 XML。它是一种创建交互式网页应用的网页开发技术。简单来说，AJAX 是一种用于创建快速动态网页的技术，它可以令开发者只向服务器端获取数据。

使用原生的 JavaScript 程序执行 AJAX 极其烦琐，为了降低 XMLHttpRequest 的 AJAX 请求封装复杂性，以及便于后续增加请求响应等拦截器的常用功能，还可以考虑使用第三方类库 Axios。

6. Axios

Axios 是目前最流行的前端 AJAX 框架之一。Axios 是一个独立开发功能目标明确的请求类库，它基于 Promise，是一个既可用于浏览器，又可用于 Node.js 服务器的 HTTP 请求模块。希望大家通过学习了解 AJAX 异步请求和渲染数据的过程，掌握 Axios 框架的使用，能够编写代码实现向前端页面响应数据。

1.2.2 服务器端技术

下面对服务器端相关技术进行简单介绍。

1. XML 配置文件

XML 的全称为 Extensible Markup Language，叫作可扩展标记语言。它和前面提到的 HTML 很相似，都属于标记语言，不过两者用途不同，HTML 主要是用来显示页面数据的，而 XML 用来传输和存储数据。XML 技术由 W3C 组织发布，目前推荐遵守的是 W3C 组织于 2000 年发布的 XML 1.0 规范。它是独立于软件和硬件的信息传输工具，并且作为一种纯文本格式，应用十分广泛，有能力处理纯文本的软件都可以处理 XML。

XML 作为独立于软件和硬件的信息传输工具，它可以存储数据、作为数据交换的载体，但最常见的还是作为配置文件使用，给应用程序提供配置参数的文件，并且还可以初始化设置一些有特殊格式的文件。

2. Tomcat 服务器

本书介绍的 Web 服务器为 Tomcat 服务器，它是一个免费开源的 Web 服务器，属于轻量级应用服务器，在很多中小型系统中被普遍使用。因为 Tomcat 是由 Java 代码编写的，所以还需要准备 JDK 环境。另外，为了提高开发效率，本书将借助 IntelliJ IDEA（简称 IDEA）开发工具编写 Java 程序。

Tomcat 是 Apache 软件基金会（Apache Software Foundation）的 Jakarta 项目中的一个核心项目，由 Apache、Sun 和其他一些公司及个人共同开发而成。由于 Sun 的参与和支持，最新的 Servlet 和 JSP 规范得以在 Tomcat 中体现。由于 Tomcat 技术先进、性能稳定，而且免费，因而深受 Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的 Web 应用服务器。

3. HTTP

HTTP，全称为 Hyper Text Transfer Protocol，中文名称为超文本传输协议，是一个属于应用层的面向对象的协议。它适用于分布式超媒体信息系统，经过十几年的使用与发展，得到不断完善和扩展。

HTTP 是学习 JavaWeb 开发的基石，不了解 HTTP，就不能说掌握 Web 开发。绝大多数的 Web 开发，都是构建在 HTTP 之上的 Web 应用。在 Web 开发过程中，要涉及客户端与服务端的交互，这要求我们对 HTTP 应有深入的了解。理解和掌握 HTTP，将有助于我们更好地学习和掌握 Servlet 技术，以及其他相关的 Web 开发技术，这也是我们学习 HTTP 的目的所在。

4. Servlet 核心技术

Servlet 是 Server Applet 的简称，称为小服务程序或服务连接器，是使用 Java 语言编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成动态 Web 内容。在整个 Web 应用中，Servlet 主要负责接收处理请求、协同调度，以及响应数据。因此，我们可以把 Servlet 称为 Web 应用中的控制器。

由于 Web 开发基于 HTTP，而 Servlet 规范其实就是对 HTTP 面向对象的封装，Servlet 实现了接收客户端的请求数据，并生成响应结果最终返回给客户端的过程。同时，Servlet 也是本书的一个重点内容，主要包括 Servlet 的生命周期、体系结构、请求与响应，以及如何应用等。

Servlet 章节涉及很多源码分析和相关接口。例如，ServletConfig 接口，用于封装 Servlet 的配置信息；ServletContext 接口，代表 Servlet 上下文，即当前 Web 应用；HttpServletResponse 接口是 ServletRequest 接口的子接口，封装了 HTTP 请求的相关信息；HttpServletResponse 接口是 ServletResponse 接口的子接口，封装了服务器端针对于 HTTP 响应的相关信息。

5. Thymeleaf 页面渲染

Thymeleaf 是一个现代化的、在服务器端渲染 XML/XHTML/HTML5 等内容的 Java 模板引擎。类似 JSP、

Velocity、FreeMaker 等，它也可以轻易地与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。它的主要作用是在静态页面上渲染显示动态数据。面向于后端开发人员，它是一个自然语言的模板，语法非常简单，相比其他模板引擎，上手较快，比较适合简单的单体应用。不足之处在于，Thymeleaf 不是高性能的模板引擎，如果我们要开发高并发应用，并且需要实现页面跳转功能，最好使用前后端分离技术。

值得一提的是，Thymeleaf 是 SpringBoot 官方推荐使用的视图模板技术，能够与 SpringBoot 完美整合，而且 Thymeleaf 不经过服务器端运算仍然可以直接查看原始值，对于前端工程师而言，其同样很友好。

6. 会话控制技术

会话控制是一种面向连接的可靠通信方式，通常根据会话控制记录判断用户登录的行为。一次会话，是指从浏览器开启到浏览器关闭的整个过程，在此期间，浏览器和服务器之间会发生连续的一系列请求和响应，就像从拨通电话到挂断电话聊天的全过程。Web 应用的会话状态是指服务器与浏览器在会话过程中产生的状态信息。

会话控制涉及两类会话技术。一类是客户端的会话技术，实现把会话数据保存在客户端的操作，如 Cookie 技术。Cookie 是通过 HTTP 扩展实现的，即在 HTTP 请求头里面增加 Cookie 字段，用于存储客户端信息。另一类是服务端的会话技术，实现把会话数据保存在服务端的操作，如 Session 技术。Session 是基于 Cooke 的，在 Cookie 基础上做了进一步完善，解决了 Cookie 的一些局限问题。

7. Filter（过滤器）和 Listener（监听器）

JavaWeb 的三大组件分别是 Servlet、Filter 和 Listener。过滤器是 JavaWeb 技术中最为实用的技术之一。过滤器是一个实现了特殊接口 Filter 的 Java 类，其作用是对目标资源进行过滤，即实现对 Servlet、JSP、HTML 文件等请求资源的过滤功能。它是一个运行在服务器端的程序，优先于 Servlet、JSP 或 HTML 文件等请求资源执行。Servlet API 中，提供了大量的监听器来监听 Web 应用事件，其中 Listener 实现类是最为常用的。

以上就是 Web 开发涉及的所有技术点，本书第 14 章还提供了一个书城项目的综合案例，融合了全书所有内容，带领大家动手实践，以进一步了解 JavaWeb 在实际开发中的应用。

1.3 本章小结

本章主要对 Web 开发相关内容进行了概述，介绍了网络应用程序的两种常见体系结构，一种是基于客户端 / 服务器端的 C/S 结构，另一种是基于浏览器 / Web 服务器的 B/S 结构。本书还介绍了 Web 程序开发属于 B/S 结构，以及 Web 开发的工作原理，并介绍了服务器端和客户端、请求与响应等相关知识，还介绍了本书涉及的 Web 开发技术，包括客户端技术和服务器端技术。