jsp提取公共部分html：使用 include标签

待我称王封你为后i 2022-05-20 07:28 215阅读 0赞

*  include
    
     *  形式
     *  描述
     *  存在问题
     *  代码
        
         *  优化哪儿
         *  如何优化

# include #

## 形式 ##

// include指令
    <%@ include file="" %> 
     // <jsp:include>动作元素
    <jsp:include page="head.jsp"/>

## 描述 ##

1.  容器会将引入页面和本页合并后再编译，形成一个 Servlet 文件，属于静态引入，在翻译阶段完成。
2.  页面被请求的时候完成合并，形成两个 Servlet 文件，属于动态包含，请求执行阶段完成。

## 存在问题 ##

1、 静态引入，如果存在**变量同名**，将导致翻译阶段错误。  
2、 动态包含

这个指令是在**请求处理阶段**而不是在翻译阶段执行的。该行为并不是要引入指定页面的实际内容，它将引入**执行该引入页面后**所产生的**应答**，这意味着你可以指定任何能够产生文本应答的web资源。JSP容器将通过一个内部的函数调用来调用指定的资源。因此，这些被引入的资源可以帮助处理原来的请求，所以这些资源可以访问请求作用域内的所有对象，以及所有的请求参数。但是要注意，它不能访问任何页面作用域属性，或是在主页面中声明的脚本变量。  
　　　`<c:import>` 行为和 `<jsp:include>`相同，另外它还可以从外部资源引入数据，比如不同的web应用程序，或者一个FTPfuwq。  
　 　所以应该使用 `<c:import>` 来代替 `<jsp:include>` 的使用。  
　　 被引用页面改变后，新版本会立即投入使用。

3、

## 代码 ##

### 优化哪儿 ###

对于平常的页面往往都有**上中下三部分**组成，可以将**上和下**两部分通过 `<%@ include file="" %>` 方式引入，减少代码量

### 如何优化 ###

先将页面完成，即使有**重复的地方**依旧使用，等**页面完成后**对于相同的部分**（如页头和页脚）**可以考虑提取。

head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xxx</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        
        <div class="container-fluid">
            <div class="col-md-3">
                <img src="${pageContext.request.contextPath}/img/logo2.png" />
            </div>
            <div class="col-md-5">
                <img src="${pageContext.request.contextPath}/img/header.png" />
            </div>
            <div class="col-md-4 pull-right" style="padding-top: 20px">
                <ol class="list-inline pull-right">
    
                <c:if test="${empty loginUser }">
                    <li><a href="${pageContext.request.contextPath}/UserServlet?method=loginUI">登录</a></li>
                    <li><a href="${pageContext.request.contextPath}/UserServlet?method=registerUI">注册</a></li>
                </c:if>
    
                <c:if test="${not empty loginUser}">
                    <li><a href="#">欢迎你，${loginUser.username}</a></li>
                    <li><a href="${pageContext.request.contextPath}/UserServlet?method=loginOutUI">退出登录</a></li>
                </c:if>
    
                </ol>
            </div>
        </div>
        
        <div class="container-fluid">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">首页</a>
                    </div>
    
                    
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="${pageContext.request.contextPath}/jsp/product_list.jsp">其他<span class="sr-only">(current)</span></a></li>
                        </ul>
                        <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>               
                </div>           
            </nav>
        </div>
    </body>
    </html>

info.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>关于我们</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
    </head>
    
    <body>
            
            <%@ include file="/jsp/head.jsp"%>
            
    
    
    
            <div class="container">
                <h1>something is here.</h1>
            </div>
    
        
        <%@ include file="/jsp/foot.jsp"%>
        
    </body>
    
    </html>