JSP 學習筆記 | 二、JSP 指令碼 & 案例實現 & 缺點分析
JSP指令碼用於在 JSP頁面內定義 Java程式碼。很多入門案例中我們就在 JSP 頁面定義的 Java 程式碼就是 JSP 指令碼。
JSP 指令碼分類
JSP 指令碼有如下三個分類：
- <%...%>：內容會直接放到_jspService()方法之中
- <%=…%>：內容會放到out.print()中，作為out.print()的引數
- <%!…%>：內容會放到_jspService()方法之外，被類直接包含
程式碼演示：
在 hello.jsp 中書寫
<% System.out.println("hello,jsp~"); int i = 3; %>
通過瀏覽器訪問 hello.jsp 後，檢視轉換的 hello_jsp.java 檔案，i 變數定義在了 _jspService() 方法中
在 hello.jsp 中書寫
<%="hello"%>
<%=i%>
通過瀏覽器訪問 hello.jsp 後，檢視轉換的 hello_jsp.java 檔案，該指令碼的內容被放在了 out.print() 中，作為引數
在 hello.jsp 中書寫
<%!
void show(){}
String name = "zhangsan";
%>
通過瀏覽器訪問 hello.jsp 後，檢視轉換的 hello_jsp.java
案例
使用JSP指令碼展示品牌資料
注意：在該案例中資料不從資料庫中查詢，而是在 JSP 頁面上寫死
案例實現
-
編寫
Brand.java檔案並放置在專案的com.riotian.pojo包下/** * 品牌實體類 */ public class Brand { // id 主鍵 private Integer id; // 品牌名稱 private String brandName; // 企業名稱 private String companyName; // 排序欄位 private Integer ordered; @Override public String toString() { return "Brand{" + "id=" + id + ", brandName='" + brandName + '\'' + ", companyName='" + companyName + '\'' + ", ordered=" + ordered + ", description='" + description + '\'' + ", status=" + status + '}'; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBrandName() { return brandName; } public void setBrandName(String brandName) { this.brandName = brandName; } public String getCompanyName() { return companyName; } public void setCompanyName(String companyName) { this.companyName = companyName; } public Integer getOrdered() { return ordered; } public void setOrdered(Integer ordered) { this.ordered = ordered; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public Integer getStatus() { return status; } public void setStatus(Integer status) { this.status = status; } // 描述資訊 private String description; // 狀態：0：禁用 1：啟用 private Integer status; public Brand() { } public Brand(Integer id, String brandName, String companyName, String description) { this.id = id; this.brandName = brandName; this.companyName = companyName; this.description = description; } public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) { this.id = id; this.brandName = brandName; this.companyName = companyName; this.ordered = ordered; this.description = description; this.status = status; } }- 在專案的
webapp中建立brand.jsp，並將下面內容拷貝過來。brand.jsp內容如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="新增"><br> <hr> <table border="1" cellspacing="0" width="800"> <tr> <th>序號</th> <th>品牌名稱</th> <th>企業名稱</th> <th>排序</th> <th>品牌介紹</th> <th>狀態</th> <th>操作</th> </tr> <tr align="center"> <td>1</td> <td>三隻松鼠</td> <td>三隻松鼠</td> <td>100</td> <td>三隻松鼠，好吃不上火</td> <td>啟用</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <tr align="center"> <td>2</td> <td>優衣庫</td> <td>優衣庫</td> <td>10</td> <td>優衣庫，服適人生</td> <td>禁用</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <tr align="center"> <td>3</td> <td>小米</td> <td>小米科技有限公司</td> <td>1000</td> <td>為發燒而生</td> <td>啟用</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> </table> </body> </html>現在頁面中的資料都是假資料。
- 在專案的
-
在
brand.jsp中準備一些資料，注意：這裡的類是需要導包的<% // 查詢資料庫 List<Brand> brands = new ArrayList<Brand>(); brands.add(new Brand(1,"三隻松鼠","三隻松鼠",100,"三隻松鼠，好吃不上火",1)); brands.add(new Brand(2,"優衣庫","優衣庫",200,"優衣庫，服適人生",0)); brands.add(new Brand(3,"小米","小米科技有限公司",1000,"為發燒而生",1)); %> -
將
brand.jsp頁面中的table標籤中的資料改為動態的<table border="1" cellspacing="0" width="800"> <tr> <th>序號</th> <th>品牌名稱</th> <th>企業名稱</th> <th>排序</th> <th>品牌介紹</th> <th>狀態</th> <th>操作</th> </tr> <% for (int i = 0; i < brands.size(); i++) { //獲取集合中的 每一個 Brand 物件 Brand brand = brands.get(i); } %> <tr align="center"> <td>1</td> <td>三隻松鼠</td> <td>三隻松鼠</td> <td>100</td> <td>三隻松鼠，好吃不上火</td> <td>啟用</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> </table>上面的for迴圈需要將
tr標籤包裹起來，這樣才能實現迴圈的效果，程式碼改進為<table border="1" cellspacing="0" width="800"> <tr> <th>序號</th> <th>品牌名稱</th> <th>企業名稱</th> <th>排序</th> <th>品牌介紹</th> <th>狀態</th> <th>操作</th> </tr> <% for (int i = 0; i < brands.size(); i++) { //獲取集合中的 每一個 Brand 物件 Brand brand = brands.get(i); %> <tr align="center"> <td>1</td> <td>三隻松鼠</td> <td>三隻松鼠</td> <td>100</td> <td>三隻松鼠，好吃不上火</td> <td>啟用</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <% } %> </table>注意：<%%> 裡面寫的是 Java 程式碼，而外邊寫的是 HTML 標籤
上面程式碼中的
td標籤中的資料都需要是動態的，所以還需要改進<table border="1" cellspacing="0" width="800"> <tr> <th>序號</th> <th>品牌名稱</th> <th>企業名稱</th> <th>排序</th> <th>品牌介紹</th> <th>狀態</th> <th>操作</th> </tr> <% for (int i = 0; i < brands.size(); i++) { //獲取集合中的 每一個 Brand 物件 Brand brand = brands.get(i); %> <tr align="center"> <td><%=brand.getId()%></td> <td><%=brand.getBrandName()%></td> <td><%=brand.getCompanyName()%></td> <td><%=brand.getOrdered()%></td> <td><%=brand.getDescription()%></td> <td><%=brand.getStatus() == 1 ? "啟用":"禁用"%></td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <% } %> </table>
完整程式碼
<%--
Created by IntelliJ IDEA.
User: 64129
Date: 2021/12/5
Time: 18:04
--%>
<%@ page import="com.riotian.pojo.Brand" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
// 查詢資料庫
List<Brand> brands = new ArrayList<Brand>();
brands.add(new Brand(1, "三隻松鼠", "三隻松鼠", 100, "三隻松鼠，好吃不上火", 1));
brands.add(new Brand(2, "優衣庫", "優衣庫", 200, "優衣庫，服適人生", 0));
brands.add(new Brand(3, "小米", "小米科技有限公司", 1000, "為發燒而生", 1));
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Brand.jsp</title>
</head>
<body>
<input type="button" value="新增"><br>
<hr>
<table border="1" cellspacing="0" width="800">
<tr>
<th>序號</th>
<th>品牌名稱</th>
<th>企業名稱</th>
<th>排序</th>
<th>品牌介紹</th>
<th>狀態</th>
<th>操作</th>
</tr>
<%
for (int i = 0; i < brands.size(); i++) {
//獲取集合中的 每一個 Brand 物件
Brand brand = brands.get(i);
%>
<tr align="center">
<td><%=brand.getId()%></td>
<td><%=brand.getBrandName()%></td>
<td><%=brand.getCompanyName()%></td>
<td><%=brand.getOrdered()%></td>
<td><%=brand.getDescription()%></td>
<td><%=brand.getStatus() == 1 ? "啟用":"禁用"%></td>
<td><a href="#">修改</a> <a href="#">刪除</a></td>
</tr>
<%
}
%>
</table>
</body>
</html>
執行測試
在瀏覽器位址列輸入 http://localhost:8080/jsp-demo/brand.jsp ，頁面展示效果如下
JSP 缺點
通過上面的案例，我們可以看到 JSP 的很多缺點。
由於 JSP頁面內，既可以定義 HTML 標籤，又可以定義 Java程式碼，造成了以下問題：
-
書寫麻煩：特別是複雜的頁面
既要寫 HTML 標籤，還要寫 Java 程式碼
-
閱讀麻煩
上面案例的程式碼，相信你後期再看這段程式碼時還需要花費很長的時間去梳理
-
複雜度高：執行需要依賴於各種環境，JRE，JSP容器，JavaEE…
-
佔記憶體和磁碟：JSP會自動生成.java和.class檔案佔磁碟，執行的是.class檔案佔記憶體
-
除錯困難：出錯後，需要找到自動生成的.java檔案進行除錯
-
不利於團隊協作：前端人員不會 Java，後端人員不精 HTML
如果頁面佈局發生變化，前端工程師對靜態頁面進行修改，然後再交給後端工程師，由後端工程師再將該頁面改為 JSP 頁面
由於上述的問題， JSP 已逐漸退出歷史舞臺，以後開發更多的是使用 HTML + Ajax 來替代。Ajax 是我們後續會重點學習的技術。有個這個技術後，前端工程師負責前端頁面開發，而後端工程師只負責前端程式碼開發。下來對技術的發展進行簡單的說明
-
第一階段：使用
servlet即實現邏輯程式碼編寫，也對頁面進行拼接。這種模式我們之前也接觸過 -
第二階段：隨著技術的發展，出現了
JSP，人們發現JSP使用起來比Servlet方便很多，但是還是要在JSP中巢狀Java程式碼，也不利於後期的維護 -
第三階段：使用
Servlet進行邏輯程式碼開發，而使用JSP進行資料展示 -
第四階段：使用
servlet進行後端邏輯程式碼開發，而使用HTML進行資料展示。而這裡面就存在問題，HTML是靜態頁面，怎麼進行動態資料展示呢？這就是ajax的作用了。
那既然 JSP 已經逐漸的退出歷史舞臺，那我們為什麼還要學習 JSP 呢？原因有兩點：
- 一些公司可能有些老專案還在用
JSP，所以要求我們必須動JSP - 我們如果不經歷這些複雜的過程，就不能體現後面階段開發的簡單
The desire of his soul is the prophecy of his fate
你靈魂的慾望，是你命運的先知。