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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類