|
|
2分47秒 步骤 1 : 分类查询对应的JSP文件 步骤 2 : adminHeader.jsp 步骤 3 : adminNavigator.jsp 步骤 4 : adminPage.jsp 步骤 5 : adminFooter.jsp
完整的SSM模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE，SSM一整套技术栈， 从无到有涵盖全部126个知识点，560个开发步骤, 充实SSM项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
分类查询对应的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" 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="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"%>
完整的SSM模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE，SSM一整套技术栈， 从无到有涵盖全部126个知识点，560个开发步骤, 充实SSM项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
每个后台页面都在一开始使用了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>
完整的SSM模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE，SSM一整套技术栈， 从无到有涵盖全部126个知识点，560个开发步骤, 充实SSM项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买 <%@ 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>
完整的SSM模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE，SSM一整套技术栈， 从无到有涵盖全部126个知识点，560个开发步骤, 充实SSM项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
这是分页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>
完整的SSM模仿天猫项目，使用J2SE、前端技术(包含所有前端jsp文件)、J2EE，SSM一整套技术栈， 从无到有涵盖全部126个知识点，560个开发步骤, 充实SSM项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买
页脚部分，目前是留白。 大家掌握了之后，可以写自己的名字@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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2021-04-30
代码完全按照以上步骤写的，运行Tomcat后，出现404
1 个答案
how2j 跳转到问题位置 答案时间：2021-05-05 idea, tomcat 都使用站长提供的版本，规避兼容性问题，节约自己的时间：
https://how2j.cn/k/helloworld/helloworld-version/1718.html
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-03-23
站长大大，JSP过时了吗？
2019-12-13
路径看不懂呀！！！
2019-10-10
value = $("#"+id).val();为什么还要用val来返回值呢？
2019-09-21
new里找不到创建文件夹的选项
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 9 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
