用java做一个jsp界面类似流程图的界面_Java Web的演变：大魏Java记3

一、从Java到Tomcat

我们知道，Java分为JavaME(这个主要是做一些嵌入式的程序，我们不关注)，JavaSE，JavaEE三大类。JavaSE和JavaEE的区别如下图所示，我们可以得出这个结论：

从涵盖范畴角度看：JavaSE< Web Container < Java EE Webprofile < Java EE full proile(最外侧的框)。

我们在下载SDK的时候，可以看到有Platform SDK和Web Profile SDK。

Web Profile是Java给Web应用程序用的profile，其中不包含Web应用不常使用的组件，如JMS。

那么，现代的Web应用是否使用JavaEE Webprofile呢？大多不是。

大多只使用Web Container。我们接触到的最常见的Web Container就是Tomcat。需要注意的是，Tomcat属于JavaEE，但它只包含部分的JavaEE类库，如Servlet和JSP等。接下来，我们就从Tomcat入手，介绍Web应用的前端。

二、Tomcat

Tomcat目前最近的正式版是Tomcat9。实际上，Tomcat 9 for Linux的安装包非常精简，只有11M，如下所示：

Tomcat的版本发展历史如下：

我们查看安装好的tomcat9的类库(jar包)，由于内容较多，只显示主要的：

root@repo lib]# ls -al

-rw-r-----.  1 tomcat tomcat   54692 Nov 12 15:38 catalina-ant.jar

-rw-r-----.  1 tomcat tomcat   63813 Nov 12 15:38 jsp-api.jar

-rw-r-----.  1 tomcat tomcat   75187 Nov 12 15:38 tomcat-i18n-de.jar

-rw-r-----.  1 tomcat tomcat  149747 Nov 12 15:38 tomcat-jdbc.jar

-rw-r-----.  1 tomcat tomcat  234433 Nov 12 15:38 tomcat-websocket.jar

-rw-r-----.  1 tomcat tomcat   40042 Nov 12 15:38 websocket-api.jar

• 在上面的jar包中，我们看到很多catalina开头的。Catalina是Tomcat的servlet容器实现，Catallina和Tomcat的关系大致是发动机和汽车的关系。

• 上面jar包中jsp的jar。

• 中间名为i18n的jar，主要功能是实现语言及地区显示相应的界面的国际化。

Tomcat本身包含Http Server、包含JavaEE中的Servlet、JSP类库(JDBC是JavaSE中的类库)。我们在Linux上安装Tomcat时，需要将Linux自动的Http Server停掉。

三、前端页面：XML与HTML？

XML是W3C指定的一种数据交换格式，它是一种可扩展的标记语言。XML的全称是EXtensible Markup Language的缩写。

使用XML表示树状结构很方便。举个例子，我们可以用xml文件显示城市的层级关系：

层级关系：

用xml书写：

xml有很多语法，这里我们就不展开说了。

HTML也是标记文本，架构与XML类似，都是以标记的形式来描述信息。但两者之间有本质区别，如下：

1. XML中的标记用来显示数据；XML中的标记用来描述数据的性质和结构。

2. HTML不区分大小写;XML严格区分大小写

3. HTML可以有多个根元素，XML只有一个根元素

4. HTML中属性的引号可以有客户，XML中的属性必须放在引号中

5. HTML中空格自动过滤；XML中空格不自动删除。

6. HTML中的标记是预定义的；XML中的标记可以随意定义，并且可扩展。

那么，前端网页是使用HTML还是XML呢？

实际上，现在主流使用的是XHTML。也就是HTML和XML的混合体。它完全采用XML的语法规则来编写Web页面，有效结合HTML的简单性和XML的可扩展性。我们可以将XHTML理解成XML在Web领域的一种应用。

四、B/S架构与Web资源

现在应用大多数都是B/S架构了(而不是C/S架构)，如下图所示，这也是比较典型的三层架构：

而浏览器与Web Server的通讯过程，如下图所示：

我们将放在Internet上供外界访问的文件或者程序成为Web资源，根据呈现结果不同，“传统方法”分为：

• 静态资源：Html、CSS、JPG

• 动态资源：JSP、Servlet

在Web前端的开发中，动态页面的实现很重要。以前主要采用JSP/Servlet的方式，现在更多的采用动态HTML的方式。这两种方式的本质区别是：

JSP的动态效果实现，是由服务器端的程序实现的。而动态HTML，是浏览器侧执行脚本实现的。

如下案例所示。

下面第一个是通过动态显示日期，是通过浏览器执行脚本的结果。

下面第二个是通过java程序实现的。

五、Servlet与JSP

如前文所述，Servlet主要是为了实现Web的动态资源。而JSP(全称是Java Server Page)，是建立在Servlet标准之上，为了解决Servlet在实现动态页面繁琐的问题而产生的，它也是动态页面的开发技术。

JSP在开发Web应用时，有两种架构：JSP Model1和Model2。

