how2j.cn


6分19秒
本视频采用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"%>
分类查询对应的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"%>
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
每个后台页面都在一开始使用了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

<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

edit
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
adminNavigator.jsp
<%@ 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>
<%@ 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>
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
这是分页JSP。
分页功能不仅仅有前端效果,还需要结合服务端传递过来的数据综合才能起作用。 所以对于adminPage.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>
完整的J2EE模仿天猫项目,使用J2SE、前端技术(包含所有前端jsp文件)、J2EE一整套技术栈, 从无到有涵盖全部147个知识点,475个开发步骤, 充实J2EE项目经验,为简历加上一个有吸引力的砝码.
增值内容,点击购买
页脚部分,目前是留白。 大家掌握了之后,可以写自己的名字@myname, 年份,版本信息什么的。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <div class="footer"> </div> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

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

</body>
</html>


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


问答区域    
2022-05-30 为什么jsp不放在web-inf下而是直接放在web下
刘一首

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




1 个答案

how2j
答案时间:2022-06-02
都可以呀,没有说一定要放在web-inf下呀。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




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




图片无法加载 怎么回事
加载中

							

							


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路径的疑问。。


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫整站J2EE-JSP包含关系 的提问

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

上传截图