天猫整站J2EE系列教材（八十九）- 后台-分类管理

天猫整站J2EE系列教材（八十八）- 后台-分类管理 - Filter配合Servlet

工具版本兼容问题

6分19秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器。如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的视频下载插件会影响播放，如 IDM 等，请关闭或者切换其他浏览器

步骤 1 : 分类查询对应的JSP文件
步骤 2 : adminHeader.jsp
步骤 3 : adminNavigator.jsp
步骤 4 : adminPage.jsp
步骤 5 : adminFooter.jsp

步骤 1 :

分类查询对应的JSP文件

edit 顶折

纠问

完整的J2EE模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈，从无到有涵盖全部147个知识点，475个开发步骤, 充实J2EE项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买

分类查询对应的JSP文件是listCategory.jsp，但是本知识点不讲解listCategory.jsp本身，而是讲解其所包含的几个公共的jsp文件。
listCategory.jsp本身留在分类管理-查询，结合MVC模式讲解。

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" 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"%>

代码行数较多，请点击查看

<%@ 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> -->
					<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

edit 顶折

纠问

每个后台页面都在一开始使用了adminHeader.jsp
1. 表示本页面会使用html5的技术

<!DOCTYPE html>

2. jsp指令

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>

contentType="text/html; charset=UTF-8" 告诉浏览器使用UTF-8进行中文编码识别
pageEncoding="UTF-8" 本jsp上的中文文字，使用UTF-8进行编码
isELIgnored="false" 本jsp上会使用EL表达式

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

5. 预先定义一些判断输入框的函数，方便后面使用

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

edit 顶折

纠问

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<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>

步骤 4 :

adminPage.jsp

edit 顶折

纠问

这是分页JSP。
分页功能不仅仅有前端效果，还需要结合服务端传递过来的数据综合才能起作用。所以对于adminPage.jsp不在此展开讲解，将在后面的分页部分，结合服务端，专门讲解

代码行数较多，请点击查看

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<script>
$(function(){
	$("ul.pagination li.disabled a").click(function(){
		return false;
	});
});

</script>

<nav>
  <ul class="pagination">
    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
      <a  href="?page.start=0${page.param}" aria-label="Previous" >
        <span aria-hidden="true">«</span>
      </a>
    </li>

    <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
      <a  href="?page.start=${page.start-page.count}${page.param}" aria-label="Previous" >
        <span aria-hidden="true">‹</span>
      </a>
    </li>    

    <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
    
    	<c:if test="${status.count*page.count-page.start<=20 && status.count*page.count-page.start>=-10}">
		    <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
		    	<a  
		    	href="?page.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:if>
    </c:forEach>

    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
      <a href="?page.start=${page.start+page.count}${page.param}" aria-label="Next">
        <span aria-hidden="true">›</span>
      </a>
    </li>
    <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
      <a href="?page.start=${page.last}${page.param}" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

步骤 5 :

adminFooter.jsp

edit 顶折

纠问

页脚部分，目前是留白。大家掌握了之后，可以写自己的名字@myname, 年份，版本信息什么的。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<div class="footer">
</div>

</body>
</html>

天猫整站J2EE系列教材（八十八）- 后台-分类管理 - Filter配合Servlet

天猫整站J2EE系列教材（九十）- 后台-分类管理 - 查询

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2022-05-30 为什么jsp不放在web-inf下而是直接放在web下

刘一首	关于实践项目-天猫整站J2EE-JSP包含关系的提问为什么jsp不放在web-inf下而是直接放在web下

1 个答案

how2j
答案时间：2022-06-02

都可以呀，没有说一定要放在web-inf下呀。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-05-09 图片加载不出来

sunda5678511

关于实践项目-天猫整站J2EE-JSP包含关系的提问

图片无法加载怎么回事

1 个答案

how2j
答案时间：2021-05-13

你忘记做这个步骤了： https://how2j.cn/k/tmall-j2ee/tmall-j2ee-1007/1007.html

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-04-30 check函数里的 $("#"+id)[0].focus();

2020-03-27 通过index.jsp跳转到 /admin_category_list 这个页面为什么这个页面就是listCategory 没看到listCategory有什么指示

2019-12-26 <script src="js/jquery/2.0.0/jquery.min.js"></script> 其中src路径的疑问。。

LZPsss

关于实践项目-天猫整站J2EE-JSP包含关系的提问

1、<script src="js/jquery/2.0.0/jquery.min.js"></script> 2、adminHeader.jsp的路径是"E:\project\tmall\web\include\admin" 3、而js文件夹的路径是"E:\project\tmall\web" 4、js文件夹不是应该在adminHeader.jsp的上级目录的上级目录吗？即使用../../ 5、即src="../../js/jquery/2.0.0/jquery.min.js" 有点不太理解步骤1src的写法，还请站长大大解答，感谢！

<script src="js/jquery/2.0.0/jquery.min.js"></script>

1 个答案

how2j
答案时间：2019-12-27

都不是啦，是和当前浏览器地址里的位置相关的。比如地址是 http://127.0.0.1:8080/tmall/admin_category_list ，那么对应的地址就是 http://127.0.0.1:8080/tmall/ 这里啦。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 29 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫整站J2EE-JSP包含关系的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图