day23-伺服器端渲染技術01

来源:https://www.cnblogs.com/liyuelian/archive/2022/11/24/16923240.html
-Advertisement-
Play Games

伺服器端渲染技術01 為什麼需要jsp？ 在之前的開發過程中，我們可以發現servlet做界面非常不方便： 引出jsp技術=> jsp=html+java代碼+標簽+javascript+css 1.JSP基本介紹 JSP全稱是Java Server Pages，Java的伺服器頁面，就是伺服器端渲 ...


伺服器端渲染技術01

  • 為什麼需要jsp？

在之前的開發過程中，我們可以發現servlet做界面非常不方便：

image-20221124163330498

引出jsp技術=> jsp=html+java代碼+標簽+javascript+css

1.JSP基本介紹

  1. JSP全稱是Java Server Pages，Java的伺服器頁面，就是伺服器端渲染技術
  2. JSP這門技術最大的特點在於，寫JSP就像在寫HTML
    • 相比HTML而言，HTML只能為用戶提供靜態數據，而JSP技術允許在頁面中嵌套java代碼，為用戶提供動態數據
    • 相比Servlet而言，Servlet很難對數據進行排版，而jJSP除了可以用java代碼產生動態數據的同時，也很容易對數據進行排版
  3. JSP技術基於Servlet，可以理解成JSP就是對Servlet的包裝，JSP的本質就是Servlet。
  4. 會使用JSP的程式員，再使用thymeleaf是非常容易的事情，幾乎是無縫接軌。

2.JSP的快速入門

2.1應用實例-jsp的基本使用

  1. 創建web項目，並引入jsp和servlet的jar包（servlet和jsp的jar包在tomcat安裝目錄下的lib目錄下）

    image-20221124165712122

  2. 創建的jsp文件應放在web目錄下麵

    image-20221124170710016

  3. 配置Tomcat

  4. 編寫jsp

    <%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/11/24
  Time: 16:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jsp簡單的求和計算器</title>
</head>
<body>
<h1>jsp簡單的求和計算器</h1>
<%
    //1. 在jsp中的該標簽內可以寫java代碼
    int i = 10;
    int j = 20;
    int res = i + j;
    //jsp的本質就是servlet，因此servlet可以使用的東西jsp都可以使用
    //2.jsp中內置了許多對象，可以直接使用，比如out
    out.print(i + "+" + j + "=" + res);
%>
</body>
</html>

  5. 運行Tomcat，在瀏覽器中訪問該jsp資源

    image-20221124171632523

2.1註意事項和細節

  1. jsp頁面不能像html頁面一樣，直接用瀏覽器運行。只能通過瀏覽器訪問Tomcat來訪問jsp頁面

  2. 如何設置jsp模板，設置完模板後，當你再去生成一個jsp文件後就會根據模板的內容自動生成文件頭

    image-20221124172111389image-20221124172653590

3.JSP的運行原理

  1. jsp頁面本質是一個Servlet程式（jsp本質就是java程式），其性能是和java相關的，只是長得醜

  2. 第一次訪問jsp頁面的時候，Tomcat伺服器會將jsp頁面解析成一個java源文件，並且將它編譯成一個.clsaa位元組碼程式。

    image-20221124174714789 image-20221124174415641

  3. 分析下sum_jsp.java源碼，可以看出jsp本質就是Servlet

    3.1可以看到sum_jsp類繼承了一個名叫HttpJspBase的類：

    image-20221124175054115

    想要看到源碼和分析類圖，需要加入jasper.jar包。這個包在tomcat/lib下拷貝

    3.2我們引入jasper.jar包，查看該類的類圖：

    image-20221124180936974

4.常用的jsp指令

image-20221124181454377
  1. language表示jsp翻譯後是什麼語言文件，只支持java
  2. contentType表示jsp返回的數據類型，對應源碼中response.setContentType()參數值
  3. pageEncoding屬性表示當前jsp頁面文件本身的字元集
  4. import屬性和java源代碼中一樣，用於導包，導類。

5.JSP三種常用腳本

5.1聲明腳本基本語法

  1. 聲明腳本的格式是：

    <%!  聲明java代碼  %>

  2. 作用：定義jsp需要的屬性，方法，靜態代碼塊和內部類等

應用實例

statement.jsp：

<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/11/24
  Time: 18:28
  Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jsp聲明腳本</title>
</head>
<body>
<h1>jsp聲明腳本</h1>
<%!
    //這裡我們可以聲明該jsp需要的屬性，方法，靜態代碼塊和內部類等，
    // 也就是給statement.jsp對應的statement_jsp類定義成員
    //1.屬性
    private String name = "jack";
    private int age;
    private static String company;

    //2.方法
    public String getName() {
        return name;
    }

    //3.靜態代碼塊
    static {
        company = "中國移動";
    }
