1. 程式人生 > >天貓整站(簡易版)SSM——第一天

天貓整站(簡易版)SSM——第一天

一、專案簡介

為了加深對SSM框架的學習,做一個簡易版的天貓網站。

1.1 技術準備

為了完成這個J2ee專案,需要掌握如下技術:

前端:HTML、CSS、JavaScript、jQuery、Bootstrap J2EE:Tomcat、Servlet、JSP、Filter

框架:SSM

資料庫:MySQL

開發工具: Intellij IDEA、Maven

1.2 開發流程

模仿天貓整站是一個比較大的專案,將按照商業專案的開發流程有條不紊的一一展開:

1.2.1 需求分析

首先確定要做哪些功能,需求分析包括前臺和後臺。 

前臺又分為單純要展示的哪些功能:需求分析展示,以及會提交資料到服務端的哪些功能:需求分析互動。

1.2.2 表結構設計

接著是表結構設計,表結構設計是圍繞功能需求進行,如果表結構設計有問題,那麼將會影響功能的實現。除了表與表關係,建表SQL語句之外,為了更好的理解表結構以及關係,還把表與頁面功能一一對應起來

1.2.3 原型

接著是介面原型,與客戶溝通順暢的專案設計流程裡一定會有原型這個環節。 藉助介面原型,可以低成本,高效率的與客戶達成需求的一致性。 同樣的,原型分為了前臺原型和後臺原型。

1.2.4 後臺-分類管理

接下來開始進行功能開發,按照模組之間的依賴關係,首先進行後臺-分類管理功能開發。具體的功能就是: 查詢,分頁,增加,刪除,編輯,修改。 

1.2.5 專案重構

在完成了分類管理之後,會發現使用SSM框架存在的一些問題,比如SQL語句都要手動編寫,效率低下,並且容易出錯,分頁方式也需要採用手動方式等等,這些問題既會導致開發效率降低,也容易誘發更多編碼錯誤。

1.2.6 後臺-其他管理

在把後臺-分類管理 完成以後,就可以加速進行 後臺其他頁面的開發。

1.2.7 前臺-首頁

前臺也包括許多功能, 與後臺-分類管理類似的,首先實現前臺-首頁這個頁面。前臺-首頁 完成之後,再進行其他前臺功能的開發。

1.2.8 前臺無需登入

從前臺模組之間的依賴性,以及開發順序的合理性來考慮,把前臺功能分為了 無需登入 即可使用的功能,和需要登入 才能訪問的功能。 建立在前一步前臺-首頁的基礎之上,開始進行一系列的無需登入功能開發。

1.2.9 前臺需要登入

最後是需要登入的前臺功能。 這部分功能基本上都是和購物相關的。 因此,一開始先把購物流程 單獨拿出來捋清楚,其中還特別註明了購物流程環節與表關係,這樣能夠更好的建立對前端購物功能的理解。隨著這部分功能的開發,就會進入訂單生成部分,在此之前,先準備了一個 訂單狀態圖,在理解了這個圖之後,可以更好的進行訂單相關功能的開發。

1.2.10 總結

最後總結整個專案的專案結構,都實現了哪些典型場景,運用了哪些設計模式,把學習到的知識都沉澱下來,轉換,消化,吸收為自己的技能

二、需求分析-展示

2.1 概述

2.1.1 前端展示

在前端頁面上顯示資料庫中的資料,如首頁,產品頁,購物車,分類頁面等等。

2.1.2 前端互動

這裡的互動指的是通過POST,GET等http協議,與服務端進行同步或者非同步資料互動。 比如購買,購物車,生成訂單,登入等等功能。

2.1.3 後臺功能

對支撐整站需要用到的資料,進行管理維護。 比如分類管理,分類屬性管理, 產品管理,產品圖片管理,使用者管理,訂單管理等等。

2.2 首頁

2.2.1 整體效果

2.2.2 頂部橫向導航

2.2.3 縱向導航

2.2.4 商品顯示

2.3 產品頁

2.4 分類頁

2.5 搜尋結果頁

2.6 購物車檢視頁

2.7 結算頁

2.8 確認支付頁

2.9 支付成功頁

2.10 我的訂單頁

2.11 確認收貨頁

2.12 評價頁

2.13 頁頭資訊展示