如何應用Web頁面靜態化技術以提高J2EE Web應用系統的響應性能

2020-12-22 楊教授工作室

軟體項目實訓及課程設計指導——如何應用Web頁面靜態化技術提高Web應用系統的響應性能

1、什麼是Web頁面靜態化技術

(1)Web頁面靜態化技術

將JSP動態頁面按照某種模板格式生成對應的*.html純靜態Web頁面的過程,稱之為Web頁面靜態化技術。

(2)何種場合需要應用Web頁面靜態化技術

當有些企業應用系統中的頁面信息在一段時間內不發生變化時(比如內容管理系統、網上商城中的商品信息等),可以應用Web頁面靜態化技術,這樣可以提高整個系統的響應效率——因為無須再訪問後臺資料庫系統、也不需要再次編譯處理JSP動態頁面文件,因此能夠減少對Web應用系統的消耗和性能影響。

2、為什麼要應用Web頁面靜態化技術

目前基於B/S(Browser/Server,瀏覽器/伺服器模式)體系架構的企業應用系統基本上都是由動態Web頁面所構成的(比如由*.jsp、*.aspx、*.php等類型),正因為是動態化的Web頁面才能滿足不同的Web瀏覽者的個性化的訪問需要、並且能夠與訪問者產生相互交互。

但為了能夠產生出動態的應用效果,用戶每一次對目標頁面的HTTP請求都會在Web伺服器端對這些動態Web頁面進行編譯或者動態處理,而這些操作都是很消耗Web伺服器系統資源的。

如果目標頁面文件(比如*.jsp)在一定的時間內,其動態顯示的內容不會發生改變(比如新聞系統中的新聞信息顯示、網點中的商品分類和某一商品信息的詳情頁等),那麼就沒有必要為每一次對它的HTTP請求訪問,都進行一次「新」的編譯或執行。此時可以在用戶第一次對它訪問後,就把它在這段沒有發生改變的時間內的頁面處理結果保存到一個純靜態的頁面文件(*.html格式)或者有靜態效果的其它格式頁面文件(*.vm、*.ftl等形式)中,然後用戶以後每次再訪問這個動態Web頁面時,後臺Web伺服器系統程序就直接採用轉換後的靜態頁面內容進行響應。

因此,經過靜態化技術轉換處理後的結果Web頁面能夠快速地響應用戶的HTTP請求,而且還能夠大大地減少對Web伺服器系統資源的消耗。當然,為了能夠達到靜態化的功能實現目標,軟體應用系統的開發人員可以在Web應用系統的開發中應用各種模板技術——比如Velocity模板、FreeMarker模板技術等。當然,讀者如果熟悉Web頁面靜態化技術的實現原理後,也可以自己編程實現。

在Web應用系統的表示層開發中如何通過應用Velocity模板技術以提高Web應用系統的響應性能,作者在以前的文章中的做了詳細的介紹,有興趣的讀者可以翻看文章《軟體項目實訓及課程設計指導——如何在Web應用系統表示層開發實現中應用Velocity模板技術》。

作者在下文將為讀者介紹如何在Web應用系統的表示層開發中應用FreeMarker模板技術以提高Web應用系統的響應性能。

3、在Web應用系統的表示層開發中應用FreeMarker模板技術

(1)FreeMarker模板是什麼、怎麼理解「模板引擎」的概念

FreeMarker 和Velocity都屬於「模板引擎」(作者註:「模板引擎」在J2EE平臺中一般為框架形式的系統程序和相關的系統庫),開發人員應用這些模板引擎所提供的模板語言處理相關的數據,模板引擎系統會按照開發人員的要求輸出文本,這些文本的格式可以是HTML網頁、電子郵件、配置文件以及原始碼等形式。

如下代碼示例為在標準的HTML頁面中內嵌FreeMarker模板語言的語句(參看其中的黑體標識的語句)的示例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <title>showInfoTemplate.ftl</title>

<meta http-equiv="content-type" content="text/html; charset=gb2312">

</head> <body>

<h2>採用標準的方式獲得參數值: ${showResultInfo}</h2 > <br>

<h2>採用FreeMarker模板的內建變量的方式獲得參數值: ${Request.showResultInfo}</h2 > <br>

</body></html>

(2)為什麼要應用FreeMarker等類型的模板技術

