項目描述

 

 

架構設計：

先後端徹底分離（RESTful Web API接口）、分層架構（邏輯層、數據層、工具層）、模塊化

技術選型：

Html、css、js、JQuery(Dom操做,Ajax請求)

輔助工具：

Webpack、Node.Js、NPM、shell

效率工具：

Sublime text三、Chrome、Git、Fiddler

 

注：

一、先後端徹底分離的方式能夠減小先後端的耦合，提升先後端的開發效率

二、分層架構的層級劃分能夠進行系統的解耦，提升系統的可擴展性可可維護性

三、模塊化能夠進一步的解耦，讓系統經過組件拼裝來完成業務的實現，優勢還有支持團隊並行開發，提升團隊開發的效率

 

需求分析

 

1、大型電商平臺有什麼：

 

（1）購買需求：商品展現、用戶下單、購物車、用戶支付、訂單中心

 

（2）用戶需求：會員系統、等級體系、用戶行爲和信息、地址、帳號體系

 

（3）運營需求：廣告推廣、用戶管理、訂單管理、商品管理、廣告及推薦、客服

 

（4）市場需求：SEO、優惠折扣、SEM、代理

 

（5）數據統計需求：成交量、成單率、訪問信息、推廣效果、用戶量增減

 

 

2、進行需求拆分：

 

遵循需求拆分的原則：

 

（1）單個迭代不宜過大

 

（2）需求合理可交付，可以造成一個完整的功能閉環

 

（3）有成本意識和價值體現

 

 

 

3、找到核心需求

 

拆分爲用戶端和後臺管理

 

用戶端：

 

（1）商品展現：首頁、商品列表、商品詳情

 

（2）購物車：購物車數量、增刪購物車、提交

 

（3）訂單：訂單確認（包括地址管理）、訂單提交、訂單列表、訂單詳情

 

（4）用戶：登錄、註冊、我的信息、密碼找回和修改

 

（5）支付：調用接口

 

後臺管理：

 

（1）商品管理：對商品的增刪改查

 

（2）品類管理：對品類的增改查

 

（3）訂單管理：訂單列表、訂單詳情、發貨（只讀的）

 

（4）權限控制：管理員登錄

 

 

 架構設計與技術

 架構設計

1、分層架構

　　定義：把功能類似，抽象級別相近的實現進行分層隔離

　　優點：鬆散耦合（易維護，易複用，易擴展）當改變其中一個層級時，只要保證該層級的接口不變便可。

　　常見的分層方式：MVC,MVVM

2、模塊化

　　定義：解決一個複雜問題時，自頂向下逐層把系統劃分爲若干模塊的過程

　　做用：解耦，支持並行開發

　　模塊化方案：

1. AMD:RequireJS 在推廣過程當中對模塊定義的規範化產出。AMD規範則是異步加載模塊，容許指定回調函數，在回調函數中執行操做。
2. CMD:SeaJS 在推廣過程當中對模塊定義的規範化產出。（AMD和CMD類似，主要區別在於加載和運行時機不一樣，二者都將模塊化代碼和業務代碼摻雜在一塊兒）
3. CommonJS:是nodejs也就是服務器端普遍使用的模塊化機制。 該規範的主要內容是，模塊必須經過module.exports 導出對外的變量或接口，經過 require() 來導　                  入其餘模塊的輸出到當前模塊做用域中。。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。（語法少，而且和業務代碼                                    分開）
4. ES6 Modules：ES6內置的模塊化語法，在瀏覽器端無需額外引入requirejs來進行模塊化。

　　模塊化方案選擇：CommonJs

 

分層架構和模塊化區別：分層架構更偏重整個系統上的縱向層級劃分；而模塊化更偏重橫向功能的拆分。

最終採用了分層架構和模塊化結合的方式。這裏我繪製了一張圖片用來講明

說明：

