源 | 愚公要移山(ID:fdd_sxu_nwpu)
jsp技术作为曾经一度火爆的技术,在最近几年确实使用率越来越低了,这篇文章带你一块探究一下jsp的从生到死。
jsp技术的诞生
在很久很久以前,那时候我们的开发都是通过servlet来完成的,这个servlet是什么呢?我们先来认识一下:
servlet用Java语言编写的服务器端程序。主要功能是和浏览器进行交互,生成页面展示。
长下面这个样子:
public class HelloWorld extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter;
out.println("<html>");
out.println("<head>");
out.println("<title>Hello World</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Hello World!</h1>");
out.println("</body>");
out.println("</html>");
}
}
我们可以看到前端所展示的页面,需要我们servlet去一个标签一个标签去生成,如果一个页面超级复杂,动不动几千行代码,那这个servlet效率也就太低了。而且整个servlet代码也会十分臃肿而且可读性非常差。
这时候怎么办呢?sun公司很早就意识到了这个问题,于是便倡导很多公司一块来创建了一种能够动态生成html的新技术,不久之后jsp便诞生了。有效率的解决了上面servlet所出现的问题。
jsp的发展
既然jsp技术能够解决刚刚servlet代码里面所出现的技术,我们来看一下是如何解决的:在这里我们举一个小例子,就是前端jsp向服务器servlet发送请求图书页面的功能。
首先我们看一下servlet:
public class List_book extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//声明一个ArrayList.用来存放Book类中的数据
ArrayList<Book> list = new ArrayList<Book>;
for(int i=0;i<10;i++){
Book book = new Book;
book.setName(res.getString("name"+i));
book.setAuthor(res.getString("author"+i));
list.add(book);
}
//将list数据发送到.jap文件中
request.getRequestDispatcher("ListBook.jsp").forward(request, response);
}
}
我们会发现,现在的servlet没有一点html代码了。我们只需要把数据交给jsp。此时我们的页面展示就交给jsp来做了。现在我们来看一下jsp长什么样子:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%String path = request.getContextPath;%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="description" content="This is my page">
<script></script>
</head>
<body>
<% ArrayList list = (ArrayList) request.getAttribute("list"); %>
<h2 align = "center">图书列表</h2>
<table border = 1px align = "center">
<tr><th>图书名称</th><th>图书作者</th></tr>
<!-- 继续使用jsp语句 循环放入存放于list中的Book实体类中的数据 -->
<%
for(int i = 0;i<list.size;i++){
Book book =(Book)
list.get(i);%>
<tr><th><%=book.getName %></th><th><%=book.getAuthor%></th><tr>
}
%>
</table>
</body>
</html>
这就是jsp,我们可以在html页面中写一些java代码。对于我们程序员来说,在开发当中静态的页面我们只需要用html和css写一些标签来展示即可,对于那些动态的部分我们就可以使用java代码。
那么jsp和servlet是不是就是这种协作的关系,本质上有什么区别呢?
其实jsp只是servlet的一种特殊形式,每一个jsp页面就是一个servlet实例,通俗一点的话来说:jsp就是servlet,只不过servlet把一些业务功能剥离开来交给了或者是形成了jsp。明白了吧。在我们的项目编译的时候就是把jsp编译成了servlet。
你们会发现,这样做其实挺好的,市场也验证了一切,很快jsp技术流行开来,可是随着时间的流逝,业务越来越复杂,jsp也开始跟不上时代了。
jsp的危机
我们先看一个对话场景:
java程序员:终于写完了功能,是时候在界面上展示了。
前端程序员:你功能写完了,我没有数据,在页面什么没法展示呀
java程序员:数据我写好了,你在jsp中调用XX方法就能获取了,
前端程序员:我已经在jsp中写好了这个方法,你为什么自己写了?
于是乎,无穷无尽的争吵还在继续当中。
这就是jsp的弊端,为什么呢?我们可以来总结一下:
(1)动态和静态资源放在一起,一旦服务器出现状况,前后台一起玩完,用户体验极差。
(2)一旦jsp出现了问题,就需要前端后端发开人员一块来分析解决,效率低。
(3)jsp无法使用nginx等。
(4)jsp页面复杂,难以修改。
(5)第一次加载jsp需要编译成servlet,时间久,而且业务量大的时候,jsp负担太大。
(6)jsp对于开发人员简直就是一个挥之不去的痛,太难了!!!
鉴于以上缺点,于是另外一套机制横空出世了,这就是前后端分离。什么是前后端分离呢?
前后端分离其实就是后端工程师只关注于后端页面的开发,不再处理前端问题。前端工程师只关注于自己的页面开发。需要数据交互的时候,两者会有一份接口文档。
就这样这种思想架构很快的流行开来,这也就是为什么jsp落寞的真正原因。从此java从jsp转向了restful结构,springMCV也开始流行开来,并逐渐占领了市场。前后端分离有什么优点呢?我们来总结一下:
(1)动态和静态资源分开存储。
(2)出现bug能很快定位是前端还是后端。
(3)支持nginx。在高并发状态下极其优秀。
(4)直接请求页面,不用编译,速度效率都提上来了。
(5)从此前端和后端是相亲相爱的一家人了!!!!
jsp的落幕
又随着时间的推移,jsp的时代基本上一去不复返了,因为我们又走入了移动互联时代,这时候的客户端可不是前端页面了,还包括手机、汽车、电视等等各种设备,这种情况下,前后端必须要分离了。jsp基本上彻底告别了它的舞台。
随着容器技术(docker、k8s)以及微服务架构逐步成熟和发展,这种强调后端分离思想让jsp这个陪伴我近10年的页面渲染技术宣告落幕了,有点伤感。。。
1、无法做到动静分离
传统java程序通过war包形式部署到tomcat,除了java代码和jsp页面,还包括css、js、图片等静态资源,一旦其中的某个jsp页面出问题,会导致部分功能不可用,甚至服务器响应阻塞,无法对外提供服务。
2、分工协调性差
jsp本质上是一个java类,所以早期java开发人员是前后端开发任务全负责,而UI设计师把设计好的html页面给开发人员集成,这个需要双方共同协调完成,效率低下,很难完成需求快速更新迭代,持续交付。
3、并发、吞吐量差
由于jsp本质是java类,只能放在web服务器(如tomcat),所以jsp不能部署到并发性能更好的nginx或者apache下,这是很多人诟病java web性能不好的原因之一。
4、扩展性差
jstl内置的一些tag标签耦合java代码(类似于react中的component组件),很难做到只修改页面而不用修改java代码,扩展性很差。
5、页面加载慢(同步机制)
如果一个页面承载的内容很多(如表单、表格、详情),会导致页面加载很慢。究其原因是jsp内在特性决定的。
jsp初始化流程
首先,jsp页面会初始化为servlet的class文件
其次,在servlet代码中解析jsp tag标签,转换成html网页标签
最后,以流的方式输出html网页
这里有个要命的问题,从jsp转换成html到浏览器渲染是一个同步过程。也就是说,如果数据加载很慢,会导致整个页面出不来。
1、动静分离,前端软负载架构
后端代码(如java)和前端(html、js、css、图片等)分离,单独部署。
前端程序强调静态资源,会单独部署到抗压能力更强的nginx下。而后端程序由于剥离了页面、js、css、图片,以接口形式对外提供服务,
服务能力下沉(基础平台能力,sass服务化能力)。
2、分工明确
3、异步加载机制
如果页面需要多次ajax调用,不需要同步进行,异步加载实现局部刷新。
4、组件化
以react、vue、angular为代表前端框架,提出组件化、框架化、复用性等工程化编程,使的前端也可以像后端那样提供可复用性、可扩展性、高可用性的前端程序。
笔者认为,前后端分离思想是一种趋势,更深层次是技术更新很快,我们要与时俱进,时刻更新自己的知识库。当然对于之前不了解jsp的同学还是要去学习下,毕竟很多技术发展是有继承性的。
如果觉得本文对您有帮助的话,记得关注、转发哦,我会为大家持续提供原创干货。需要资料,请关注、转发,私信“资料”面试+微服务+springboot资料免费赠送。
言:
为了后续的代码审计一些常用的框架和技术都是有必要了解一下,在此重拾Spring Boot等开发知识内容。
Thymeleaf是一个现代的服务器端Java模板引擎的web和独立的环境,能够处理HTML, XML, JavaScript, CSS,甚至纯文本。
Thymeleaf的主要目标是提供一种优雅的和高度可维护的方式来创建模板。为了实现这一点,它构建在自然模板的概念上,以不影响模板作为设计原型使用的方式将其逻辑注入模板文件。这改进了设计的交流,并在设计和开发团队之间架起了桥梁。
Thymeleaf的设计从一开始就考虑了Web标准,尤其是HTML5
Thymeleaf是一个非常可扩展的模板引擎(事实上它可以被称为模板引擎框架),它允许你定义和自定义的方式,你的模板将被处理到一个精细的细节级别。
将一些逻辑应用到标记工件(标记、一些文本、注释,如果模板不是标记,则仅仅是占位符)的对象称为处理程序,这些处理程序的集合—加上一些额外的工件—通常是方言的组成部分。Thymeleaf的核心库提供了一种称为标准方言的方言,这对大多数用户来说应该足够了。
这里主要以Srping Boot为主
<!--引入thymeleaf依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在项目的resources\templates目录下创建HTML文件,这里注意导入thymeleaf的命名空间,否则无法进行模板的渲染。
<!doctype html>
<!--注意:引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p th:text="'hello SpringBoot'">hello thymeleaf</p>
</body>
</html>
编写Controller
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("home")
public String index() {
return "index";
}
}
这里的注解需要使用@Controller,不能使用@RestController注解,否则会报错.
<span th:text="${book.author.name}">
<li th:each="book : ${books}">
@{/order/list}
@{/order/details(id=${orderId})}
或者是
<form th:action="@{/createOrder}">
<a href="main.html" th:href="@{/main}">
#{main.title}
#{message.entrycreated(${entryId})}
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
th标签属性
1)th:text:文本替换;
2)th:utext:支持html的文本替换。
3)th:value:属性赋值
4)th:each:遍历循环元素
5)th:if:判断条件,类似的还有th:unless,th:switch,th:case
6)th:insert:代码块引入,类似的还有th:replace,th:include,常用于公共代码块提取的场景
7)th:fragment:定义代码块,方便被th:insert引用
8)th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。
9)th:attr:设置标签属性,多个属性可以用逗号分隔
内容比较简单,主要作为记录。
*请认真填写需求信息,我们会在24小时内与您取得联系。