第一篇文章鏈接：模仿天貓實戰【SSM版】——項目起步
第二篇文章鏈接：模仿天貓實戰【SSM版】——後臺開發

總結：項目從4-27號開始寫，到今天5-7號才算真正的完工，有許多粗糙的地方，但總算完成了，比想象中的開發周期要久的多，並且大部分的時間都花在了前端頁面的編寫上...僅以此文來總結一下

項目總結

功能一覽表

大致理了一下功能列表，應該是齊全的，其中推薦鏈接暫時不支持修改。

項目頁面一覽表

• 後端頁面： 後臺所需要用到的頁面，從名字很好區分功能，其中 index.jsp 只有一行代碼用於跳轉
• 公共頁面： 都是前端頁面，從對天貓頁面的分析提取出一些復用比較高的頁面用於動態的包含在其他前端頁面中。
• 前臺頁面：前臺相較於後臺頁面 CSS 更加復雜，交互也更多，我把每一個頁面的需要用到的 css 和 js 代碼均保留在了當前 JSP 頁面中，方便瀏覽學習。

項目主要邏輯類

• 控制器（Controller）： 用於控制頁面的邏輯， 提取出一個 PageController 來專門控制頁面的跳轉，ForeController 用於前臺所有的邏輯操作
• 攔截器（Interceptor）： LoginInteceptor 用於對登錄進行判斷，因為有一些頁面需要登錄之後才能訪問的，例如：購物車；OtherInterceptor 用於向頁面中添加一些其他的數據，例如：購物車數量。
• 業務層（Service層）：
  業務處理層，其中封裝了 Dao 層，用於完成主要的邏輯處理。

不需要登錄就能訪問的頁面（以下為攔截器中的代碼片段）：

• 其中包括：主頁、搜索結果頁、產品展示頁、登錄頁、註冊頁。
• 還包括一些其他的路徑用於處理邏輯，test 為開發過程中用於測試的頁面

前臺總結

前臺花費了大部分的時間，不僅僅是繁雜的樣式和頁面需要自己去編寫，業務邏輯也比後臺要復雜一些，因為是模仿，所以大部分的 CSS 我都是參照著天貓官網寫的（利用FireFox來查看元素和元素樣式）：

另外一部分是參照了how2j.cn上模仿的前端教程：戳這裏

首頁

簡要的首頁大概就是這樣，請別在意輪播下面的【女裝/內衣】中的產品，因為在4月份的時候，第一個分類的名字還叫【女裝 /男裝 /內衣】（好像是這個），後來項目寫著寫著突然改了...

觀察大部分的頁面，其實都是包含了其中的三個部分：

即頂部導航欄、一個搜索框、還有底部，我們可以單獨把他們寫成一個 jsp ，並動態的包含在我們的頁面中

• 首頁分類欄

因為一開始，我以為分類欄中保存的是一些直接的產品，但是分析前端的時候發現它們只是一些 hot-word 熱詞，所以為了和天貓的首頁保持一致，我直接把分類欄寫死了寫成了一個單獨的 JSP 文件並包含進了主頁：

我還自己寫了一個小程序，用來將這些 hor-word 轉換成對應的 html 代碼，不然這手寫 2000 行可能真的夠嗆...

產品搜索頁

並且支持按照【綜合（銷量*評價）】、【人氣（評論量）】、【銷量】、【價格】來排序產品，使用 Java 8 的新特性來完成該功能：

產品展示頁

所有的產品展示圖片均是來自how2j.com上的一張圖，前面有鏈接，表示有參照這個教程來做。

購買頁

在產品頁中點擊立即購買，或者在購物車點擊結算都會跳轉到該頁面，創建訂單。

付款頁面

無恥的黏了一張自己的收款二維碼...

付款成功頁

當點擊確認支付按鈕之後，就會跳轉到該頁面來。

購物車頁

該頁面支持刪除訂單和對訂單項進行相關的操作，點擊結算頁面跳轉到購買頁。

我的訂單頁

該頁面用於對訂單的管理，可以查看和操作訂單。

評價頁

當完成購買，即經過購買→支付→發貨→確認收貨的流程之後，即可對產品進行評論，評論完成後能看到其他用戶的評價信息：

註冊頁

用戶註冊頁，在前端判斷兩次密碼是否相同，並提交給後臺判斷用戶名是否唯一。

登錄頁

因為分辨率的問題有一點 BUG，不過不影響體驗，登錄之後頂部導航欄出現用戶信息：

後臺總結

前臺因為有現成的原型可以參照和模仿，後臺需要自己去設計和實現界面，所以我直接找了一個模板代碼，很方便也很快的完成了開發，在我的第二篇文章：模仿天貓實戰【SSM版】——後臺開發 有介紹。

分類管理

其中的分頁和搜索功能是我找來的模板中用 js 代碼來實現的，分類管理中不僅提供了更改分類名稱的功能，還能管理分類下的產品和屬性。

產品管理頁

產品圖片管理頁

產品的圖片是默認放置在 img/product/產品的id號/ 目錄下的，並且默認的五張圖片分別為：1.jpg、2.jpg.....5.jpg，用於默認顯示的圖片均為 1.jpg

