整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
源 | 愚公要移山（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小時內與您取得聯系。