談到「模板」的概念,相信讀者應該不會感覺到陌生感,在生活中大量地應用各種各樣的「模板」,應用的目的讀者也應該都會理解。同樣,在計算機軟體應用系統中也大量地提高各種模板和應用各種模板來簡化和加速某項「工作」,比如Word中的文檔格式模板、程式語言中的print("%各種格式符")語句中的替換模板等等。而在J2EE系統平臺的應用系統開發中之所以應用FreeMarker模板技術:

首先,FreeMarker模板技術同樣也能夠實現Web應用系統中的表示邏輯和數據處理邏輯相互分離——這是通過在模板文件中包裝HTML標籤實現的。

FreeMarker模板採用標準的Web Servlet程序中所提供的模型數據動態地生成目標HTML頁面文件。在Web應用系統開發中如果應用FreeMarker模板技術,界面開發人員只需要關注於界面(也就是FreeMarker的模板文件)的開發,而系統中的業務邏輯的開發人員也只需要負責將需要顯示的數據填入到FreeMarker的模板文件的數據模型中。最終由FreeMarker模板引擎負責合併數據模型和模板文件,然後產生出完整的Web頁面文件並輸出到Web瀏覽器中。

其次,實現將基於動態化技術的各種Web頁面(如*.jsp、*.aspx、*.php等)轉換為靜態的HTML格式或其它文本格式的Web頁面,達到「動態頁面靜態化」的高效響應的應用效果。

因此,模板引擎不只是可以讓開發人員實現代碼級別的分離(如系統中的業務邏輯代碼和用戶界面展示控制代碼的分離),也可以實現軟體應用系統中的數據分離(如動態可變數據與靜態固定數據相互分離),甚至還可以實現應用系統中的代碼單元共享(代碼重用)等效果。

4、Struts及Struts2應用框架都全面地支持FreeMarker模板技術

(1)FreeMarker模板特別適應於基於MVC體系架構模式的Web應用系統

Struts2應用框架默認採用FreeMarker作為其模板文件,並且Struts2應用框架中所有的主題模板文件都是採用FreeMarker模板技術編寫的。

(2)Struts2應用框架全面提供對FreeMarker模板技術的支持

在基於Struts2應用框架的Web應用系統中,開發人員只需要將項目中的Action類的配置定義中的結果<result>標籤中的type屬行設置為:type="freemarker",就可以自動地由Struts2應用框架中內帶的FreeMarker引擎完成模型數據和模板文件的總裝配和輸出(參看如下示例圖所示)。

(3)Struts應用框架也同樣提供對FreeMarker模板技術的支持

而在Struts應用框架中應用FreeMarker模板技術,開發人員只需要在Web應用系統的部署描述文件web.xml中配置出與FreeMarker模板相關的FreemarkerServlet組件(參看如下示例圖所示),然後由該FreemarkerServlet組件將項目中的相關Action類中所保存的模型數據和模板文件相互集成組裝成最終的HTML頁面文件、並向Web瀏覽器輸出。

作者將在下文及後續文章中為讀者介紹在J2EE Web應用系統、J2EE Struts應用框架的應用系統及J2EE Struts2應用框架的應用系統等環境中如何應用FreeMarker模板技術實現Web頁面靜態化的應用效果。作者首先在下文為讀者介紹在J2EE Web應用系統環境中如何應用FreeMarker模板技術。

5、在J2EE Web應用項目中添加一個JSP頁面文件

(1)在Web項目的userManage目錄下添加一個文件名稱為fmtWebUserLogin.jsp的JSP頁面文件,該頁面主要功能是模擬用戶系統登錄,其中包含有一個標準的HTML表單,創建的過程參看如下示例圖所示。

(2)fmtWebUserLogin.jsp頁面文件的代碼示例

<%@ page language="java" pageEncoding="GB18030"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head><title>My JSP 'fmtUserLogin.jsp' starting page</title>

</head><body>

<form action="/Struts2Web/fmtServletAction" method="post" >

您的名稱:<input type="text" name="userName" /> <br />

您的密碼:<input type="password" name="userPassWord" /> <br />

<input type="submit" value="提交" name="submitButton" onclick="this.value='正在提交請求,請稍候'"/>

<input type="reset" value="取消" />

</form>

</body></html>

(3)fmtWebUserLogin.jsp頁面靜態預覽的效果圖如下圖所示

6、在J2EE Web應用項目中添加一個Servlet組件

