JSP包含关系 · 模仿天猫整站_J2EE版

[TOC] # 步骤1: 分类查询对应的JSP文件分类查询对应的JSP文件是listCategory.jsp，但是本知识点不讲解listCategory.jsp本身，而是讲解其所包含的几个公共的jsp文件。 listCategory.jsp本身留在**分类管理-查询**，结合MVC模式讲解。 listCategory.jsp 用到了4个公共包含文件 ``` <%@include file="../include/admin/adminHeader.jsp"%> <%@include file="../include/admin/adminNavigator.jsp"%> <%@include file="../include/admin/adminPage.jsp"%> <%@include file="../include/admin/adminFooter.jsp"%> ``` ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@include file="../include/admin/adminHeader.jsp"%> <%@include file="../include/admin/adminNavigator.jsp"%> <script> $(function(){ $("#addForm").submit(function(){ if(!checkEmpty("name","分类名称")) return false; if(!checkEmpty("categoryPic","分类图片")) return false; return true; }); }); </script> <title>分类管理</title> <div class="workingArea"> <h1 class="label label-info" >分类管理</h1> <br> <br> <div class="listDataTableDiv"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>图片</th> <th>分类名称</th>   <th>编辑</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach items="${thecs}" var="c"> <tr> <td>${c.id}</td> <td><img height="40px" src="img/category/${c.id}.jpg"></td> <td>${c.name}</td> <%-- <td><a href="admin_property_list?cid=${c.id}"><span class="glyphicon glyphicon-th-list"></span></a></td> --%> <%-- <td><a href="admin_product_list?cid=${c.id}"><span class="glyphicon glyphicon-shopping-cart"></span></a></td> --%> <td><a href="admin_category_edit?id=${c.id}"><span class="glyphicon glyphicon-edit"></span></a></td> <td><a deleteLink="true" href="admin_category_delete?id=${c.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> <div class="pageDiv"> <%@include file="../include/admin/adminPage.jsp" %> </div> <div class="panel panel-warning addDiv"> <div class="panel-heading">新增分类</div> <div class="panel-body"> <form method="post" id="addForm" action="admin_category_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>分类名称</td> <td><input id="name" name="name" type="text" class="form-control"></td> </tr> <tr> <td>分类圖片</td> <td> <input id="categoryPic" accept="image/*" type="file" name="filepath" /> </td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <button type="submit" class="btn btn-success">提交</button> </td> </tr> </table> </form> </div> </div> </div> <%@include file="../include/admin/adminFooter.jsp"%> ``` # 步骤2: adminHeader.jsp 每个后台页面都在一开始使用了adminHeader.jsp 1\. 表示本页面会使用html5的技术 ``` <!DOCTYPE html> ``` 2\. jsp指令 ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> ``` `contentType="text/html; charset=UTF-8"` 告诉浏览器使用UTF-8进行中文编码识别 `pageEncoding="UTF-8"` 本jsp上的中文文字，使用UTF-8进行编码 3\. 引入JSTL ``` <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> ``` 使用c和fmt两种标准标签库 4\. 引入js和css ``` <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <link href="css/back/style.css" rel="stylesheet"> ``` 5\. 预先定义一些判断输入框的函数，方便后面使用 ``` <script> function checkEmpty(id, name){ var value = $("#"+id).val(); if(value.length==0){ alert(name+ "不能为空"); $("#"+id)[0].focus(); return false; } return true; } function checkNumber(id, name){ var value = $("#"+id).val(); if(value.length==0){ alert(name+ "不能为空"); $("#"+id)[0].focus(); return false; } if(isNaN(value)){ alert(name+ "必须是数字"); $("#"+id)[0].focus(); return false; } return true; } function checkInt(id, name){ var value = $("#"+id).val(); if(value.length==0){ alert(name+ "不能为空"); $("#"+id)[0].focus(); return false; } if(parseInt(value)!=value){ alert(name+ "必须是整数"); $("#"+id)[0].focus(); return false; } return true; } ``` 6\. 对于删除超链，都需要进行确认操作 ``` $(function(){ $("a").click(function(){ var deleteLink = $(this).attr("deleteLink"); console.log(deleteLink); if("true"==deleteLink){ var confirmDelete = confirm("确认要删除"); if(confirmDelete) return true; return false; } }); }) ``` ``` <!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> <html> <head> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <link href="css/back/style.css" rel="stylesheet"> <script> function checkEmpty(id, name){ var value = $("#"+id).val(); if(value.length==0){ alert(name+ "不能为空"); $("#"+id)[0].focus(); return false; } return true; } function checkNumber(id, name){ var value = $("#"+id).val(); if(value.length==0){ alert(name+ "不能为空"); $("#"+id)[0].focus(); return false; } if(isNaN(value)){ alert(name+ "必须是数字"); $("#"+id)[0].focus(); return false; } return true; } function checkInt(id, name){ var value = $("#"+id).val(); if(value.length==0){ alert(name+ "不能为空"); $("#"+id)[0].focus(); return false; } if(parseInt(value)!=value){ alert(name+ "必须是整数"); $("#"+id)[0].focus(); return false; } return true; } $(function(){ $("a").click(function(){ var deleteLink = $(this).attr("deleteLink"); console.log(deleteLink); if("true"==deleteLink){ var confirmDelete = confirm("确认要删除"); if(confirmDelete) return true; return false; } }); }) </script> </head> <body> ``` # 步骤 3 : adminNavigator.jsp ![](../images/6304.png) ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <div class="navitagorDiv"> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <img style="margin-left:10px;margin-right:0px" class="pull-left" src="img/site/tmallbuy.png" height="45px"> <a class="navbar-brand" href="#nowhere">天猫后台</a> <a class="navbar-brand" href="admin_category_list">分类管理</a> <a class="navbar-brand" href="admin_user_list">用户管理</a> <a class="navbar-brand" href="admin_order_list">订单管理</a> </nav> </div> ~~~ > 参考菜鸟教程中，Bootstrap布局组件-Bootstrap导航栏。 # 步骤 4 : adminPage.jsp 这是分页JSP。分页功能不仅仅有前端效果，还需要结合服务端传递过来的数据综合才能起作用。所以对于adminPage.jsp不在此展开讲解，将在后面的分页部分，结合服务端，专门讲解 ![](../images/116305.png) ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <nav> <ul class="pagination"> <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>> <a href="?start=0${page.param}" > <span aria-hidden="true">«</span> </a> </li> <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>> <a href="?start=${page.start-page.count}${page.param}"> <span aria-hidden="true">‹</span> </a> </li> <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status"> <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>> <a href="?start=${status.index*page.count}${page.param}" <c:if test="${status.index*page.count==page.start}">class="current"</c:if> >${status.count}</a> </li> </c:forEach> <li <c:if test="${!page.hasNext}">class="disabled"</c:if>> <a href="?start=${page.start+page.count}${page.param}"> <span aria-hidden="true">›</span> </a> </li> <li <c:if test="${!page.hasNext}">class="disabled"</c:if>> <a href="?start=${page.last}${page.param}"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> <script> $(function(){ $("ul.pagination li.disabled a").click(function(){ return false; }); }); </script> ~~~ # 步骤 5 : adminFooter.jsp 页脚部分，目前内容部分是留白。大家掌握了之后，可以写自己的名字@myname, 年份，版本信息什么的。 ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <div class="footer"> </div> </body> </html> ```