[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>
~~~
```
<%@ 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 <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, 年份，版本信息什么的。
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>
~~~
## 步骤 1 : 先运行，看到效果，再学习
先将完整的 tmall-ssm 项目（向老师要相关资料），配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
## 步骤 2 : 模仿和排错
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码，来定位问题所在。
采用这种方式，**学习有效果，排错有效率**，可以较为明显地提升学习速度，跨过学习路上的各个槛。
## 步骤 3 : 效果
如图所示，新增加的分类，就是有图片的了。
## 步骤 4 : 页面中的增加分类部分
增加分类的代码是整合在listCategory.jsp中的
需要注意几点：
1. method="post" 用于保证中文的正确提交
2. 必须有enctype="multipart/form-data"，这样才能上传文件
3. accept="image/*" 这样把上传的文件类型限制在了图片
- 项目简介
- 功能一览
- 前台
- 后台
- 开发流程
- 需求分析-展示
- 首页
- 产品页
- 分类页
- 搜索结果页
- 购物车查看页
- 结算页
- 确认支付页
- 支付成功页
- 我的订单页
- 确认收货页
- 确认收货成功页
- 评价页
- 需求分析-交互
- 分类页排序
- 立即购买
- 加入购物车
- 调整订单项数量
- 删除订单项
- 生成订单
- 订单页功能
- 确认付款
- 确认收货
- 提交评价信息
- 登录
- 注册
- 退出
- 搜索
- 前台需求列表
- 需求分析后台
- 分类管理
- 属性管理
- 产品管理
- 产品图片管理
- 产品属性设置
- 用户管理
- 订单管理
- 后台需求列表
- 表结构设计
- 数据建模
- 表与表之间的关系
- 后台-分类管理
- 可运行的项目
- 静态资源
- JSP包含关系
- 查询
- 分页
- 增加
- 删除
- 编辑
- 修改
- 做一遍
- 重构
- 分页方式
- 分类逆向工程
- 所有逆向工程
- 后台其他页面
- 属性管理实现
- 产品管理实现
- 产品图片管理实现
- 产品属性值设置
- 用户管理实现
- 订单管理实现
- 前端
- 前台-首页
- 可运行的项目
- 静态资源
- ForeController
- home方法
- home.jsp
- homePage.jsp
- 前台-无需登录
- 注册
- 登录
- 退出
- 产品页
- 模态登录
- 分类页
- 搜索
- 前台-需要登录
- 购物流程
- 立即购买
- 结算页面
- 加入购物车
- 查看购物车页面
- 登录状态拦截器
- 其他拦截器
- 购物车页面操作
- 订单状态图
- 生成订单
- 我的订单页
- 我的订单页操作
- 评价产品
- 总结