[TOC]
# JSP包含关系
## 步骤 1 : 分类查询对应的JSP文件
分类查询对应的JSP文件是listCategory.jsp，但是本知识点不讲解listCategory.jsp本身，而是讲解其所包含的几个公共的jsp文件。
listCategory.jsp本身留在分类管理-查询讲解。
listCategory.jsp 用到了4个公共包含文件
1. <%@include file="../include/admin/adminHeader.jsp"%>
2. <%@include file="../include/admin/adminNavigator.jsp"%>
3. <%@include file="../include/admin/adminPage.jsp"%>
4. <%@include file="../include/admin/adminFooter.jsp"%>
~~~
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="../include/admin/adminHeader.jsp"%>
<%@include file="../include/admin/adminNavigator.jsp"%>
<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>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<c:forEach items="${cs}" 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="image" />
</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"%>
<script>
$(function(){
$("#addForm").submit(function(){
if(!checkEmpty("name","分类名称"))
return false;
if(!checkEmpty("categoryPic","分类图片"))
return false;
return true;
});
});
</script>
~~~
## 步骤 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"%>`
使用c标准标签库
4. 引入css和js
~~~
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<link href="css/back/style.css" rel="stylesheet">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
~~~
~~~
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<link href="css/back/style.css" rel="stylesheet">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
~~~
## 步骤 3 : adminNavigator.jsp
~~~
<%@ 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不在此展开讲解，将在后面的分页部分，结合服务端，专门讲解
~~~
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<nav>
<ul class="pagination">
<li>
<a href="?start=0${page.param}" <c:if test="${!page.hasPreviouse}">class="btn disabled"</c:if> >
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="?start=${page.start-page.count}${page.param}" <c:if test="${!page.hasPreviouse}">class="btn disabled"</c:if>>
<span aria-hidden="true">‹</span>
</a>
</li>
<c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
<li >
<a href="?start=${status.index*page.count}${page.param}"
<c:if test="${status.index*page.count==page.start}">class="btn disabled current "</c:if>
>${status.count}</a>
</li>
</c:forEach>
<li >
<a href="?start=${page.start+page.count}${page.param}" <c:if test="${!page.hasNext}">class="btn disabled"</c:if>>
<span aria-hidden="true">›</span>
</a>
</li>
<li >
<a href="?start=${page.last}${page.param}" <c:if test="${!page.hasNext}">class="btn disabled"</c:if>>
<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, 年份，版本信息什么的。
1. 预先定义一些判断输入框的函数，方便后面使用
~~~
// 判断是否为空
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;
}
~~~
2. 对于删除超链，都需要进行确认操作
~~~
$(function() {
// 对于删除超链,进行确认操作
$("a").click(function() {
var deleteLink = $(this).attr("deleteLink");
console.log(deleteLink);
if ("true" == deleteLink) {
var confirmDelete = confirm("确认要删除");
if (confirmDelete) {
return true;
}
return false;
}
});
})
~~~
~~~
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="footer"></div>
</body>
<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>
</html>
~~~
