[TOC] # 步驟1 : 先運行，看到效果，再學習 先將完整的項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 # 步驟2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 # 步驟3 : 效果 重啟tomcat,通過訪問地址 `http://localhost:8080/tmall_ssm/admin_property_list?categoryId=30` 可以看到屬性管理的界面 注： 這categoryId=12是分類的id，根據你的實際運行情況，采取不同的id值  # 步驟4：在分類管理頁面上添加屬性管理的超鏈 接下來講， 基于 分類管理可運行項目 做了哪些工作以支持屬性管理的操作。 首先，在listCategory.jsp里，加上屬性管理這一列 ``` <th>屬性管理</th> ``` ``` <td><a href="admin_property_list?cid=${c.id}"><span class="glyphicon glyphicon-th-list"></span></a></td> ```  ``` <%@ 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"%> ``` # 步驟5：修改實體類Property.java 1. 與Category的多對一關系 如圖所示，這些屬性，都屬于平板電視這個分類。  ``` package com.dodoke.bean; /******************************************************************************* * javaBeans t_property --> TProperty <table explanation> * * @author 2019-01-17 08:35:28 * */ public class Property { // field /** ID **/ private int id; /** 名稱 **/ private String name; /** 所屬分類 **/ private Category categroy; // method public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Category getCategroy() { return categroy; } public void setCategroy(Category categroy) { this.categroy = categroy; } @Override public String toString() { return "Property [id=" + id + ", name=" + name + ", categroy=" + categroy + "]"; } } ``` # 步驟6：PropertyDao和PropertyDaoImpl PropertyDao： ``` package com.dodoke.dao.inter; import java.util.List; import com.dodoke.bean.Property; public interface PropertyDao { /** * 增加 * * @param property */ public void add(Property property); /** * 刪除 * * @param id */ public void delete(int id); /** * 修改 * * @param property */ public void update(Property property); /** * 根據id獲取 * * @param id * @return */ public Property get(int id); /** * 某個分類下的屬性分頁查詢 * @param cid * @param start * @param count * @return */ public List<Property> list(int cid,int start, int count); /** * 查詢某個分類下的所有屬性 * * @return */ public List<Property> list(int cid); /** * 獲取某個分類下的屬性總數 * * @return */ public int getTotal(int cid); } ``` PropertyDaoImpl： ``` package com.dodoke.dao.impl; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.dodoke.bean.Category; import com.dodoke.bean.Property; import com.dodoke.dao.inter.CategoryDao; import com.dodoke.dao.inter.PropertyDao; import com.dodoke.util.DBUtil; public class PropertyDaoImpl implements PropertyDao { private CategoryDao categoryDao = new CategoryDaoImpl(); @Override public void add(Property property) { String sql = "insert into t_property(name, category_id) values(?,?)"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql, Statement.RETURN_GENERATED_KEYS);) { ps.setString(1, property.getName()); ps.setInt(2, property.getCategory().getId()); ps.executeUpdate(); ResultSet rs = ps.getGeneratedKeys(); if (rs.next()) { int id = rs.getInt(1); property.setId(id); } } catch (SQLException e) { e.printStackTrace(); } } @Override public void delete(int id) { String sql = "delete from t_property where id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, id); ps.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } } @Override public void update(Property property) { String sql = "update t_property set category_id= ?, name=? where id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, property.getCategory().getId()); ps.setString(2, property.getName()); ps.setInt(3, property.getId()); ps.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } } @Override public Property get(int id) { Property bean = new Property(); String sql = "select * from t_property where id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, id); ResultSet rs = ps.executeQuery(); if (rs.next()) { String name = rs.getString("name"); int cid = rs.getInt("category_id"); bean.setName(name); Category category = categoryDao.get(cid); bean.setCategory(category); bean.setId(id); } } catch (SQLException e) { e.printStackTrace(); } return bean; } @Override public List<Property> list(int cid, int start, int count) { List<Property> beans = new ArrayList<Property>(); String sql = "select * from t_property where category_id = ? order by id desc limit ?,? "; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, cid); ps.setInt(2, start); ps.setInt(3, count); ResultSet rs = ps.executeQuery(); while (rs.next()) { Property bean = new Property(); int id = rs.getInt("id"); String name = rs.getString("name"); Category category = categoryDao.get(cid); bean.setId(id); bean.setName(name); bean.setCategory(category); beans.add(bean); } } catch (SQLException e) { e.printStackTrace(); } return beans; } @Override public List<Property> list(int cid) { return list(cid, 0, Short.MAX_VALUE); } @Override public int getTotal(int cid) { int total = 0; String sql = "select count(*) from t_property where category_id = ?"; try (Connection c = DBUtil.getConnection(); PreparedStatement ps = c.prepareStatement(sql);) { ps.setInt(1, cid); ResultSet rs = ps.executeQuery(); while (rs.next()) { total = rs.getInt(1); } } catch (SQLException e) { e.printStackTrace(); } return total; } } ``` # 步驟7：PropertyServlet類 ``` package com.dodoke.controller; import java.util.List; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.dodoke.bean.Category; import com.dodoke.bean.Property; import com.dodoke.util.Page; /** * Servlet implementation class PropertyServlet */ @WebServlet("/PropertyServlet") public class PropertyServlet extends BaseBackServlet { private static final long serialVersionUID = 1L; @Override public String add(HttpServletRequest request, HttpServletResponse response) { int cid = Integer.parseInt(request.getParameter("cid")); Category c = categoryDao.get(cid); String name = request.getParameter("name"); Property p = new Property(); p.setCategory(c); p.setName(name); propertyDao.add(p); return "@admin_property_list?cid=" + cid; } @Override public String delete(HttpServletRequest request, HttpServletResponse response) { int id = Integer.parseInt(request.getParameter("id")); Property p = propertyDao.get(id); propertyDao.delete(id); return "@admin_property_list?cid=" + p.getCategory().getId(); } @Override public String edit(HttpServletRequest request, HttpServletResponse response) { int id = Integer.parseInt(request.getParameter("id")); Property p = propertyDao.get(id); request.setAttribute("p", p); return "admin/editProperty.jsp"; } @Override public String update(HttpServletRequest request, HttpServletResponse response) { int cid = Integer.parseInt(request.getParameter("cid")); Category c = categoryDao.get(cid); int id = Integer.parseInt(request.getParameter("id")); String name = request.getParameter("name"); Property p = new Property(); p.setCategory(c); p.setId(id); p.setName(name); propertyDao.update(p); return "@admin_property_list?cid=" + p.getCategory().getId(); } @Override public String list(HttpServletRequest request, HttpServletResponse response, Page page) { int cid = Integer.parseInt(request.getParameter("cid")); Category c = categoryDao.get(cid); List<Property> ps = propertyDao.list(cid, page.getStart(), page.getCount()); int total = propertyDao.getTotal(cid); page.setTotal(total); page.setParam("&cid=" + c.getId()); request.setAttribute("ps", ps); request.setAttribute("c", c); request.setAttribute("page", page); return "admin/listProperty.jsp"; } } ``` # 步驟8：修改BaseBackServlet 添加dao對象，以便在子類中調用。 ``` public PropertyDao propertyDao = new PropertyDaoImpl(); ``` # 步驟 9 : listProperty.jsp+editProperty.jsp listProperty.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 true; return false; }); }); </script> <title>屬性管理</title> <div class="workingArea"> <ol class="breadcrumb"> <li><a href="admin_category_list">所有分類</a></li> <li><a href="admin_property_list?cid=${c.id}">${c.name}</a></li> <li class="active">屬性管理</li> </ol> <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> </tr> </thead> <tbody> <c:forEach items="${ps}" var="p"> <tr> <td>${p.id}</td> <td>${p.name}</td> <td><a href="admin_property_edit?id=${p.id}"><span class="glyphicon glyphicon-edit"></span></a></td> <td><a deleteLink="true" href="admin_property_delete?id=${p.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_property_add"> <table class="addTable"> <tr> <td>屬性名稱</td> <td><input id="name" name="name" type="text" class="form-control"></td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <input type="hidden" name="cid" value="${c.id}"> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> </div> <%@include file="../include/admin/adminFooter.jsp"%> ``` editProperty.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"%> <title>編輯屬性</title> <div class="workingArea"> <ol class="breadcrumb"> <li><a href="admin_category_list">所有分類</a></li> <li><a href="admin_property_list?cid=${p.category.id}">${p.category.name}</a></li> <li class="active">編輯屬性</li> </ol> <div class="panel panel-warning editDiv"> <div class="panel-heading">編輯屬性</div> <div class="panel-body"> <form method="post" id="editForm" action="admin_property_update"> <table class="editTable"> <tr> <td>屬性名稱</td> <td><input id="name" name="name" value="${p.name}" type="text" class="form-control"></td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <input type="hidden" name="id" value="${p.id}"> <input type="hidden" name="cid" value="${p.category.id}"> <button type="submit" class="btn btn-success">提 交</button></td> </tr> </table> </form> </div> </div> </div> ``` # 步驟10: 查詢功能講解 查詢訪問的是PropertyServlet的list()方法 1\. 獲取分類 cid 2\. 基于cid，獲取當前分類下的屬性集合 3\. 獲取當前分類下的屬性總數，并且設置給分頁page對象 4\. 拼接字符串"&cid="+c.getId()，設置給page對象的Param值。 因為屬性分頁都是基于當前分類下的分頁，所以分頁的時候需要傳遞這個cid 5\. 把屬性集合設置到 request的 "ps" 屬性上 6\. 把分類對象設置到 request的 "c" 屬性上 7\. 把分頁對象設置到 request的 "page" 對象上 8\. 服務端跳轉到admin/listProperty.jsp頁面 9\. 在listProperty.jsp頁面上使用c:forEach 遍歷ps集合，并顯示  PropertyServlet片段： ``` @Override public String list(HttpServletRequest request, HttpServletResponse response, Page page) { int cid = Integer.parseInt(request.getParameter("cid")); Category c = categoryDao.get(cid); List<Property> ps = propertyDao.list(cid, page.getStart(), page.getCount()); int total = propertyDao.getTotal(cid); page.setTotal(total); page.setParam("&cid=" + c.getId()); request.setAttribute("ps", ps); request.setAttribute("c", c); request.setAttribute("page", page); return "admin/listProperty.jsp"; } ``` listPropety.jsp ``` <c:forEach items="${ps}" var="p"> <tr> <td>${p.id}</td> <td>${p.name}</td> <td><a href="admin_property_edit?id=${p.id}"><span class="glyphicon glyphicon-edit"></span></a></td> <td><a deleteLink="true" href="admin_property_delete?id=${p.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> ``` # 步驟 11 : 增加功能講解 1\. 在listProperty.jsp頁面提交數據的時候，除了提交屬性名稱，還會提交cid 2\. 在PropertyServlet中根據獲取到的cid,name參數，創建新的Property對象，并插入到數據庫 3\. 客戶端跳轉到admin\_property\_list,并帶上參數cid  PropertyServlet片段： ``` public String add(HttpServletRequest request, HttpServletResponse response) { int cid = Integer.parseInt(request.getParameter("cid")); Category c = categoryDao.get(cid); String name = request.getParameter("name"); Property p = new Property(); p.setCategory(c); p.setName(name); propertyDao.add(p); return "@admin_property_list?cid=" + cid; } ``` listPropety.jsp： ``` <form method="post" id="addForm" action="admin_property_add"> <table class="addTable"> <tr> <td>屬性名稱</td> <td><input id="name" name="name" type="text" class="form-control"></td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <input type="hidden" name="cid" value="${c.id}"> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> ``` # 步驟12: 編輯功能講解 1\. 在PropertyServlet的edit方法中，根據id獲取Property對象 2\. 把Property對象放在request的 "p" 屬性中 3\. 服務端跳轉到admin/editProperty.jsp 4\. 在editProperty.jsp中顯示屬性名稱 5\. 在editProperty.jsp中隱式提供id和cid ``` <input type="hidden" name="id" value="${p.id}"> <input type="hidden" name="cid" value="${p.category.id}"> ``` PropertyServlet片段： ``` public String edit(HttpServletRequest request, HttpServletResponse response) { int id = Integer.parseInt(request.getParameter("id")); Property p = propertyDao.get(id); request.setAttribute("p", p); return "admin/editProperty.jsp"; } ``` editPropety.jsp： ``` <form method="post" id="editForm" action="admin_property_update"> <table class="editTable"> <tr> <td>屬性名稱</td> <td><input id="name" name="name" value="${p.name}" type="text" class="form-control"></td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <input type="hidden" name="id" value="${p.id}"> <input type="hidden" name="cid" value="${p.category.id}"> <button type="submit" class="btn btn-success">提 交</button></td> </tr> </table> </form> ``` # 步驟 13 : 修改功能講解 1\. 在PropertyServlet的update方法中獲取cid，id, name等參數 2\. 根據這些參數創建Property對象 3\. 借助propertyDAO更新這個對象到數據庫 4\. 客戶端跳轉到admin\_property\_list，并帶上參數cid  ``` public String update(HttpServletRequest request, HttpServletResponse response) { int cid = Integer.parseInt(request.getParameter("cid")); Category c = categoryDao.get(cid); int id = Integer.parseInt(request.getParameter("id")); String name = request.getParameter("name"); Property p = new Property(); p.setCategory(c); p.setId(id); p.setName(name); propertyDao.update(p); return "@admin_property_list?cid=" + p.getCategory().getId(); } ``` # 步驟 14 : 刪除功能講解 1. 在PropertyController的delete方法中獲取id 2. 根據id獲取Property對象 3. 借助propertyService刪除這個對象對應的數據 4. 客戶端跳轉到`admin_property_list`，并帶上參數categoryId  ``` public String delete(HttpServletRequest request, HttpServletResponse response) { int id = Integer.parseInt(request.getParameter("id")); Property p = propertyDao.get(id); propertyDao.delete(id); return "@admin_property_list?cid=" + p.getCategory().getId(); } ``` # 步驟 15 : 其他-面包屑導航 在屬性管理頁面的頁頭，有一個面包屑導航 第一個連接跳轉到`admin_category_list` 第二個連接跳轉到`admin_property_list?cid=` `` 樣式用的是Bootstrap面包屑導航  ``` <ol class="breadcrumb"> <li><a href="admin_category_list">所有分類</a></li> <li><a href="admin_property_list?categoryId=${c.id}">${c.name}-屬性</a></li> <li class="active">屬性管理</li> </ol> ``` # 步驟 16 : 其他-分頁 這里的分頁比起分類管理中的分頁多了一個參數categoryId 1. 在`PropertyController.list()` 方法中，把`&cid=` 參數設置到在page對象的param屬性上 ``` page.setParam("&cid=" + c.getId()); ``` 2. 在adminPage.jsp頁面中通過`${page.param}`取出這個參數 ``` <%@ 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">&laquo;</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">&lsaquo;</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">&rsaquo;</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">&raquo;</span> </a> </li> </ul> </nav> ```