閑來無事，使用antdesign+koa開發(fā)了一套后臺管理的demo，并借此機會整理下自己所學(xué)的知識，代碼開放出來。有不足之處，希望大家指點。
github源碼目錄
CLReactAntDesign介紹
- CLReactAntDesign是基于AntDesign2.0+開發(fā)的后端頁面例子，
- 整合react，react-router,react-redux，react-router-redux。進行頁面狀態(tài)控制
- 實用fetch進行頁面請求，最終生成靜態(tài)頁面，實現(xiàn)前后端完全分離
- 附帶使用koa實現(xiàn)的后端接口
開發(fā)環(huán)境
- 基于node7.0+進行開發(fā)
目錄介紹
- backend:基于AntDesign使用的后端SPA。
- server:后端koa搭建的服務(wù)接口，主要包括，菜單管理，角色管理，用戶管理，信息發(fā)布。使用前，調(diào)整mysql數(shù)據(jù)庫。使用clantd.sql修改數(shù)據(jù)庫。
工程運行
進入到backend目錄，編譯運行前端框架
安裝
安裝node依賴
npm install
開發(fā)環(huán)境
開發(fā)使用webpack進行編譯，并使用webpack.server啟動一個服務(wù)器，進行頁面的訪問，
使用前，配置webpack.server，修改接口的轉(zhuǎn)發(fā)。主要是調(diào)整端口，如果接口端口不沖突，不需要調(diào)整。
webpackserverconfig.png
如上圖，
前端轉(zhuǎn)發(fā)，即今天服務(wù)器地址，默認(rèn)端口port是9000，所以請求頁面的默認(rèn)地址是localhost:9000/index.html或localhost:9000
后端轉(zhuǎn)發(fā)，為接口轉(zhuǎn)發(fā)的時候，映射的地址。根據(jù)server工程設(shè)置的端口定，默認(rèn)有兩個，一個是請求常用接口，一個是登錄驗證。可視情況做相應(yīng)調(diào)整
啟動
npm run dev
生產(chǎn)環(huán)境
npm run pub
執(zhí)行上述命令，會生成相應(yīng)的文件到根目錄下的pub文件夾，直接放服務(wù)器中使用即可。
生產(chǎn)環(huán)境，建議使用ngnix部署，直接配置靜態(tài)文件目錄，放目錄下，使用ngnix進行接口轉(zhuǎn)發(fā)。解決跨域問題。
后端工程啟動
后端工程主要提供了一些基礎(chǔ)的接口。使用koa來開發(fā)。利用JWT整合token機制。
安裝
使用clantd.sql進行數(shù)據(jù)庫的安裝，
進入到server文件夾下，
修改數(shù)據(jù)庫配置文件
修改serer/config/config.js下的數(shù)據(jù)庫配置文件
database.png
安裝依賴
npm install
啟動
npm start
展示
訪問地址 localhost:9000 登錄用戶名密碼，admin/123
login.png
b1.png
b2.png
