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);//[email protected]
    //9.config 的內置對象就是ServletConfig
    String password = config.getInitParameter("password");
%>
</body>
age:<%=pageContext.getAttribute("age")%>
</html>

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

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

-Advertisement-
Play Games
更多相關文章
  • 現如今, AR技術不斷發展,人們不再滿足於運用鍵盤、滑鼠等簡單器械來實現傳統的人機交互模式。隨著用戶接觸機器的多樣化,繁瑣的操作不但對一些用戶有門檻,而且還增加其學習成本;如果能用自然且符合日常生活習慣的人機交互模式,不僅更好上手,也能讓開發者們在應用內開發更多玩法。比如在視頻直播或者拍照過程中,一 ...
  • 對象中可以直接寫變數 ES6 允許在大括弧裡面,直接寫入變數和函數,作為對象的屬性和方法。 const foo = 'bar'; const obj = {foo}; //key值就是foo,value值是 foo變數對應的值 // 輸出的是 {foo: "bar"} console.log(obj ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 現在 uniapp 開發的實時音視頻聊天類的 APP 大部分都要在 nvue 頁面上進行開發。雖然 nvue 與 vue 的區別不是很大,但還是有所差異的。 仔細查看了 uniapp 官網,發現了可以使用原生子窗體進行開發,可以把整個視頻 ...
  • 要成為一名優秀的 Web 開發人員,最快的方法就是練習。一個很好的練習方法是儘可能多地構建初學者項目。那是因為每個項目都會提出一個獨特的問題和解決方案,因此您解決的項目越多,您獲得的知識就越多。將您完成的每個項目都視為您獲得的獎牌。您擁有的獎牌越多,您就越能準備好應對下一個難度更大的項目。 為了幫助 ...
  • 個人名片: 對人間的熱愛與歌頌,可抵歲月冗長:sun_with_face: Github👨🏻‍💻:念舒_C.ying CSDN主頁✏️:念舒_C.ying 個人博客:earth_asia: :念舒_C.ying 預覽圖 直接進入我的網站吧 >> Z_C戀愛日記 下載源碼 鏈接:https:// ...
  • 在vue2中,提供了provide和inject配置,可以讓開發者在高層組件中註入數據,然後在後代組件中使用 除了相容vue2的配置式註入,vue3在composition api 中添加了provide和inject方法,可以在setup函數中註入 和使用數據 基本使用 provide('key' ...
  • 自定義 封裝單列模式! global state 由於vue3的響應式系統本身可以脫離組件而存在,因此可以充分利用這一點,輕鬆製造多個全局響應式數據, 並且通過和vuex一樣 通過某個模塊指定方法修改數據,不能直接修改數據,並且讓數據成為全局響應式 並且在代碼體積上絕對的輕量級!比市面上的任何第三方 ...
  • 一.小結 1.程式模塊化和可重用性是軟體工程的中心目標之一。java提供了很多有助於完成這一目標的有效結構。方法就是一個這樣的結構。 2.方法指定方法的修飾符,返回值類型,方法名和參數。比如靜態修飾符static。 3.方法可以返回一個值。返回值類型returnValueType是方法要返回的值數據 ...
一周排行
    -Advertisement-
    Play Games
  • 簡介 本文的初衷是希望幫助那些有其它平臺視覺演算法開發經驗的人能快速轉入Halcon平臺下,通過文中的示例開發者能快速瞭解一個Halcon項目開發的基本步驟,讓開發者能把精力完全集中到演算法的開發上面。 首先,你需要安裝Halcon,HALCON 18.11.0.1的安裝包會放在文章末尾。安裝包分開發和 ...
  • 本文是對Datawhale的動手學數據分析課程的學習總結,記錄了整體的學習過程、答案以及個人感想,代碼較為詳細。 ...
  • JZ7重建二叉樹 描述 給定節點數為 n 的二叉樹的前序遍歷和中序遍歷結果,請重建出該二叉樹並返回它的頭結點。 例如輸入前序遍歷序列{1,2,4,7,3,5,6,8}和中序遍歷序列{4,7,2,1,5,3,8,6} 提示: 1.vin.length == pre.length 2.pre 和 vin ...
  • 我們都知道在Java編程中多線程的同步使用synchronized關鍵字來標識,那麼這個關鍵字在JVM底層到底是如何實現的呢。 我們先來思考一下如果我們自己實現的一個鎖該怎麼做呢: 首先肯定要有個標記記錄對象是否已經上鎖,執行同步代碼之前判斷這個標誌,如果對象已經上鎖線程就阻塞等待鎖的釋放。 其次要 ...
  • 目錄 一.OpenGL 色階 1.Windows OpenGL ES 版本 2.Windows OpenGL 版本 二.OpenGL 色階 GLSL Shader 三.猜你喜歡 零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎 零基礎 Ope ...
  • 1. 查看Linux伺服器版本信息 # cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) 2. 禪道開源版安裝包下載 wget http://dl.cnezsoft.com/zentao/9.8.2/ZenTaoPMS.9.8. ...
  • Spring 框架可以為 Java 應用程式開發提供全面的基礎設施支持,它是現在非常流行的 Java 開源框架,對於一個 Java 開發人員來說,熟練掌握 Spring 是必不可少的。 ...
  • 前言 本篇是c++總結的第二篇,關於c++的對象模型,在構造、拷貝虛函數上重點分析,也包含了c++11class的新用法和特性,如有不當,還請指教! c++三大特性 訪問許可權 ​ 在c++中通過public、protected、private三個關鍵字來控製成員變數和成員函數的訪問許可權,它們分別表示 ...
  • 一.小結 1.使用二維數組來存儲表格 2.可以使用以下語法來聲明二維數組變數: 元素類型[ ] [ ]數組變數 3.可以使用以下語法來創建二維數組變數: new 元素類型 [行的個數][列的個數] 4.使用下麵的語法表示二維數組中的每個元素: 數組變數[行下標][列的個數] 5.可使用數組初始化語法 ...
  • typimg是一款為typora編輯器提供圖像自定義上傳服務的工具,該工具將在typora中輸入的網路圖片、本地圖片、剪貼板圖片/截圖上傳到博客園,支持在MacOS、Windiws、Linux三個平臺上運行。 ...