在J2EE Web應用系統中使用FreeMarker模板時,應該讓J2EE Servlet組件來合併模板和數據。因此J2EE Servlet組件負責創建Configuration類型的對象實例,並負責合併模板和數據。

(1)程序包名稱為com.px1987.struts2.servlet,類名稱為FMTServletAction,創建的過程參看如下示例圖所示。

(2)將J2EE Servlet組件的URL-Pattern設置為/fmtServletAction,創建的過程參看如下示例圖所示。

(3)FMTServletAction程序類的代碼示例

package com.px1987.struts2.servlet;

import java.io.IOException;

import java.io.Writer;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import freemarker.template.Configuration;

import freemarker.template.Template;

import freemarker.template.TemplateException;

public class FMTServletAction extends HttpServlet {

private Configuration oneConfiguration=null;

public FMTServletAction() {

super();

}

public void init() throws ServletException {

/** 初始化FreeMarker配置,並創建出一個Configuration的實例 */

oneConfiguration = new Configuration(); //設置FreeMarker的模版文件位置

oneConfiguration.setServletContextForTemplateLoading(getServletContext(),"userManage");

} //第一個參數是本web應用的 ServletContext,第二個參數是模板文件的路徑

public void destroy() {

super.destroy();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String resultMessage=null;

String userName=request.getParameter("userName");

String userPassWord=request.getParameter("userPassWord");

boolean returnResult=userName.equals("yang") &&userPassWord.equals("1234");

if(returnResult){

resultMessage =userName+"您登錄成功!";

}

else{

resultMessage =userName+"您的身份信息無效!";

}

Map oneHashMap = new HashMap();

oneHashMap.put("showResultInfo", resultMessage); //取得模版文件

Template oneTemplate= oneConfiguration.getTemplate("showInfoFMTTemplate.ftl");

response.setContentType("text/html; charset=gb2312");

Writer out = response.getWriter();

try{ //結果必須輸出到HttpServletResponse中,才能被瀏覽器加載

oneTemplate.process(oneHashMap, out);

}

catch (TemplateException e){

throw new ServletException("加載FreeMarker的模板文件時出現了錯誤", e);

}

}

}

7、在J2EE Web應用項目中添加一個FreeMarker模板文件

(1)模板文件的名稱為showInfoFMTTemplate.ftl,創建的過程參看如下示例圖所示。

(2)模板文件showInfoFMTTemplate.ftl的代碼示例如下,注意其中黑體標識的代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <title>showInfoTemplate.ftl</title>

<meta http-equiv="content-type" content="text/html; charset=gb2312">

</head> <body>

<h2>採用標準的方式獲得參數值: ${showResultInfo}</h2 > <br>

</body></html>

8、部署本Web項目並啟動測試頁面以驗證本示例的功能

(1)正確地部署完畢本Web項目後,在瀏覽器的URL地址欄中輸入如下示圖中的訪問地址,啟動測試頁面 ,執行的結果參看如下示例圖所示。

(2)在測試頁面的表單中模擬用戶登錄系統的狀態,輸入相關的登錄參數後的執行結果參看如下示例圖所示。

從本示例的執行結果來看,在showInfoFMTTemplate.ftl頁面中同樣也可以獲得在傳統的J2EE Web應用環境中一般由動態JSP類型的Web頁面才能獲得的動態結果數據,但本示例中的*.ftl頁面是靜態效果的Web頁面。因此,最終實現和達到了「動態頁面靜態化」的高效響應的應用效果。

作者為了能夠讓讀者進一步地理解「動態頁面靜態化」的應用效果,可以通過瀏覽結果頁面相關的源程序從而確認最終是否為一個HTML格式的純靜態頁面。讀者可以在Web瀏覽器中右鍵單擊,然後在彈出的快捷菜單項目中選擇「查看源文件」的功能子菜單項目(參看如下示例圖所示)。

將在Web瀏覽器中顯示出用戶當前正在瀏覽的Web頁面的原始碼,熟悉HTML語言的讀者應該能夠看懂其中的代碼含義——全部為HTML格式的純靜態頁面標籤。

如何應用XML+XSLT+AJAX組合技術實現無刷新的數據查詢的應用實例

課程設計指導——應用AJAX技術提高Web應用系統的整體響應性能

如何在Web應用中實現Velocity 與Struts2框架相互集成的應用實例

如何在Web應用中實現Velocity 與Struts 框架相互集成的應用實例

