jsp页面代码复用

最新推荐文章于 2022-01-30 17:16:25 发布

原创最新推荐文章于 2022-01-30 17:16:25 发布 · 838 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在JSP中利用jsp:include动作实现代码复用，通过举例说明了在head.jsp中定义主要代码，然后在index.jsp等页面引用该头部导航的方法。

在jsp页面中可以通过jsp:include动作进行代码的复用
如：头部导航页面head.jsp的内容，其中只有主要代码，没有body,html标签

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!--导航条-->
<nav class="navbar navbar-default" role="navigation">
    <!--导航条头部-->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">首页</a>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">电脑<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">联想</a>
                    </li>
                    <li>
                        <a href="#">戴尔</a>
                    </li>
                </ul>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">手机<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">华为</a>
                    </li>
                    <li>
                        <a href="#">小米</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!--导航条列表结束-->
        <!--搜索-->
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" />
            </div> <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <!--搜索结束-->
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">登录</a>
            </li>
            <li>
                <a href="#">注册</a>
            </li>
        </ul>
    </div>

</nav>
<!--导航条结束-->

需要对head.jsp页面进行引用的页面index.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jQuery/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <!--栅格开始-->
    <div class="row clearfix">
        <div class="col-md-12 column">
            <%-- 引入导航条--%>
            <jsp:include page="head.jsp" flush="true"></jsp:include>
    </div>
</div>
</body>
</html>