一.項目介紹
相關技術
node.js後臺
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型。 [1]
Node 是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成爲與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。 [2] 發佈於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。
Node對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非常快，性能非常好。Node是一個基於Chrome JavaScript運行時建立的平臺， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分佈式設備上運行數據密集型的實時應用。
mysql 數據庫
bootstrap響應式佈局
基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在Bootstrap 基本結構部分詳細講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在Bootstrap CSS部分詳細講解。
組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在佈局組件部分詳細講解。
JavaScript 插件：Bootstrap包含了十幾個自定義的jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在Bootstrap插件部分詳細講解。
定製：您可以定製Bootstrap的組件、LESS 變量和jQuery 插件來得到您自己的版本。
網站介紹
Dark White項目旨在開發一箇中國高端的IT培訓教育電子商城網站，致力於提供線上線下的課程培訓商品及以訂購課程商品爲核心的服務宣傳自己的優質課程服務並將機構的深層實力與優秀培訓成果展現給客戶，供客戶通過網站便能自由選擇所需學習的課程產品。
該網站提供客戶註冊、登錄、瀏覽課程商品，查看教師風采和學習作品展示，瞭解機構的服務特色和課程分類，客戶可把感興趣課程加入購物車給並結算，提供學員論壇和實時聊天室供學員在線互相學習討論，同時歡迎廣大青年才俊教師通過聯繫我們加入Dark White
Dark White商城面向廣大的IT興趣學習者，客戶被允許以遊客的身份瀏覽網站的課程、講師等網站信息。
運行環境
採用前後端分離的開發方法
IT課程電子商城前後端分離示意圖
OE-1: 開發測試時，使用XAMPP（Apache+MySQL+PHP+PERL）這個功能強大的集成軟件包提供的apache和mysql服務與postname本地請求模擬
OE-1：通過新浪雲部署到雲服務器上和mysql服務器，客戶可以在瀏覽器訪問網站和請求資源
OE-3: 部署後，現行內存1G以上的電腦均可流暢運行，
二.項目分析
功能性需求
是一個基於Web的網上IT課程商城，採用結構化分析方法，該系統主要爲前臺購物部分。前臺管理模塊包括客戶登錄、註冊、查詢、瀏覽課程商品以及購物、論壇和學員實時聊天室等功能，新客戶經註冊可以成爲本網站的正式客戶，並可以訂購商品和查詢訂單。本系統的各項功能需求如下:
| 功能模塊 | 功能模塊的描述 |
|---|---|
| 新客戶註冊 | 客戶需要使用網站的全部功能，如加入購物車、結算、查看訂單、論壇以及實時聊天等，首先要進行註冊，需要填寫客戶名、密碼、電話號碼、郵箱等信息 |
| 客戶登錄 | 客戶通過賬號和密碼登錄到網站，可以選擇記住客戶，或者點擊忘記密碼 |
| – | – |
| 瀏覽網站信息（包括教師風采、學生成果展示、招聘信息、課程介紹等） | 客戶可以點擊頂部與底部的tab欄、頁腳的連接查看網站的課程、師資信息等 |
| 查詢/搜索課程商品 | 客戶可以通過每個頁面頁頭的導航欄的搜索框進行網站內課程和師資等信息檢索 |
| – | – |
| 購物車 | 客戶可以將心儀的課程加入到購物車 |
| 提交訂單並結算 | 客戶可以選擇購物車的課程商品以及其數目，提交訂單到系統並在規定訂單有效期內支付成功 |
| – | – |
| 客戶留言提交 | 客戶可以再聯繫我們頁面提交相關的個人信息以及想要和平臺闡述的留言 |
| 論壇 | 提供一個已註冊成功的客戶發學習博客 |
| – | – |
| 學員聊天室 | 學員之間可以再聊天室實時聊天室，互相交流，共同成長 |
非功能性需求
- 界面需求
界面設計風格色彩統一、以扁平設計爲原則，色彩主要以黑白紅爲主，作品配色協調。頁面佈局具有平衡感，適當留白，有限的容量中預留一些讓其中元素呼吸的負空間，提高了客戶瀏覽網站的留存度。採用恰如其分的動畫加載頁面，給予客戶愉悅的的交互體驗。
- 易用性需求
導航欄的tab元素的排序符合客戶點擊使用的頻率排行，設計符合客戶使用習慣以及對其使用的期望，減輕客戶的學習產品的成本，減少客戶操作出錯率和提高產品的生產效率，使得客戶可以把主要精力放在課程信息的獲取上，給客戶提供良好的服務。
- 可維護性需求：
當技術變化或業務變化時，不可避免將帶來系統的改變——不僅要進行設計實現的修改，後者以後爲了滿足業務發展的需要，擴展業務範圍和系統功能，在構建系統時對功能進行結構化劃分，並採取前後端分離的方法以及養成良好的添加註釋的編程習慣，提高系統的可維護性。
三.項目演示
PC端界面
手機端頁面
四.項目地址
DarkWhteWeb
GitHub項目地址https://github.com/Aristochi/DarkWhteWeb