1. 程式人生 > >JavaWeb入門_模仿天貓整站Tmall_JavaEE實踐專案

JavaWeb入門_模仿天貓整站Tmall_JavaEE實踐專案

Tmall_JavaEE

技術棧 Servlet + Jsp + Tomcat , 是Java Web入門非常好的練手專案

效果展示:

模仿天貓前臺
模仿天貓後臺

專案簡介

關聯專案
github - 天貓 JavaEE 專案
github - 天貓 SSH 專案
github - 天貓 SSM 專案

本專案為Java EE入門練手專案,沒有使用 SSH , SSM 框架,而是使用 JavaEE 整套技術來作為解決方案,實現模仿天貓網站的各種業務場景。 之所以不使用框架,就是為了藉助這個專案夯實 JavaEE 基礎,並且在專案中藉助反射等技術。

專案用到的技術如下:
**Java:Java SE基礎


前端: HTML , CSS , JavaScript , jQuery
J2EE: Tomcat , Servlet , JSP , Filter
資料庫: MySQL

表結構

建表sql 已經放在 Github 專案的 /sql 資料夾下

表名 中文含義 介紹
Category 分類表 存放分類資訊,如女裝,平板電視,沙發等
Property 屬性表 存放屬性資訊,如顏色,重量,品牌,廠商,型號等
Product 產品表 存放產品資訊,如LED40EC平板電視機,海爾EC6005熱水器
PropertyValue 屬性值表 存放屬性值資訊,如重量是900g,顏色是粉紅色
ProductImage 產品圖片表 存放產品圖片資訊,如產品頁顯示的5個圖片
Review 評論表 存放評論資訊,如買回來的蠟燭很好用,麼麼噠
User 使用者表 存放使用者資訊,如斬手狗,千手小粉紅
Order 訂單表 存放訂單資訊,包括郵寄地址,電話號碼等資訊
OrderItem 訂單項表 存放訂單項資訊,包括購買產品種類,數量等

表關係

Category-分類 Product-產品
Category-分類 Property-屬性
Property-屬性 PropertyValue-屬性值
Product-產品 PropertyValue-屬性值
Product-產品 ProductImage-產品圖片
Product-產品 Review-評價
User-使用者 Order-訂單
Product-產品 OrderItem-訂單項
User-使用者 OrderItem-訂單項
Order-訂單 OrderItem-訂單項
User-使用者 User-評價

以上直接看可能暫時無法完全理解,結合後面具體到專案的業務流程就明白了。


實體類設計

所謂的實體類,就是對於資料庫中的表的互相對映的類。 
這是一種 ORM 的設計思想,即一個物件,對應資料庫裡的一條記錄
舉個例子,對於 評價 / review 的 實體類 和 表結構 設計如下:

已省略對應的 getter/setter 方法


DAO 類設計

DAO 是 Data Access Object 的縮寫,專門用於進行資料庫訪問的操作。
首先看一下資料庫工具類

DBUtil

這個類的作用是初始化驅動,並且提供一個 getConnection 用於獲取連線,統一管理連線引數,方便後續操作。

CategoryDAO

利用 DBUtil 獲取 Connectoion ,再獲取對應的 Statement,利用 JDBC 從資料庫取出資料,並構造成 bean 物件返回。
CategoryDAO.list


Service 類

作為J2EE web 應用,一般會按照如圖所示的設計流程進行
Servlet -> Service(業務類) -> DAO -> database

在本模仿天貓整站 JavaEE 版本中,不使用 Service 這一層。 原因是在 DAO 進行了比較詳細的設計,已經提供了很好的支援業務的方法。如果在 DAO 上包裹一層 Service 業務類,不過是在直接呼叫 DAO 設計好的方法罷了。另外一個使用框架的專案會用到 Service 層。


Filter 配合 Servlet

後臺在系統設計的時候,並不是簡單的每個功能對應一個 Servlet ,而是使用了反射的技術,結合過濾器Filter 進行了封裝,使得開發配置以及維護成本降低了很多。

