一、后臺(tái)管理的需求分析
項(xiàng)目描述：
項(xiàng)目作用：此項(xiàng)目做為一個(gè)前臺(tái)后臺(tái)分離的后臺(tái)管理SPA，包括前端PC應(yīng)用和后端應(yīng)用
主要功能：商品管理、用戶管理、權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)、語言等功能模塊
前端技術(shù)選用：react、react－dom、react－router－dom、echarts－for－react（就是react全家桶）、redux、reducer、axios、antd
后端技術(shù)選用：node＋express＋mongodb （寫api接口，數(shù)據(jù)存儲(chǔ)）
開發(fā)模式：采用功能模塊化、組件化、工程化的開發(fā)模式，項(xiàng)目簡潔、美觀、運(yùn)行更流暢、使用簡單、易于維護(hù)。。。
舉個(gè)非常簡單的例子：
登錄、主界面
分類管理
商品管理：增刪改查
用戶管理：增刪改查
權(quán)限管理：超級(jí)管理員和普通管理權(quán)限
數(shù)據(jù)統(tǒng)計(jì)：圖表
設(shè)置：個(gè)人中心、信息、資料、賬戶安全、修改密碼什么的
其他：語言設(shè)置，個(gè)人偏好設(shè)置
二、根據(jù)需求選擇ui模版? ? ui后臺(tái)管理常用的模版網(wǎng)站
EasyUI：官網(wǎng)：http://www.jeasyui.com/? 資源：http://www.jeasyui.net/
DWZ JUI：官網(wǎng)：http://jui.org/? ? ? ?下載：https://github.com/dwzteam/
HUI：官網(wǎng)：http://www.h-ui.net/H-ui.admin.shtml? ?下載：https://github.com/jackying/
Ace Admin：官網(wǎng)：http://ace.jeka.by/? ? ? ?下載：https://github.com/bopoda/ace
Metronic：官網(wǎng)：http://www.zi-han.net/theme/hplus/
BootStrap：官網(wǎng)：https://www.bootcss.com/
使用的比較的ui是：
1、使用HUI和bootstrap
2、使用EasyUI的框架，內(nèi)容頁使用HUI+BootStrap，iframe選項(xiàng)卡
3、從各個(gè)功能強(qiáng)大的頁面中拿一些插件過來
三、技術(shù)選型
四、前端路由：分／login和／admin兩塊子路由全部放admin后面，這個(gè)主要是根據(jù)你們項(xiàng)目需求來分，非常簡單就不多說了
五、API接口：API接口一般是后端給出，基本上不用我們前端來寫，但是基本操作還是要懂，尤其是后端給過來的數(shù)據(jù)格式，數(shù)據(jù)處理，這些基本要會(huì)，也不多說了
六、我這邊用的是github? 所以也說下git常用的基本命令（我簡書上有相關(guān)文章可以去翻翻）
$ git config --global user.name"username"? ／配置用戶名
$ git config --global user.email"xx@gmail.com" ／配置郵箱
$ git init? ? ／初始化一個(gè)本地倉庫 .git
$ git add .? ?／將文件添加到暫存區(qū)
$ git commit -m "提交日志"? ?／提交到本地倉庫
$ git remote add origin? url? ?／本地倉庫關(guān)聯(lián)到遠(yuǎn)程倉庫
$ git clone url? ? ／克隆代碼 拉取遠(yuǎn)程倉庫項(xiàng)目
$ git push origin master? ?／將本地分支項(xiàng)目推送到遠(yuǎn)程倉庫分支master
$ git branch -a? ?／查看本地分支和遠(yuǎn)程分支
$ git checkout -b 分支名? ?／切換并創(chuàng)建一個(gè)新的分支
$ git checkout 分支名? ? ? ／切換到這個(gè)分支
$ git pull origin 分支名? ? ?／將本地倉庫項(xiàng)目推送到遠(yuǎn)程倉庫這個(gè)分支
七、使用 creact－react－app （項(xiàng)目名admin）搭建項(xiàng)目
標(biāo)注：create-react-app 是 react 官方提供的用于搭建基于 react+webpack+es6 項(xiàng)目的腳手架
操作：
npm? install? －g? crecte－react－app：全局下載腳手架工具
create－react－app? ?admin（項(xiàng)目名） 創(chuàng)建模版項(xiàng)目
cd? admin? ? ? ／找到項(xiàng)目路徑下
npm? run? start／localhost：3000? ? ?／訪問頁面
八、創(chuàng)建構(gòu)架目錄
項(xiàng)目的基本構(gòu)架到這基本是完結(jié)了，需要新增什么功能里面直接添加相關(guān)文件再寫代碼就可以。
從項(xiàng)目準(zhǔn)備，到完全搭建好項(xiàng)目整個(gè)流程基本上都寫到了，希望對(duì)大家有所幫助
————————————————————————————————————
一縷陽光，后期將不定時(shí)出針對(duì)前端項(xiàng)目疑點(diǎn)難點(diǎn)的博文，謝謝關(guān)注?。?/b>
