一辜妓、后臺管理的需求分析
項(xiàng)目描述：
項(xiàng)目作用：此項(xiàng)目做為一個(gè)前臺后臺分離的后臺管理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ù)存儲）
開發(fā)模式：采用功能模塊化璃弄、組件化要销、工程化的開發(fā)模式，項(xiàng)目簡潔、美觀、運(yùn)行更流暢赞弥、使用簡單窘疮、易于維護(hù)。涌献。。
舉個(gè)非常簡單的例子：
登錄、主界面
分類管理
商品管理：增刪改查
用戶管理：增刪改查
權(quán)限管理：超級管理員和普通管理權(quán)限
數(shù)據(jù)統(tǒng)計(jì)：圖表
設(shè)置：個(gè)人中心酌壕、信息、資料、賬戶安全卵牍、修改密碼什么的
其他：語言設(shè)置果港，個(gè)人偏好設(shè)置
二、根據(jù)需求選擇ui模版? ? ui后臺管理常用的模版網(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ù)處理，這些基本要會遮怜，也不多說了
六淋袖、我這邊用的是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è)流程基本上都寫到了剥懒，希望對大家有所幫助
————————————————————————————————————
一縷陽光，后期將不定時(shí)出針對前端項(xiàng)目疑點(diǎn)難點(diǎn)的博文合敦，謝謝關(guān)注３蹰佟！