一個路徑對應一個 Servlet 的弊端

這裡以分類進行舉例:
分類管理需要:增加,刪除,編輯,修改,查詢 5 個功能,按照傳統的在 web.xml 中配置 Servlet 的思路,那麼就需要 5 個 Servlet 類,而後臺需要做分類,產品,屬性,產品圖,使用者,訂單 6 中管理,就一共需要30 個 Servlet,還要配置 web.xml 就會變得很亂。
解決的方法是把所有分類操作放在同一個 Servlet ,對應不同的方法。
讓我們來分析,如何做到訪問 admin_category_list 的時候,CategoryServlet 的 list() 方法會被呼叫:

  1. 假設訪問路徑是 /admin_category_x
  2. 過濾器 BackServletFilter 進行攔截,判斷訪問的地址是否以/admin_開頭
  3. 如果是,那麼做如下操作
    3.1 取出兩個下劃線之間的值 category
    3.2 取出最後一個下劃線之後的值 x
    3.3 然後根據這個值,服務端跳轉到 categoryServlet,並且把 x 這個值傳遞過去
  4. categoryServlet 繼承了 BaseBackServlet,其 service 方法會被呼叫。 在 service 中,藉助反射技術,根據傳遞過來的值 x,呼叫對應 categoryServlet 中的方法 x()
  5. 這樣就實現了當訪問的路徑是 admin_category_list 的時候,就會呼叫 categoryServlet.x() 方法這樣一個效果

換句話說:
如果訪問的路徑是 admin_category_add,就會呼叫 categoryServlet.add() 方法
如果訪問的路徑是 admin_category_delete,就會呼叫 categoryServlet.delete() 方法

BackServletFilter

Github-BackServletFilter 完整程式碼

######BaseBackServlet
Github-BaseBackServlet 完整程式碼
BaseBackServlet 繼承了 HttpServlet 並重寫了 service 方法,其核心程式碼如下:

BaseBackServlet .service()

另外還定義了增刪查改等基礎抽象方法,初始化了所有 DAO 物件
上圖已經註釋的很清楚了,專案全部程式碼都放在 github 上了,歡迎檢視。

CategoryServlet

Github-CategoryServlet 完整程式碼

  1. 首先 CategoryServlet 繼承了 BaseBackServlet,而 BaseBackServlet 又繼承了 HttpServlet
  2. 服務端跳轉過來之後,會訪問 CategoryServlet 會訪問 service() 方法
  3. 父類 BaseBackServlet中重寫了 service() 方法,所以流程就進入到了 service() 中
    3.1 在 service() 方法中根據反射訪問對應的方法
    3.2 根據對應方法的返回值,進行服務端跳轉、客戶端跳轉、或者直接輸出字串。
  4. 取到從 BackServletFilter 中 request.setAttribute() 傳遞過來的值 list
  5. 根據這個值 list,藉助反射機制呼叫 CategoryServlet 類中的 list() 方法,這樣就達到了CategoryServlet.list()方法被呼叫的效果

CategoryServlet.list()

而後,list 方法使用 categoryDAO.list 查詢出 category 物件集合,並跳轉到 listCategory.jsp 顯示

listCategory.jsp 部分

localhost/admin_category_list 訪問效果

完整版的 listCategory.jsp 還包含4個公共檔案,分別是 頭部,導航,行業,頁尾。
分類管理還有增加,編輯,修改,刪除,分頁,另外後臺其他管理頁面,前臺頁面。具體的需要瀏覽程式碼,篇幅原因就不展開了。

頁面展示

前臺首頁

產品頁

本篇部落格所講不足整個專案的 1/10 ,有興趣的朋友請移步 github 專案的地址

參考

天貓整站學習教程 裡面除了本專案,還有 Java 基礎,前端,Tomcat 及其他中介軟體等教程, 可以註冊一個賬戶,能儲存學習記錄。