[TOC]
## 步驟 1 : 先運行，看到效果，再學習
先將完整的 spring 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。
## 步驟 2 : 模仿和排錯
在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。
模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。
采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。
## 步驟 3 : 頁面截圖
重啟tomcat,通過訪問地址
`http://127.0.0.1:8080/tmall_ssm/admin_product_list?categoryId=12`
可以看到產品管理的界面
注： 這categoryId=12是分類的id，根據你的實際運行情況，采取不同的id值
## 步驟 4 : Product
Product在自動生成的基礎上增加category屬性
~~~
package com.dodoke.tmall.pojo;
import java.util.Date;
public class Product {
private Integer id;
private String name;
private String subTitle;
private Float originalPrice;
private Float promotePrice;
private Integer stock;
private Date createDate;
private Integer categoryId;
/*非數據庫字段*/
private Category category;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name == null ? null : name.trim();
}
public String getSubTitle() {
return subTitle;
}
public void setSubTitle(String subTitle) {
this.subTitle = subTitle == null ? null : subTitle.trim();
}
public Float getOriginalPrice() {
return originalPrice;
}
public void setOriginalPrice(Float originalPrice) {
this.originalPrice = originalPrice;
}
public Float getPromotePrice() {
return promotePrice;
}
public void setPromotePrice(Float promotePrice) {
this.promotePrice = promotePrice;
}
public Integer getStock() {
return stock;
}
public void setStock(Integer stock) {
this.stock = stock;
}
public Date getCreateDate() {
return createDate;
}
public void setCreateDate(Date createDate) {
this.createDate = createDate;
}
public Integer getCategoryId() {
return categoryId;
}
public void setCategoryId(Integer categoryId) {
this.categoryId = categoryId;
}
public Category getCategory() {
return category;
}
public void setCategory(Category category) {
this.category = category;
}
}
~~~
## 步驟 5 : ProductService
新增ProductService，提供CRUD一套
~~~
package com.dodoke.tmall.service;
import java.util.List;
import com.dodoke.tmall.pojo.Product;
public interface ProductService {
void add(Product c);
void delete(int id);
void update(Product c);
Product get(int id);
List list(int categoryId);
}
~~~
## 步驟 6 : ProductServiceImpl
新增ProductServiceImpl ，提供CRUD一套。 值得一提的是， get和list方法都會把取出來的Product對象設置上對應的category
~~~
package com.dodoke.tmall.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import com.dodoke.tmall.mapper.ProductMapper;
import com.dodoke.tmall.pojo.Category;
import com.dodoke.tmall.pojo.Product;
import com.dodoke.tmall.pojo.ProductExample;
import com.dodoke.tmall.service.CategoryService;
import com.dodoke.tmall.service.ProductService;
public class ProductServiceImpl implements ProductService {
@Autowired
ProductMapper productMapper;
@Autowired
CategoryService categoryService;
@Override
public void add(Product c) {
productMapper.insert(c);
}
@Override
public void delete(int id) {
productMapper.deleteByPrimaryKey(id);
}
@Override
public void update(Product p) {
productMapper.updateByPrimaryKeySelective(p);
}
@Override
public Product get(int id) {
Product p = productMapper.selectByPrimaryKey(id);
setCategory(p);
return p;
}
private void setCategory(Product p) {
int categoryId = p.getCategoryId();
Category category = categoryService.get(categoryId);
p.setCategory(category);
}
@Override
public List list(int categoryId) {
ProductExample example = new ProductExample();
example.createCriteria().andCategoryIdEqualTo(categoryId);
example.setOrderByClause("id desc");
List result = productMapper.selectByExample(example);
setCategory(result);
return result;
}
public void setCategory(List<Product> ps) {
for (Product p : ps) {
setCategory(p);
}
}
}
~~~
## 步驟 7 : ProductController
準備ProductController類
~~~
package com.dodoke.tmall.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.dodoke.tmall.pojo.Category;
import com.dodoke.tmall.pojo.Product;
import com.dodoke.tmall.service.CategoryService;
import com.dodoke.tmall.service.ProductService;
import com.dodoke.tmall.util.Page;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
@RequestMapping("")
@Controller
public class ProductController {
@Autowired
CategoryService categoryService;
@Autowired
ProductService productService;
@RequestMapping("admin_product_add")
public String add(Model model, Product p) {
productService.add(p);
return "redirect:admin_product_list?categoryId=" + p.getCategoryId();
}
@RequestMapping("admin_product_delete")
public String delete(int id) {
Product p = productService.get(id);
productService.delete(id);
return "redirect:admin_product_list?categoryId=" + p.getCategoryId();
}
@RequestMapping("admin_product_edit")
public String edit(Model model, int id) {
Product p = productService.get(id);
Category c = categoryService.get(p.getCategoryId());
p.setCategory(c);
model.addAttribute("p", p);
return "admin/editProduct";
}
@RequestMapping("admin_product_update")
public String update(Product p) {
productService.update(p);
return "redirect:admin_product_list?categoryId=" + p.getCategoryId();
}
@RequestMapping("admin_product_list")
public String list(int categoryId, Model model, Page page) {
Category c = categoryService.get(categoryId);
PageHelper.offsetPage(page.getStart(), page.getCount());
List<Product> ps = productService.list(categoryId);
int total = (int) new PageInfo<>(ps).getTotal();
page.setTotal(total);
page.setParam("&categoryId=" + c.getId());
model.addAttribute("ps", ps);
model.addAttribute("c", c);
model.addAttribute("page", page);
return "admin/listProduct";
}
}
~~~
## 步驟 8 : listProduct.jsp+editProduct.jsp
然后是查詢和編輯的jsp頁面
注： listProduct.jsp里的firstProductImage相關部分都注釋掉了，因為這部分內容要到**產品圖片管理** 才提供
listProduct.jsp：
```
<%@ 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">
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分類</a></li>
<li><a href="admin_product_list?categoryId=${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>
<th width="53px">原價格</th>
<th width="80px">優惠價格</th>
<th width="80px">庫存數量</th>
<th width="80px">圖片管理</th>
<th width="80px">設置屬性</th>
<th width="42px">編輯</th>
<th width="42px">刪除</th>
</tr>
</thead>
<tbody>
<c:forEach items="${ps}" var="p">
<tr>
<td>${p.id}</td>
<td>
<%--<c:if test="${!empty p.firstProductImage}">--%>
<%--<img width="40px" src="img/productSingle/${p.firstProductImage.id}.jpg">--%>
<%--</c:if>--%>
</td>
<td>${p.name}</td>
<td>${p.subTitle}</td>
<td>${p.originalPrice}</td>
<td>${p.promotePrice}</td>
<td>${p.stock}</td>
<td><a href="admin_productImage_list?pid=${p.id}"><span
class="glyphicon glyphicon-picture"></span></a></td>
<td><a href="admin_propertyValue_edit?pid=${p.id}"><span
class="glyphicon glyphicon-th-list"></span></a></td>
<td><a href="admin_product_edit?id=${p.id}"><span
class="glyphicon glyphicon-edit"></span></a></td>
<td><a deleteLink="true"
href="admin_product_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" 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="subTitle" name="subTitle" type="text"
class="form-control"></td>
</tr>
<tr>
<td>原價格</td>
<td><input id="originalPrice" value="99.98" name="originalPrice" type="text"
class="form-control"></td>
</tr>
<tr>
<td>優惠價格</td>
<td><input id="promotePrice" value="19.98" name="promotePrice" type="text"
class="form-control"></td>
</tr>
<tr>
<td>庫存</td>
<td><input id="stock" value="99" name="stock" type="text"
class="form-control"></td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<input type="hidden" name="categoryId" value="${c.id}">
<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;
}
return true;
});
});
</script>
```
editProduct.jsp：
```
<%@ 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">
<ol class="breadcrumb">
<li><a href="admin_category_list">所有分類</a></li>
<li><a href="admin_product_list?categoryId=${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_product_update" enctype="multipart/form-data">
<table class="editTable">
<tr>
<td>產品名稱</td>
<td><input id="name" name="name" value="${p.name}" type="text" class="form-control"></td>
</tr>
<tr>
<td>產品小標題</td>
<td><input id="subTitle" name="subTitle" type="text"
value="${p.subTitle}"
class="form-control"></td>
</tr>
<tr>
<td>原價格</td>
<td><input id="originalPrice" value="${p.originalPrice}" name="originalPrice" type="text"
class="form-control"></td>
</tr>
<tr>
<td>優惠價格</td>
<td><input id="promotePrice" value="${p.promotePrice}" name="promotePrice" type="text"
class="form-control"></td>
</tr>
<tr>
<td>庫存</td>
<td><input id="stock" value="${p.stock}" name="stock" 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="categoryId" value="${p.category.id}">
<button type="submit" class="btn btn-success">提 交</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<%@include file="../include/admin/adminFooter.jsp"%>
<script>
$(function(){
$("#editForm").submit(function(){
if(!checkEmpty("name","產品名稱")) {
return false;
}
if (!checkNumber("originalPrice", "原價格"))
return false;
if (!checkNumber("promotePrice", "優惠價格"))
return false;
if (!checkInt("stock", "庫存"))
return false;
return true;
});
});
</script>
``````
```
## 步驟 9 : 查詢功能講解
查詢地址admin_product_list映射的是ProductController的list()方法
1. 獲取分類 categoryId,和分頁對象page
2. 通過PageHelper設置分頁參數
3. 基于categoryId，獲取當前分類下的產品集合
4. 通過PageInfo獲取產品總數
5. 把總數設置給分頁page對象
6. 拼接字符串"&categoryId="+c.getId()，設置給page對象的Param值。 因為產品分頁都是基于當前分類下的分頁，所以分頁的時候需要傳遞這個categoryId
7. 把產品集合設置到 request的 "ps" 產品上
8. 把分類對象設置到 request的 "c" 產品上。 ( 這個c有什么用呢？ 在 其他-面包屑導航 中會用于顯示分類名稱)
9. 把分頁對象設置到 request的 "page" 對象上
10. 服務端跳轉到admin/listProduct.jsp頁面
11. 在listProduct.jsp頁面上使用c:forEach 遍歷ps集合，并顯示
ProductController.java：
~~~
@RequestMapping("admin_product_list")
public String list(int categoryId, Model model, Page page) {
Category c = categoryService.get(categoryId);
PageHelper.offsetPage(page.getStart(), page.getCount());
List<Product> ps = productService.list(categoryId);
int total = (int) new PageInfo<>(ps).getTotal();
page.setTotal(total);
page.setParam("&categoryId=" + c.getId());
model.addAttribute("ps", ps);
model.addAttribute("c", c);
model.addAttribute("page", page);
return "admin/listProduct";
}
~~~
listProduct.jsp：
~~~
<c:forEach items="${ps}" var="p">
<tr>
<td>${p.id}</td>
<td>
<%--<c:if test="${!empty p.firstProductImage}">--%>
<%--<img width="40px" src="img/productSingle/${p.firstProductImage.id}.jpg">--%>
<%--</c:if>--%>
</td>
<td>${p.name}</td>
<td>${p.subTitle}</td>
<td>${p.originalPrice}</td>
<td>${p.promotePrice}</td>
<td>${p.stock}</td>
<td><a href="admin_productImage_list?pid=${p.id}"><span
class="glyphicon glyphicon-picture"></span></a></td>
<td><a href="admin_propertyValue_edit?pid=${p.id}"><span
class="glyphicon glyphicon-th-list"></span></a></td>
<td><a href="admin_product_edit?id=${p.id}"><span
class="glyphicon glyphicon-edit"></span></a></td>
<td><a deleteLink="true"
href="admin_product_delete?id=${p.id}"><span
class=" glyphicon glyphicon-trash"></span></a></td>
</tr>
</c:forEach>
~~~
## 步驟 10 : 增加功能講解
1. 在listProduct.jsp提交數據的時候，除了提交產品名稱，小標題，原價格，優惠價格，庫存外還會提交categoryId
2. 在ProductController中獲取Product對象，并插入到數據庫
3. 客戶端跳轉到admin_product_list,并帶上參數categoryId
ProductController.java：
~~~
@RequestMapping("admin_product_add")
public String add(Model model, Product p) {
productService.add(p);
return "redirect:admin_product_list?categoryId=" + p.getCategoryId();
}
~~~
listProduct.jsp：
~~~
<form method="post" id="addForm" action="admin_product_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="subTitle" name="subTitle" type="text"
class="form-control"></td>
</tr>
<tr>
<td>原價格</td>
<td><input id="originalPrice" value="99.98" name="originalPrice" type="text"
class="form-control"></td>
</tr>
<tr>
<td>優惠價格</td>
<td><input id="promotePrice" value="19.98" name="promotePrice" type="text"
class="form-control"></td>
</tr>
<tr>
<td>庫存</td>
<td><input id="stock" value="99" name="stock" type="text"
class="form-control"></td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<input type="hidden" name="categoryId" value="${c.id}">
<button type="submit" class="btn btn-success">提 交</button>
</td>
</tr>
</table>
</form>
~~~
## 步驟 11 : 編輯功能講解
1. 在ProductController的edit方法中，根據id獲取product對象
2. 根據product對象的categoryId產品獲取Category對象，并把其設置在product對象的category產品上
3. 把product對象放在request的 "p" 產品中
3. 服務端跳轉到admin/editProduct.jsp
4. 在editProduct.jsp中顯示產品名稱
5. 在editProduct.jsp中隱式提供id和categoryId( categoryId 通過 p.category.id 獲取)
ProductController.java：
~~~
@RequestMapping("admin_product_edit")
public String edit(Model model, int id) {
Product p = productService.get(id);
model.addAttribute("p", p);
return "admin/editProduct";
}
~~~
editProduct.jsp：
~~~
<input type="hidden" name="categoryId" value="${p.category.id}">
<button type="submit" class="btn btn-success">提 交</button>
~~~
## 步驟 12 : 修改功能講解
1. 在ProductController的update方法中獲取Product對象
2. 借助productService更新這個對象到數據庫
3. 客戶端跳轉到admin_product_list，并帶上參數categoryId
~~~
@RequestMapping("admin_product_update")
public String update(Product p) {
productService.update(p);
return "redirect:admin_product_list?categoryId=" + p.getCategoryId();
}
~~~
## 步驟 13 : 刪除功能講解
1. 在ProductController的delete方法中獲取id
2. 根據id獲取Product對象
3. 借助productService刪除這個對象對應的數據
4. 客戶端跳轉到admin_product_list，并帶上參數categoryId
~~~
@RequestMapping("admin_product_delete")
public String delete(int id) {
Product p = productService.get(id);
productService.delete(id);
return "redirect:admin_product_list?categoryId=" + p.getCategoryId();
}
~~~
## 步驟 14 : 自己做一遍
關于產品管理這一塊的學習，推薦如下思路：
1. 先拿到本章節對應項目，配置好了跑一遍
2. 根據接著的講解，把里面的每一塊代碼的邏輯，思路，設計思想搞明白，不明白的及時問老師
3. 都理清楚之后，把可運行項目刪掉，按照：查詢，增加，刪除，編輯，修改的順序自己從頭到尾做一遍
只有，能夠獨立的做出來，才叫做把這些知識點的內容轉化為自己的技能
> 刪除中需要注意：
> * 先簡單點做，產品下有沒有對應屬性值，有沒有圖片，沒有屬性值并且沒有圖片才能刪除，學員自行添加相應邏輯。
> * 復雜點用標記：要刪除還是挺麻煩的，最好標記成為刪除狀態比較好。 否則要刪除的數據太多了，產品圖片信息，屬性值信息，訂單項信息，評價信息，這些都是依賴產品的。產品畢竟是核心數據，還是使用標記的好，不要輕易刪除的好。
- 項目簡介
- 功能一覽
- 前臺
- 后臺
- 開發流程
- 需求分析-展示
- 首頁
- 產品頁
- 分類頁
- 搜索結果頁
- 購物車查看頁
- 結算頁
- 確認支付頁
- 支付成功頁
- 我的訂單頁
- 確認收貨頁
- 確認收貨成功頁
- 評價頁
- 需求分析-交互
- 分類頁排序
- 立即購買
- 加入購物車
- 調整訂單項數量
- 刪除訂單項
- 生成訂單
- 訂單頁功能
- 確認付款
- 確認收貨
- 提交評價信息
- 登錄
- 注冊
- 退出
- 搜索
- 前臺需求列表
- 需求分析后臺
- 分類管理
- 屬性管理
- 產品管理
- 產品圖片管理
- 產品屬性設置
- 用戶管理
- 訂單管理
- 后臺需求列表
- 表結構設計
- 數據建模
- 表與表之間的關系
- 后臺-分類管理
- 可運行的項目
- 靜態資源
- JSP包含關系
- 查詢
- 分頁
- 增加
- 刪除
- 編輯
- 修改
- 做一遍
- 重構
- 分頁方式
- 分類逆向工程
- 所有逆向工程
- 后臺其他頁面
- 屬性管理實現
- 產品管理實現
- 產品圖片管理實現
- 產品屬性值設置
- 用戶管理實現
- 訂單管理實現
- 前端
- 前臺-首頁
- 可運行的項目
- 靜態資源
- ForeController
- home方法
- home.jsp
- homePage.jsp
- 前臺-無需登錄
- 注冊
- 登錄
- 退出
- 產品頁
- 模態登錄
- 分類頁
- 搜索
- 前臺-需要登錄
- 購物流程
- 立即購買
- 結算頁面
- 加入購物車
- 查看購物車頁面
- 登錄狀態攔截器
- 其他攔截器
- 購物車頁面操作
- 訂單狀態圖
- 生成訂單
- 我的訂單頁
- 我的訂單頁操作
- 評價產品
- 總結