《JSP》第08節(jié)：JSP三大指令之Page指令（二

《JSP》第08節(jié)：JSP三大指令之Page指令（二）

SP指令是指：用于設置JSP頁面相關屬性的一個語法命令，例如：設置頁面編碼字符集、導入其他包等等。JSP中提供了三個指令，分別是：page指令、include指令、taglib指令。其中page指令用于設置JSP頁面屬性，include指令用于引入其他的JSP文件，taglib指令用于引入標簽庫。這一小節(jié)內(nèi)容介紹page指令的使用。

1.1、基礎語法

JSP中page指令的語法規(guī)則如下所示：

<%@ page 屬性名稱="屬性值" %>

注意：一個page指令中，可以有多個【屬性名稱=屬性值】，也可以多次使用page指令。

1.2、指令屬性

page指令中，提供了很多個屬性，常見的屬性有這幾個：contentType、pageEncoding、errorPage、isErrorPage、import、language、session、isELIgnored，下面我們就介紹每一個屬性的作用。

這一小節(jié)介紹errorPage、isErrorPage、session、isELIgnored四個屬性的作用。

（1）session

session屬性作用：設置當前JSP頁面中是否可以使用session對象，取值：true、false。默認是true，設置成false，那么當前JSP頁面里面就不能使用session對象。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page session="true" %>

<html>
<head>
    <title>JSP指令之Page</title>
</head>
<body>
    <h3>JSP指令之Page</h3>
    <%
        // 使用session對象
        Object username=session.getAttribute("username");
        System.out.println(username);
    %>
</body>
</html>

如果設置session="fasle"，那么在JSP頁面中使用session，編譯會報錯，如下所示：

這是因為，當我們設置session="false"的時候，JSP編譯之后，對應的java源代碼中，都不會定義session變量，來看下session設置成true和false兩種情況下，對應的源代碼如下圖所示：

（2）isELIgnored

isELIgnored屬性作用：這個屬性的作用是設置當前JSP頁面是否忽略EL表達式，取值：true、false，默認值是true。

false表示當前頁面不忽略EL表達式，那么也就是說，當前JSP頁面支持EL表達式；
設置成true之后，那么當前JSP頁面中如果使用了EL表達式的內(nèi)容，此時會被當作普通字符輸出。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="true" %>

<html>
<head>
    <title>JSP指令之Page</title>
</head>
<body>
    <h3>JSP指令之Page</h3>
    使用EL表達式獲取參數(shù): ${"輸出EL表達式內(nèi)容"}
</body>
</html>

運行結果如下所示：

當我們設置成isELIgnored="false"的時候，再次訪問jsp頁面，此時結果如下所示：

（3）isErrorPage

isErrorPage屬性作用：指定當前JSP頁面是否作為錯誤處理界面，取值：true、false，默認值是false。設置成true之后，那么當其他的JSP頁面發(fā)生報錯的時候，通過errorPage屬性，就會轉發(fā)到這個錯誤頁面。

注意：isErrorPage屬性一般是和errorPage屬性結合使用的。

（4）errorPage

errorPage屬性作用：指定當前JSP頁面的錯誤頁面地址，一般是和isErrorPage屬性結合使用。errorPage設置的相對路徑，源代碼上就是轉發(fā)到對應的錯誤頁面。

首先創(chuàng)建一個error.jsp頁面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 指定當前頁面是錯誤頁面 --%>
<%@ page isErrorPage="true" %>
<html>
<head>
    <title>JSP錯誤顯示頁面</title>
</head>
<body>
  <h3>
    Sorry，你訪問的頁面報錯啦！！！
  </h3>
</body>
</html>

接著再創(chuàng)建一個page.jsp頁面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 指定錯誤頁面的路徑地址 --%>
<%@ page errorPage="error.jsp" %>
<html>
<head>
    <title>errorPage屬性</title>
</head>
<body>
    <%-- 模擬報錯 --%>
    <%
        int i=10 / 0;
    %>
</body>
</html>

啟動Tomcat容器，瀏覽器訪問http://localhost:8080/servlet/page.jsp，結果如下所示：

查看page.jsp編譯之后對應的源代碼，可以看到有一個handlePageException()方法，這個方法就是處理JSP頁面異常的。

點進去查看源代碼，如下所示：