JSP Model1采用JSP+JavaBean的技术，将页面显示与业务逻辑分开。JSP实现流程控制和页面显示，JavaBean独享封装数据和业务逻辑，如下图所示：

通过上面这种模式，一定成熟上实现了程序开发的模块化，实现了业务逻辑和页面显示的分离。

Java为Servlet提供了一系列的接口和类，其中最重要的就是javax.servlet.Servlet接口。它是由Web容器负责创建并调用，用于接收和响应用户的请求。具体代码我们不展开介绍。

Servlet的生命周期如下：

浏览器访问Servlet的过程如下：

JSP Model1虽然实现了数据和部分业务逻辑从JSP页面分离，但JSP页面仍然需要负责流程控制和产生用户界面。结果是：JSP页面中依旧会嵌入大量的Java代码。因此当时Sun提出了JSP Model2。

Model2采用JSP+Servlet+JavaBean技术。它将原本的JSP页面中的流控提取出来，封装到Servlet中，从而实现整个程序页面显示、流程控制和业务逻辑的分离。

Model2就是MVC的设计模式。其中控制器的角色由Servlet实现、视图由JSP页面实现、模型的角色由JavaBean实现。

六、微服务时代的前端

JSP曾经风靡一时，在微服务时代，用的多么？

答案是：不多。

JSP的问题在哪？

前后端的开发不能分离！

在微服务时代，如果不能实现前后端的开发分析，那将是一种灾难。通过将全后端的开发分析后，前端只负责展现和交互，后端负责核心业务逻辑。前后端通过API进行交互，并且最好符合RESTful风格。服务器端把数据返回给前端就不再关心这些数据用在哪里、如何布局、什么样式。

现在主流的前端开发框架是AngulaJS(2009年诞生)。Angular是一个谷歌维护的JavaScript MVC框架，一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架，用于开发动态Web应用程序。

AngulaJS 等这些前端的流行主要是随着客户端计算资源的强大，浏览器客户端可以进行大量的计算，降低和服务器端的调用次数，客户端和服务器端做到相对解耦

Angular是一个MVC框架

1. Model模型 主要是负责业务数据的处理，前端项目中的表现为js变量

2. View视图 主要是业务数据在用户面前显示和数据的收集，前端项目中的表现为html代码。

3. Controller控制器 主要负责是业务数据的curd操作【操作模型里面的数据，调用模型来对数据处理】，协调模型和视图之间的关系，前端项目中的表现为function。

Angular适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定(data binding)，而且它能跟其它框架(如jQuery)合作融洽。

Angular依然可以运行在Tomcat上。Http server、Web container 都运行在服务端，客户端都需要通过浏览器访问，浏览器访问的时候会下载一些静态的资源(.html,. js)到客户端浏览器，下载到的.js .html会和后端java 代码进行通信，AngulaJS  就是浏览器会下载到客户端的静态资源。我们在客户端浏览器上的 AngulaJS，会通过点击按钮或等触发服务器调运，通常会返回一个 JSON 文件，AngulaJS 会将返回的 JSON 进行渲染展现成漂亮的界面。如下图所示。

传统单页面模式：

传统多页面模式：

我们知道REST 本来就是无状态的，AngulaJS + REST 返回 JSON，这提高了整体前后端的开发效率。实现了前端和后端解耦。

目前还有很多前端的开发框架，偏传统应用开发，还是 AngulaJS  多。

例如 node.js 等直接在前端完成 MVC，建模控制都在前端，后端单纯的业务逻辑处理，node.js + mongodb 战斗力远大于 JSP + Java 中间件 + Mysql/Oracle。具体内容不站看说明。

七、被前后夹击的JSP

上面我们提到，Java Web前端现在已经抛弃JSP。但Java Web后端其实也在抛弃JSP。

我们知道，在微服务时代，传统的Java系被大量使用的框架，主要是SpringBoot。从Spring 5开始，在原有的基于Servlet技术的Spring MVC之外增加了一个新的编程模型，就是Spring WebFlux。

Spring WebFlux 是 Spring Framework 5.0中引入的新的响应式web框架。与Spring MVC不同，它不需要Servlet API，是完全异步且非阻塞的，并且通过Reactor项目实现了Reactive Streams规范。Spring WebFlux 不支持Servlet API/JSP。当然，我们还可以用传统的spring-webmvc模式。

新旧两种模式的技术栈：

【spring-webmvc + Servlet/JSP + Tomcat】命令式的、同步阻塞的

【spring-webflux + Reactor + Netty】响应式的、异步非阻塞的

但是，SpringBoot官方是建议能不用JSP就不用JSP。

上面我们提到了Nettry。Netty和Tomcat最大的区别就在于通信协议，Tomcat是基于Http协议的，他的实质是一个基于http协议的web容器，但是Netty不一样，他能通过编程自定义各种协议，因为netty能够通过codec自己来编码/解码字节流，完成类似redis访问的功能，这就是netty和tomcat最大的不同。