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
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類