屬性值管理頁

產品屬性值管理頁，能增加的屬性值只能為當前分類下擁有的屬性。

用戶管理

提供一個修改密碼的功能，給申訴修改密碼的用戶留一條後路。

訂單管理頁

等待發貨的訂單有一個發貨按鈕，用於發貨。

上面有一些產品管理的按鈕亂入了..直接拷貝的之前的圖片，左側欄中的產品管理按鈕是刪除了的...

推薦鏈接管理

暫時不提供修改功能。

項目中遇到的一些問題

輪播失效

Bootstrap 的引入要在 JQuery 之後，不然不能正常使用...

為什麽不在 PropertyValue 表中增加 property_name 字段？

在產品詳情頁明顯感覺到顯示產品的屬性的時候，特別不方便。

PropertyValue

新增一個 Property 屬性，來完成產品頁的傳遞

後臺屬性值管理邏輯有點問題

之前的代碼：

<c:forEach items="${propertyValues}" var="pv">
    <tr>
        <td>
            <c:forEach items="${properties}" var="p">
                <c:if test="${p.id==pv.property_id}">${p.name}</c:if>
            </c:forEach>
        </td>
        <td>${pv.value}</td>
        <td><a href="editPropertyValue?id=${pv.id}"><span
                class="glyphicon glyphicon-edit"></span></a></td>
        <td>
            <a href="deletePropertyValue?id=${pv.id}&category_id=${product.category_id}"><span
                    class="glyphicon glyphicon-trash"></span></a></td>
    </tr>
</c:forEach>

非常糟糕，邏輯就是錯的。

利用上面為 PropertyValue 添加的 Property 來完成功能：

• 下面的 select 標簽也是錯的

生成出來的代碼是這樣的：

我想要綁定一個隱藏的 input ，看來這樣寫是不行的，搜索了一下，可以通過為 <select> 標簽寫 onchange 屬性來完成：

使用 Java 8 的新特性來排序

使用了 Java 8 的 Lambda 表達式來完成前端的排序工作：

註冊頁

天貓的註冊搞得很高大上的樣子，淘寶也弄成了一樣的，不是很好模仿出效果：

所以照著改了一改，弄成了這個樣子：

在前端通過 JS 來判斷完成確認密碼的功能，然後這是註冊成功的頁面：

發現 OrderItem 少設計了一個字段

這是最初設計的數據庫表與表之間的關系：

當我按照流程一步一步完成著項目，在完成立即購買這個功能時，我需要按照user_id來返回訂單項時，不容易實現，我們需要為 OrderItem 增加一個字段（user_id）：

CREATE TABLE `order_item` (
    `id` INT(11) NOT NULL AUTO_INCREMENT COMMENT ‘唯一索引id‘,
    `product_id` INT(11) NOT NULL COMMENT ‘對應產品id‘,
    `order_id` INT(11) NOT NULL COMMENT ‘對應訂單id‘,
    `user_id` INT(11) NOT NULL COMMENT ‘對應用戶id‘,
    `number` INT(11) NULL DEFAULT NULL COMMENT ‘對應產品購買的數量‘,
    INDEX `fk_order_item_product` (`product_id`),
    INDEX `fk_order_item_order` (`order_id`),
    INDEX `fk_order_item_user` (`user_id`),
    PRIMARY KEY (`id`),
    CONSTRAINT `fk_order_item_order` FOREIGN KEY (`order_id`) REFERENCES `order_` (`id`),
    CONSTRAINT `fk_order_item_user` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`),
    CONSTRAINT `fk_order_item_product` FOREIGN KEY (`product_id`) REFERENCES `product` (`id`)
)COLLATE=‘utf8_general_ci‘ ENGINE=InnoDB;

然後運行 TestMybatisGenerator 來重新生成相關的文件.

更改 OrderItem 表中的 order_id 字段默認為空

order_id 是用於判斷當前的 OrderItem 是否存在於購物車中的依據，最開始我們將這個字段設計為不能為空，那麽就只能在購物車中存在，當我們不需要經過購物車而要直接購買的時候，就不能得到滿足...

修復購物車邏輯問題

之前給 cart.jsp 頁面的 List

@Override
public List<OrderItem> listForCart(Integer user_id) {
    OrderItemExample example = new OrderItemExample();
    example.or().andUser_idEqualTo(user_id).andOrder_idIsNull();
    List<OrderItem> result = orderItemMapper.selectByExample(example);
    setProduct(result);
    return result;
}

Github

完成之後的項目直接上傳 Github，代碼可能有些亂，可讀性不是很高，但結構還是清晰的，還是值得參考：傳送門

後期再對代碼進行維護吧...菜鳥學習代碼，勿噴....

關於 sql 語句

這裏給一個連接提供建表語句以及一些數據：傳送門

歡迎轉載，轉載請註明出處！
@我沒有三顆心臟
CSDN博客：http://blog.csdn.net/qq939419061
簡書：http://www.jianshu.com/u/a40d61a49221

模仿天貓實戰【SSM】——總結