%>
</body>
</html>

  1. 在瀏覽器中訪問該jsp頁面，在Tomcat啟動時的Using CATALINA_BASE：文件目錄下可以看到對應jsp文件生成的java文件：

    image-20221124184000637

  2. 打開該java文件，可以看到在jsp頁面中定義的屬性和方法等：

    image-20221124184113108

5.2表達式腳本基本語法

  1. 表達式腳本的格式是：

    <%=表達式%>

    表達式的概念和java基礎的表達式一樣，只要有一個具體的值返回，都可以稱之為一個表達式

  2. 表達式腳本的作用是：在jsp頁面上輸出數據

  3. 腳本中的表達式不能以分號結束

應用實例

expression.jsp：

<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/11/24
  Time: 18:47
  Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表達式腳本的使用</title>
</head>
<body>
<h1>表達式腳本的使用</h1>
<%
    String name = "一隻大貓咪";
    //可以在jsp頁面中動態獲取一些值，並將其展示出來
    String email = request.getParameter("email");
    //表達式可以是變數，常量，還可以是動態獲取的變數
%>
用戶名：<%=name%><br/>
工作是：<%="java工程師"%><br/>
年齡：<%=request.getParameter("age")%><br/>
郵箱：<%=email%>
</body>
</html>

訪問瀏覽器：http://localhost:8080/jsp/expression.jsp?age=100&[email protected]

image-20221124185738391

5.3代碼腳本基本語法

  1. 代碼腳本的語法是：

    <% java代碼 %>

  2. 代碼腳本的作用是：可以在jsp頁面中，編寫我們需要的功能（使用java）

  3. 可以由多個代碼腳本塊組合完成一個完整的java語句

  4. 代碼腳本還可以和表達式腳本一起組合使用，在jsp頁面上輸出數據

應用實例

在src文件夾下創建一個Monster類：

package com.li.entity;

public class Monster {
    private Integer id;
    private String name;
    private String skill;

    public Monster(Integer id, String name, String skill) {
        this.id = id;
        this.name = name;
        this.skill = skill;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSkill() {
        return skill;
    }

    public void setSkill(String skill) {
        this.skill = skill;
    }
}

javaCode.jsp：

<%@ page import="java.util.ArrayList" %>
<%@ page import="com.li.entity.Monster" %>
<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/11/24
  Time: 19:16
  Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>演示代碼腳本的使用</title>
</head>
<body>
<h1>演示代碼腳本的使用</h1>
<%
    //先創建ArrayList，放入兩個monster對象(使用的類會自動導入)
    ArrayList<Monster> monsterList = new ArrayList<>();
    monsterList.add(new Monster(1, "牛魔王", "芭蕉扇"));
    monsterList.add(new Monster(2, "蜘蛛精", "吐絲"));
%>
</body>
<%--tr 是行標簽，th是表頭標簽，td是單元格標簽--%>
<table bgcolor="#f0f8ff" border="1px" width="300px">
    <tr>
        <th>id</th>
        <th>名字</th>
        <th>技能</th>
    </tr>
    <%
        for (int i = 0; i < monsterList.size(); i++) {
            //先取出monster對象
            Monster monster = monsterList.get(i);
    %>
            <tr>
                <th><%=monster.getId()%></th>
                <th><%=monster.getName()%></th>
                <th><%=monster.getSkill()%></th>
            </tr>
         <%
        }
    %>
</table>
</html>

  1. 在瀏覽器訪問：http://localhost:8080/jsp/javaCode.jsp

    image-20221124193755004

  2. 在Tomcat啟動時的Using CATALINA_BASE：文件目錄下可以看到對應jsp文件生成的java文件。

    可以看到jsp文件中的for迴圈被解析成如下形式：

    image-20221124193531346

6.JSP註釋

jsp可以寫java代碼和html，可以使用java代碼的註釋，以及html的註釋<!--html註釋-->。此外還可以使用jsp自己的註釋方式<%--jsp註釋--%>

image-20221124194917143 image-20221124194901689

7.JSP的內置對象

  • 基本介紹

    1. JSP內置對象（已經創建好的對象，可以直接使用-inbuild），是指Tomcat在翻譯jsp頁面成為Servlet後，內部提供的九大對象，稱為內置對象
    2. 內置對象可以在jsp頁面直接使用，不需要手動定義

  • JSP九大內置對象

    1. out：向客戶端輸出數據，out.println("");
    2. request：客戶端的http請求
    3. response：響應對象
    4. session：會話對象
    5. application：對應 ServletContext
    6. pageContext：jsp頁面的上下文，是一個域對象，可以setAttribute()，作用範圍是本頁面
    7. exception：異常對象，getMessage()
    8. page：代表jsp這個實例本身
    9. config：對應ServletConfig

  • 對照Servlet來理解就輕鬆了

    只要學某個類，建議熟悉該類的繼承關係

