商城設計系列基礎 開發文檔與頁面流程
一 前言
相信很多wex5小白和初學者，在看完官方教程后都躍躍欲試，想做一個工程來檢查一下學習成果。
那么，恭喜您，做一次商城，才是直正的檢驗。我自認為官方案例倒背如流，當面對商城制作時，不知從哪里下手。如果你是初學者，那就可以跟我從商城基礎開始，一步步一制作。
先說開發文檔與頁面流程。商城的頁面較多，功能復雜，對技術要求比較全面。如果沒有合理的分析開發文檔，分析頁面流程，不誇張的說，你沒法預見用多長的工期制作完成多少個頁面，多少個功能，恐怕老板的任務，你自已都不曉得何年何月做完，只是埋頭加班。可能最基礎的數據庫設計都是一團糟。有朋友問我問題，有很多是數據庫的問題，非要在前端解決，真是自已給自已找不痛快。但是，一旦把文檔分析透徹，可以預見到30個功能面面，以個人開發經驗和代碼效能來預測到工期，目標明確，分層制作，按部就班，水到渠成。這也是我學習一段時間后的感受。
之所以說是商城系列基礎，一方面是本人能力有限，一方面是商城對於商業制作來說，難度大，強度高，我們對於初學者，主要是以基本功着手。所以，基礎系列適合剛接觸軟件開發的法外人士或者半路出家的愛好者，以及剛剛接觸wex5的同學。
二 文檔功能划分
根據商城的具體功能，借鑒淘寶，閑魚，京東等，具體功能能細分如下：
1.注冊登陸：在這里我們可以注冊我們的基本信息，用戶可以通過填寫注冊信息成為會員，登陸后才能進行購物車管理和購買商品，未登陸的會員只能瀏覽商品。
2.商品瀏覽：用戶可以瀏覽商品的詳細信息，如名稱、圖片、數量、價格等。
3.商品查詢：用戶輸入關鍵字，搜索出名稱相關的商品。
4.商品分類：用戶能夠分類瀏覽所有商品，以及購買。
5.購物車功能：用戶對想購買的商品，可以先選擇要購買的數量，點擊加入購物車，則所要購買的商品就被添加到購物車里。
6.支付方式：支持微信支付或支付寶支付
7.可以微信分享。
8.用戶能夠留言評論。
9.查看訂單：用戶在商品訂單結算前，能夠查看商品和收貨地址是否正確。
10.修改個人信息：用戶可以修改自己當初注冊時的信息。
11 快遞收發：用戶可以收發快遞並填單。
12 用戶定位：定位用戶當前地址
三 頁面流程
1 注冊登錄：
用戶在沒有注冊之前可以瀏覽商品，搜索商品，但是不可以購買商品。當進入注冊界面，需填寫注冊所需的用戶名、密碼、聯系電話、送貨地址等信息，注冊成功后，才可以登錄系統購買商品。
2 商品信息：
用戶可以對所展現的商品進行瀏覽，可以瀏覽商品的詳細信息，如名稱、圖片、數量、價格等。
3 商品查詢：
當主頁的商品不能滿足用戶的要求時，用戶可以在主頁進行商品搜索。
4 商品分類：
用戶能夠分類瀏覽所有商品，或分類搜索商品，在分類搜索中，選擇一個商品的品牌並可實現多重查詢。
5 購物車模塊：
用戶喜歡的商品可以選擇放進購物車里，可以在購物車里產看用戶選擇的商品的名稱價格以及購物車商品的總價，用戶可以對購物車中的商品進行操作，修改購買數量，刪除商品，清空購 物車，提交購物車等。
6 訂單模塊：
當完成所有的商品選擇之后，就可以在購物車頁面單擊“確認訂單”按鈕進入訂單信息確認界面以及對所買商品進行結算。
7 支付模塊：
完成訂單后，用戶根據購買信息，選擇支付方式進行支付
8 物流模塊
根所提示，完成收貨及運費填寫
四 頁面設計框架
當把設計需求與開發文檔分析透徹后，對設計目標和個人能力，就有了比較客觀的認知。接下來要預測頁面數量和設計難度，完工時間
根據以上功能需求，頁面如下：
1 登陸頁
2 注冊頁
3 個人信息頁
4 頭像上傳頁
5 地址薄選擇頁
6 地址薄編輯頁
7 物流編輯頁
8 商品首頁
9 商品分類頁
10 商品詳情頁
11 購物車頁
12 訂單頁
13 評論頁
14 支付頁面
15 后台商品管理頁面
16 后台圖片上傳頁
17 后台圖片管理頁面
五 總結：
如果想技術提升，學習商城設計，不論成果如何，一定能復習你的所有技能，查漏補缺。接下來的基礎系列中，我將一步步實現上述頁面設計與代碼編寫。 文檔功能分析明白，接下來的數據庫設計，理解起來就簡單了。
相關視頻制作完成，上傳優酷。教學app制作中。我是邯鄲戲曲開發，tel：15175073123,qq:1017945251
掃描二維碼，看高清教學視頻。