JSP包含關系 · 教案-天貓整站開發-SSM版（打印用）

[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"%> ![](https://box.kancloud.cn/a34eddbefd4bd25441ad3ff57dd85e6a_250x144.png) ~~~ <%@ 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 ![](https://box.kancloud.cn/41e685d64ad3e6d05e2ac10b5fa878d9_488x67.png) ~~~ <%@ 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不在此展開講解，將在后面的分頁部分，結合服務端，專門講解 ![](https://box.kancloud.cn/baeba8f7e0d348b4e33d6b4719805542_304x74.png) ~~~ <%@ 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/*" 這樣把上傳的文件類型限制在了圖片 ![](https://box.kancloud.cn/68b914db7c091d7e589fc9e77f246f44_525x265.png)