    image-20221124200256204

應用實例

inbuild.jsp：

<%--
  Created by IntelliJ IDEA.
  User: li
  Date: 2022/11/24
  Time: 20:05
  Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jsp內置對象</title>
</head>
<body>
<h1>jsp內置對象</h1>
<%
    //jsp的內置對象
    //1.out 的類型是 JspWriter
    out.print("jsp out");
    //2.request 的類型是 HttpServletRequest
    request.getParameter("age");
    //3.response 的類型是 HttpServletResponse
    //response.sendRedirect("http://www.baidu.com");
    //4.session 的類型是 HttpSession
    session.setAttribute("中國", "北京");
    //5.application 的類型 ServletContext
    application.setAttribute("name", "jack");
    //6.pageContext 的類型是PageContext
    //該對象可以存放數據（屬性），但是該數據只能在本頁使用
    pageContext.setAttribute("age", 99);
    //7.exception：異常對象使用比較少，忽略
    //8.page 內置對象，類似this
    out.print("page對象= " + page);//org.apache.jsp.inbuild_jsp@2ac0d5df
    //9.config 的內置對象就是ServletConfig
    String password = config.getInitParameter("password");
%>
</body>
age：<%=pageContext.getAttribute("age")%>
</html>

對照一下servlet的對象使用，其實是大同小異的：

image-20221124203346898
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AR手勢識別交互，讓應用更加“得心應手”
    現如今， AR技術不斷發展，人們不再滿足於運用鍵盤、滑鼠等簡單器械來實現傳統的人機交互模式。隨著用戶接觸機器的多樣化，繁瑣的操作不但對一些用戶有門檻，而且還增加其學習成本；如果能用自然且符合日常生活習慣的人機交互模式，不僅更好上手，也能讓開發者們在應用內開發更多玩法。比如在視頻直播或者拍照過程中，一 ...
  • ES6對象的擴展
    對象中可以直接寫變數 ES6 允許在大括弧裡面，直接寫入變數和函數，作為對象的屬性和方法。 const foo = 'bar'; const obj = {foo}; //key值就是foo，value值是 foo變數對應的值 // 輸出的是 {foo: "bar"} console.log(obj ...
  • 記錄--uniapp 使用原生子窗體進行視頻聊天
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 現在 uniapp 開發的實時音視頻聊天類的 APP 大部分都要在 nvue 頁面上進行開發。雖然 nvue 與 vue 的區別不是很大，但還是有所差異的。 仔細查看了 uniapp 官網，發現了可以使用原生子窗體進行開發，可以把整個視頻 ...
  • 前端JavaScript初學者提升前端技能必須要練習的15個項目推薦，趕快收藏！！！
    要成為一名優秀的 Web 開發人員，最快的方法就是練習。一個很好的練習方法是儘可能多地構建初學者項目。那是因為每個項目都會提出一個獨特的問題和解決方案，因此您解決的項目越多，您獲得的知識就越多。將您完成的每個項目都視為您獲得的獎牌。您擁有的獎牌越多，您就越能準備好應對下一個難度更大的項目。 為了幫助 ...
  • 情侶紀念日網站html5源碼教程
    個人名片： 對人間的熱愛與歌頌，可抵歲月冗長:sun_with_face: Github👨🏻‍💻：念舒_C.ying CSDN主頁✏️：念舒_C.ying 個人博客:earth_asia: ：念舒_C.ying 預覽圖 直接進入我的網站吧 >> Z_C戀愛日記 下載源碼 鏈接：https:// ...
  • VUE3 自定義 輕量級全局數據共用方案之一 Provide&inject （簡單快速實現vuex功能）
    在vue2中，提供了provide和inject配置，可以讓開發者在高層組件中註入數據，然後在後代組件中使用 除了相容vue2的配置式註入，vue3在composition api 中添加了provide和inject方法，可以在setup函數中註入 和使用數據 基本使用 provide('key' ...
  • VUE3 全局共用數據方案之一 global state （簡單快速實現類似vuex）
    自定義 封裝單列模式！ global state 由於vue3的響應式系統本身可以脫離組件而存在，因此可以充分利用這一點，輕鬆製造多個全局響應式數據， 並且通過和vuex一樣 通過某個模塊指定方法修改數據，不能直接修改數據，並且讓數據成為全局響應式 並且在代碼體積上絕對的輕量級！比市面上的任何第三方 ...
  • 在Spring Security中如何獲取AuthenticationManager對象？
    一.小結 1.程式模塊化和可重用性是軟體工程的中心目標之一。java提供了很多有助於完成這一目標的有效結構。方法就是一個這樣的結構。 2.方法指定方法的修飾符，返回值類型，方法名和參數。比如靜態修飾符static。 3.方法可以返回一個值。返回值類型returnValueType是方法要返回的值數據 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類