1. 邏輯層：一個web應用的入口是一個頁面，每一個頁面都有一個主模塊，用來組織各個子模塊的邏輯關係，從而造成了一個功能完整的頁面，將主模塊和調用的子模塊放在同一層上，稱爲邏輯層。
2. 數據層：邏輯層模塊要與服務器進行數據交互，把這些數據交互的方法都劃分在一個個service模塊，稱爲數據層。全部的數據交互都必須由數據層和服務器進行，不容許業務模塊的跨層對接。
3. 工具層：提供支持整個系統的通用工具。

 

技術選型

 先挑幾個比較主流的方案，而後從穩定性，擴展性，運行速度，開發效率，兼容性等方面綜合考慮。

主要針對如下幾個方面選擇：

1. 軟件過程模型：線性順序（瀑布模型）、螺旋模型、敏捷開發-----（開發流程）
2. 先後端分離方式：不分離，部分分離，徹底分離-----（影響開發效率）
3. 構建工具
4. 框架選型
5. 版本控制
6. 發佈方式

 

 （1）軟件過程模型：選擇敏捷開發，這是一種以用戶需求進化爲核心，採用迭代，按部就班的方法進行軟件開發的流程。即需求一邊想着，流程一邊走着

　　優勢：能應付不斷變化的用戶需求

　　缺點：對團隊成員要求較高

 （2）先後端分離方式：選擇純靜態的先後端分離

• 不分離：PASS
• 部分分離：後端負責頁面模板（JSP/velocity/Freemarker），HTML文件留在後端,它的進步在於腳本和樣式可由前端進行維護了。缺點是本地開發環境搭建成本高，更新頁面模板仍需後端協助，發佈也須要先後端同時發佈。
• 徹底分離1：velocity(在nodejs和java下均可編譯的頁面模板，開發時放在前端目錄下，發佈時同步在後端模板目錄下)。

1. 優勢：實現開發的徹底分離，頁面模板渲染用java來作，從而造成的是帶有動態數據的Html，利於SEO。
2. 缺點：前端的開發環境和系統複雜度高，發佈時也須要先後端一塊兒

• 徹底分離2：（純靜態的先後端分離方案）純靜態的Html放在前端，徹底經過接口作數據的交互

1. 優勢：徹底脫離後端模板，系統複雜度低
2. 缺點：頁面的數據渲染用JS，沒有動態模板，不利於SEO
3. 優化方案：Nodejs的Server Render/蜘蛛定製頁面

（3）框架選型：（用戶端：JQuery+CSS 後臺管理系統：React+Sass）

• 腳本框架：JQuery(是一個包含DOM操做，事件處理，動畫和Ajax的功能模塊，嚴格來講不能算框架)、Angular、Avalon、Vue、React
• 樣式框架：CSS、Less、Sass
• 理由：用戶端追求穩定，兼容和利於SEO；後臺管理系統追求快，因此能夠嘗試新的框架。

（4）構建工具：（webpack）

• 用於編譯、壓縮、打包靜態文件
• Grant、Gulp、webpack
• 理由:webpack原生支持CommonJs

（5）版本控制：（git）（不解釋）

（6）發佈方式：

• 發佈過程

1. 從git上拉下代碼
2. 打包編譯
3. 發佈到線上

• 域名規劃（瀏覽器規則是同一時間同一域名請求數有上限，將網站資源放在不一樣域名下的好處很少說。）

1. html 用戶端：www.xxx.com後臺：admin.xxx.com
2. js+css s.xxx.com
3. image img.xxx.com

 

　

先後端職責及數據接口定義

 

職責劃分　

後端：數據存儲、文件服務、數據接口

前端：數據請求和處理、頁面展現

即，以接口爲界限，後端負責製做接口，前端負責調用接口

 

接口的文檔規範

• 格式

1. 接口名稱（代表接口用途）
2. 接口地址（/product/.do）
3. 請求信息（request）
4. 響應信息（response）

• 請求和響應

1. 請求：KEY VALUE的鍵值對
2. 響應：接口返回的數據格式要統一，以方便封裝一個通用方法處理和後端的數據交互（必須包含接口狀態信息）

項目源碼：https://github.com/zmx-xiao-xiao/XXMall-fe