大家好，我是Sun，目前在一家共享單車公司擔任前端架構師職位，作為一名前端工程師，我非常渴望能夠講自己多年來汲取的精華知識傳授給大家，非常渴望能夠去解決大家在開發過程中的痛點。經過一段時間的調研，我總結出了其中一個非常重要的結論，大家在開發後臺管理系統的時候，往往舉足不定，因為工作經驗不足，技術有壁壘。本次藉此機會，我耗時幾個月給大家做了一次針對後臺管理系統的課程：React全家桶+AntD框架開發共享單車後臺管理系統

這門課程從幾個維度進行刨析：

​ 第一：使用目前最流行的前端MV*框架開發，React全家桶一應俱全，技術不落伍。

​ 第二：好馬配好鞍，有了技術框架，對於後臺系統來說，必然需要有一把利劍，那就是AntD. AntD是螞蟻金服公司出品的一款React UI框架，極大便利了我們的前端React開發者。可能有的同學會說，React UI框架有很多，並不止這一個，這樣說確實沒有問題，UI框架有很多，我們要從很多方面去綜合評估，比如star數量、社群活躍度、github的issue解決數量、版本更新週期、公司平臺規模等各個方面進行考察，千萬別一失足成千古恨。 當然elementUI也是一款不錯的UI框架，根據自己的喜好進行自由選擇。

​ 第三：後臺管理系統必然需要在架構層面，做到堅如磐石，能扛起一個公司的業務，要讓新入職的同事莫名的喜歡，覺得我們的系統做的非常好，工作及其有動力。

​ 第四：對於後臺管理系統來說，各個公司業務不盡相同，但是也會有業務上的差異，比如傳統公司的後臺會有各種報表、普通的網際網路公司後臺通常會有許可權、增刪改查的功能、單車公司的後臺通常會有各種地圖業務等等，面對這樣的需求點，本門實戰課程將以上功能全部進行匯聚，根據自身業務，選擇性套用，一旦掌握，就可以以不變應萬變，理解知識、學以致用。

​ 第五：從技術層來講，本次實戰課程包括了各種公共機制的封裝，比如：Loading封裝、錯誤攔截、Ajax請求封裝、Promise的使用、Modal封裝、分頁封裝、日期金額格式化、Notice元件、message元件的使用等，對於後臺管理系統來說是極大的福利。

​ 第六：專案架構設計。 一個優秀的後臺系統必然有一個優秀的後臺架構。本次實戰課程在頁面結構設計上可以說涵蓋了多個層次，登入頁面、主頁面、訂單詳情頁面作為一級視窗，但在架構設計上又不完全相同。主頁面本身又分為多級檢視，因此次頁面設計已經能夠符合我們主流的後臺管理系統設計開發。

以上是我對本次實戰課程的6條總結，接下來我們看一下頁面的內容：

1. 登入頁面

登入頁面並未在本次實戰課程做詳細介紹，目前課程原始碼已經包含了此頁面，主要是一張大背景，外加AntD設計的登入框功能，風格簡單，功能實用。

\2. 專案主頁面

主頁面會根據當前登入使用者的許可權進行動態載入選單。

3.AntD的Button頁面

4.Echart圖表頁面

5.城市管理頁面

6.Echart餅形圖頁面

7.UI輪播圖，包含文字輪播和圖片輪播

8.車輛地圖頁面

9.使用者授權頁面

10.高階表格頁面

11.選單許可權頁面

12.員工管理頁面

13.表單頁面

14.訂單詳情頁面

從頁面分佈來看，實戰課程內容非常豐富，從UI框架到共享單車的核心模組，一應俱全。從React全家桶知識介紹到專案架構、專案工程化等非常詳細的講解了後臺管理系統的開發流程和前端工程師的進階之路。