《JSP》第08节：JSP三大指令之Page指令（二

《JSP》第08节：JSP三大指令之Page指令（二）

SP指令是指：用于设置JSP页面相关属性的一个语法命令，例如：设置页面编码字符集、导入其他包等等。JSP中提供了三个指令，分别是：page指令、include指令、taglib指令。其中page指令用于设置JSP页面属性，include指令用于引入其他的JSP文件，taglib指令用于引入标签库。这一小节内容介绍page指令的使用。

1.1、基础语法

JSP中page指令的语法规则如下所示：

<%@ page 属性名称="属性值" %>

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

1.2、指令属性

page指令中，提供了很多个属性，常见的属性有这几个：contentType、pageEncoding、errorPage、isErrorPage、import、language、session、isELIgnored，下面我们就介绍每一个属性的作用。

这一小节介绍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表达式的内容，此时会被当作普通字符输出。

<%@ 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表达式获取参数: ${"输出EL表达式内容"}
</body>
</html>

运行结果如下所示：

当我们设置成isELIgnored="false"的时候，再次访问jsp页面，此时结果如下所示：

（3）isErrorPage

isErrorPage属性作用：指定当前JSP页面是否作为错误处理界面，取值：true、false，默认值是false。设置成true之后，那么当其他的JSP页面发生报错的时候，通过errorPage属性，就会转发到这个错误页面。

注意：isErrorPage属性一般是和errorPage属性结合使用的。

（4）errorPage

errorPage属性作用：指定当前JSP页面的错误页面地址，一般是和isErrorPage属性结合使用。errorPage设置的相对路径，源代码上就是转发到对应的错误页面。

首先创建一个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>

接着再创建一个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()方法，这个方法就是转发的作用。到此，page指令的常用属性都介绍完啦。

今天就到这里，未完待续~~

、HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素；
元素在浏览器显示时，通常会以新行来开始和结束；
如：<h1>，<p>，<ul>，<table>，<div>等标签；

二、HTML 内联元素

内联元素在显示时通常不会以新行开始；
如：<b>， <td>， <a>， <img>，<span>等标签；

三、HTML <div> 元素

HTML 中的<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器；
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分；
<div> 元素经常与 CSS 一起使用，用来布局网页；

四、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>

演示效果如图所示：

近项目使用到页面部分区域需转成图片进行下载，使用到html2canvas插件来生成，这里将vue项目使用html2canvas生成canvas图片的过程做个总结：

官网地址：http://html2canvas.hertzen.com

1. 安装html2canvas模块

npm install --save html2canvas

2.所需页面导入html2canvas模块

import html2canvas from 'html2canvas'

3.html元素添加容器盒子

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

4.页面渲染完成执行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）

注意：

如果在转换过程中希望排除某些元素的呈现，可以向这些元素添加data-html2canvas-ignore属性，然后html2canvas将排除这些元素的转换。
如果将生成canvas逻辑放到弹窗中，那么canvas在转换时弹窗元素还未完全渲染，此时会找不到渲染对象而转换失败，这种情况可以使用$nextTick()函数将canvas转换代码放到$nextTick()的回调函数里来解决。
生成图片清晰度问题可通过scale属性来解决。
当有滚动条时截图有时不全问题可通过执行代码前将页面滚动高度设置为0来解决。

在线咨询

上一篇：Vue3 函数式组件 - confirm实现
下一篇：Notepad ++UWP版上架微软商店

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商