如何利用MyEclipse開發工具開發基於Velocity模板的Web應用

相關焦點

  • 如何優化Web應用數據訪問實現方式以提高軟體應用系統的響應性能
    軟體項目實訓及課程設計指導——如何優化Web應用數據訪問實現方式以提高軟體應用系統的響應性能在軟體應用系統中離不開數據訪問和數據處理兩個方面的功能,而數據處理之前首先要進行數據訪問,也就是只有快速地獲得了數據,才能進行下一步的數據處理。
  • 課程設計指導——應用AJAX技術提高Web應用系統的整體響應性能
    軟體項目實訓及課程設計指導——應用AJAX技術提高Web應用系統的整體響應性能1、軟體應用系統的性能指標是衡量軟體應用系統優劣程度的一個重要指標Web應用系統由於是基於HTTP協議產生請求、並由Web伺服器端程序處理對應的請求、最後再次通過HTTP響應向Web
  • 如何利用MyEclipse開發工具開發基於Velocity模板的Web應用
    由於Velocity 模板的系統庫不斷地在更新和升級,讀者可以從Velocity的官方網站上下載Velocity的系統運行包文件和技術參考文檔等系統庫和資料,然後再解包該系統庫的運行包文件,請見下圖所示的下載頁面。
  • Web後端伺服器架構原理及技術詳解
    首先所有客戶端的請求都需要傳遞給伺服器端,伺服器端接收到客戶端發送過來的請求,對客戶端的請求進行響應,服務端需要監聽到客戶端發送的請求,例如:如果伺服器的埠是80,需要將請求進行整理分類,我們需要對伺服器進行監聽,監聽完成之後需要去響應,我們需要去協調咱們的一個動態處理頁面的引擎,或者去協調我們的資料庫,去訪問我們的硬碟將相應的內容讀到硬碟中等等相關內容拼裝好之後,再變成一個標準的HTML的源文件的頁面再發送給客戶端
  • 如何在Web應用中實現Velocity 與Struts 框架相互集成的應用實例
    軟體項目實訓及課程設計指導——如何在Web應用系統中實現Velocity 與Struts 框架相互集成的應用實例1、Velocity Tools 子項目及其中的 VelocityStruts 組件(1)Velocity Tools是什麼
  • Azure 靜態 web 應用集成 Azure 函數 API
    前幾次我們演示了如何通過Azure靜態web應用功能發布vue跟blazor的項目(使用 Azure靜態web應用+Github全自動部署VUE站點、使用Azure靜態Web應用部署Blazor Webassembly應用)。
  • 如何在Web應用中實現Velocity 與Struts2框架相互集成的應用實例
    軟體項目實訓及課程設計指導——如何在Web應用系統中實現Velocity 與Struts2框架相互集成的應用實例1、Struts 2應用框架提供對 Velocity 和 FreeMarker 模板引擎的支持在Struts 2應用框架中不僅繼續保留有對Velocity
  • 北大青鳥整理:一名web前端工程師需要必備哪些技術和工具?
    最近,有小夥伴私信留言讓我總結一下:「一個合格的web前端需要會什麼技術?」我想了半天,合格的web前端當然符合企業的用人要求啊!那麼一名web前端工程師需要必備哪些技術和工具?想要成為一個高薪高職的Web前端工程師並不容易,你不僅需要掌握專業的技能點,還要具備較多的項目經驗。優秀的Web前端工程師需要掌握哪些技術工具嗎?接下來就給大家一一介紹。
  • Laravel框架從9處助力Web應用開發
    本文將向您介紹什麼是Laravel,以及它將如何從九個方面提高Web應用的開發效率和競爭優勢:Laravel框架的歷史和演變Laravel是一個開源框架,旨在利用MVC架構模式,基於Symfony(譯者註:一個開源的PHP Web框架)來創建Web應用程式。開發人員可以使用它所提供的各種出色的API,來加快開發的進程,並簡化目標網站構建。
  • 學習web前端,需要哪些技術呢?
    web前端是如今it行業大家都非常熟知的一門程式語言技術,也是新手入門IT行業的一個入口。很多人都想要通過報web前端培訓班進入到這個行業。那麼,要學習web前端這個程式語言,需要哪些技術呢?跟web前端培訓機構的小編一起來看看吧。
  • 千萬別再把雲防火牆和Web應用防火牆搞混了
    但大多數人所熟知的是Web應用防火牆,也就是我們俗稱的WAF,在企業紛紛上雲的大趨勢下,雲防火牆便是作為企業上雲的第一個基礎安全設施而生的新一代防火牆。企業上雲不免面臨很多安全問題,其中最基礎的網絡安全問題無外乎雲環境下公網IP位址申請便捷,如何統一管控公網IP?網際網路漏洞頻繁,針對漏洞攻擊不斷,如何智能攔截?
  • 項目實訓及課程設計——如何合理地設計軟體應用系統的Web表示層
    軟體項目實訓及課程設計指導——如何合理地設計軟體應用系統的Web表示層1、用戶界面是軟體應用系統的門面,在設計和開發實現時必須高度重視軟體應用系統表示層內的各個組件是軟體應用系統的前端界面組件,它們直接與應用該軟體應用系統的最終操作者發生各種人機互動行為。
  • Java Web 服務性能優化實踐
    本文介紹如何提升 Java Web 服務性能,主要介紹了三種方法:一是採用 Web 服務的異步調用,二是引入 Web 服務批處理模式,三是壓縮 SOAP 消息。重點介紹在編程過程中如何使用異步 Web 服務以及異步調用和同步調用的差異點。本文還示範了如何在項目中使用以上三種方法,以及各種方法所適合的應用場景。
  • 結構方程模型元分析:Web應用
    Cheung開發了網頁版的結構方程模型元分析應用程式,對結構方程模型元分析感興趣的多加關注。英文題目和摘要Meta-analytic structural equation modeling made easy: A tutorial and web application for one-stage MASEMMeta-analytic Structural
  • 蘇州web培訓班哪家好
    了解更多 蘇州web前端課程介紹 蘇州web前端培訓學校,達內教育開設了蘇州web前端開發課程,零基礎也可以學習,以實戰項目為教學出發點,致力幫助學員快速掌握專業web前端開發技能,課程內容緊跟網際網路技術發展與企業實際用人需求,讓學員獨立從需求分析到項目設計
  • web開發我更喜歡使用GO語言
    go語言在2007年9月設計,然後於2009年11月正式向外宣布推出使用,而且是開放原始碼項目,首先在Linux系統與Mac OS X平臺實現運行,不久在Windows系統實現。web開發目前主流當然是「最好程式語言PHP」,java與Python等,而go則被更多開發者適用於開發微服務、ERP系統、移動開發等,讓我們一起看下GO語言在web開發的優點。
  • 課程設計指導——如何應用XML+XSLT技術分離Web表示層數據和樣式
    軟體項目實訓及課程設計指導——如何應用XML+XSLT技術分離Web表示層數據和樣式1、「XML+XSLT」技術在J2EE技術平臺中的應用Java語言及相關的應用技術的產生解決了跨平臺的軟體應用系統的開發,但沒有解決如何實現跨平臺的數據交換問題。
  • TCP/IP應用層、傳輸層
    ,應用層並不定義應用程式本身,而是定義應用程式需要的服務,即定義了上層應用軟體與網絡本身之間的接口。例如,應用協議HTTP定義了web瀏覽器如何從web伺服器獲取web頁面的內容。當今最流行的TCP/IP應用程式是web瀏覽器,許多流行應用軟體正在採用雲化的服務模式並支持從web瀏覽器訪問。甚至一些APP看似有自己的快捷圖標和自定義界面,但其核心還是一個定製瀏覽器,應用的開發和網頁開發相近或可以一處開發多場景使用。在電腦上打開一個網絡瀏覽器,通過輸入網站名稱,然後網頁(應用界面)隨即出現。
  • 股票數據計算分析 web 系統 stock-job-web v1.0 發布了
    5)使用tornado開發web系統,支持股票數據,滬深300成份股,中證500成份股,龍虎榜數據,每日股票數據,每日大盤指數行情等6)數據展示系統,是通用數據展示系統,配置字典模板之後,頁面自動加載數據,並完成數據展示,後續自己開發的指標數據可以加入進去。
  • web前端就業前景好嗎?零基礎怎麼學習?
    隨著計算機技術和網絡的迅猛發展和日益普及,計算機網絡逐漸成為人們生活的一部分,其中網站的應用的最為廣泛,不論是大家進行網上購物、信息查找、軟體下載以及網上學習,這都表示計算機網絡融入了越來越多的行業。而我們所接觸最多的網站頁面就是前端技術來完成的。