private void doHandlePageException(Throwable t) throws IOException, ServletException {
    if (this.errorPageURL !=null && !this.errorPageURL.equals("")) {
        this.request.setAttribute("javax.servlet.jsp.jspException", t);
        this.request.setAttribute("javax.servlet.error.status_code", 500);
        this.request.setAttribute("javax.servlet.error.request_uri", ((HttpServletRequest)this.request).getRequestURI());
        this.request.setAttribute("javax.servlet.error.servlet_name", this.config.getServletName());

        try {
            this.forward(this.errorPageURL);
        } catch (IllegalStateException var3) {
            this.include(this.errorPageURL);
        }

        Object newException=this.request.getAttribute("javax.servlet.error.exception");
        if (newException !=null && newException==t) {
            this.request.removeAttribute("javax.servlet.error.exception");
        }

        this.request.removeAttribute("javax.servlet.error.status_code");
        this.request.removeAttribute("javax.servlet.error.request_uri");
        this.request.removeAttribute("javax.servlet.error.servlet_name");
        this.request.removeAttribute("javax.servlet.jsp.jspException");
    } else if (t instanceof IOException) {
        throw (IOException)t;
    } else if (t instanceof ServletException) {
        throw (ServletException)t;
    } else if (t instanceof RuntimeException) {
        throw (RuntimeException)t;
    } else {
        Throwable rootCause=null;
        if (t instanceof JspException || t instanceof ELException || t instanceof javax.servlet.jsp.el.ELException) {
            rootCause=t.getCause();
        }

        if (rootCause !=null) {
            throw new ServletException(t.getClass().getName() + ": " + t.getMessage(), rootCause);
        } else {
            throw new ServletException(t);
        }
    }
}

從上面源代碼就可以看到，有一個this.forward()方法，這個方法就是轉發(fā)的作用。到此，page指令的常用屬性都介紹完啦。

今天就到這里，未完待續(xù)~~

、HTML 塊元素

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素；
元素在瀏覽器顯示時，通常會以新行來開始和結束；
如：<h1>，<p>，<ul>，<table>，<div>等標簽；

二、HTML 內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始；
如：<b>， <td>， <a>， <img>，<span>等標簽；

三、HTML <div> 元素

HTML 中的<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器；
<div> 標簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分；
<div> 元素經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
 .all{
 width:500px;
 height:500px;
 margin:0 auto;
 background-color:#000;
 }
 .one{
 height:100px;
 background-color:#89E1BF;
 }
 .two{
 height:100px;
 background-color:#DEE099;
 }
 .three{
 height:100px;
 background-color:#D7A1CE;
 }
 
</style>
<body>
 <!--父div，all是黑色-->
 <div class="all">
 <!--子div，one是綠色-->
 <div class="one">
 </div>
 <!--子divtwo，是黃色-->
 <div class="two">
 </div>
 <!--子div，three是紫色-->
 <div class="three">
 </div>
 </div>
</body>
</html>

演示效果如圖所示：

近項目使用到頁面部分區(qū)域需轉成圖片進行下載，使用到html2canvas插件來生成，這里將vue項目使用html2canvas生成canvas圖片的過程做個總結：

官網(wǎng)地址：http://html2canvas.hertzen.com

1. 安裝html2canvas模塊

npm install --save html2canvas

2.所需頁面導入html2canvas模塊

import html2canvas from 'html2canvas'

3.html元素添加容器盒子

<div ref="ewmBox"></div>

4.頁面渲染完成執(zhí)行canvas渲染

html2canvas(this.$refs.ewmBox, {/*相關配置項*/}).then(function(canvas) {
  console.log(canvas.toDataURL()) // 轉成可下載地址
})

常用配置項

allowTaint：是否允許圖像跨域。次屬性會污染畫布，導致canvas.toDataURL()方法無法使用（默認：false）
backgroundColor：畫布背景色。如果DOM中沒有指定畫布背景色，設置null為透明（默認：#ffffff）
imageTimeout：加載圖像的超時時間(毫秒)。設置為0表示禁用超時（默認：15000）
proxy：用于加載跨域圖像的代理Url。如果為空，則不會加載跨域圖像（默認：null）
scale：用于渲染的比例。默認為瀏覽器的設備像素比（默認：window.devicePixelRatio）
width：canvas寬度（默認：Element width）
height：canvas高度（默認：Element height）
scrollX：渲染元素時使用的x軸滾動位置(例如，如果元素使用position: fixed)（默認：Element scrollX）
scrollY：渲染元素時使用的y軸滾動位置(例如，如果元素使用position: fixed)（默認：Element scrollY）
windowWidth：渲染Element時使用的窗口寬度，這可能會影響諸如媒體查詢之類（默認：Window.innerWidth）
windowHeight：渲染Element時使用的窗口高度，這可能會影響諸如媒體查詢之類（默認：Window.innerHeight）

注意：

如果在轉換過程中希望排除某些元素的呈現(xiàn)，可以向這些元素添加data-html2canvas-ignore屬性，然后html2canvas將排除這些元素的轉換。
如果將生成canvas邏輯放到彈窗中，那么canvas在轉換時彈窗元素還未完全渲染，此時會找不到渲染對象而轉換失敗，這種情況可以使用$nextTick()函數(shù)將canvas轉換代碼放到$nextTick()的回調(diào)函數(shù)里來解決。
生成圖片清晰度問題可通過scale屬性來解決。
當有滾動條時截圖有時不全問題可通過執(zhí)行代碼前將頁面滾動高度設置為0來解決。

在線咨詢

上一篇：Vue3 函數(shù)式組件 - confirm實現(xiàn)
下一篇：Notepad ++UWP版上架微軟商店

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商