Full-stack-blog(不斷更新筆記)
效果Demo
(有待進(jìn)一步完善)
搭建一個(gè)基于Koa2的多人blog
功能(登錄注冊(cè)上傳頭像,發(fā)表博文,發(fā)表留言)
參考自https://github.com/nswbmw/N-blog
前端部分以create-react-app的腳手架搭起react+react-router v4+redux的全家桶
后端采用koa2+mongodb
開發(fā)環(huán)境
開發(fā)環(huán)境(node要求 7.6以上)
Nodejs:7.6.0
koa:2.0
MongoDB:3.2.10
目錄結(jié)構(gòu)
如何運(yùn)行
后端默認(rèn)配置在config/default.js中
請(qǐng)確保本地Mongodb 端口27017(默認(rèn))可用
git clone https://github.com/Sunshine168/Full-stack-Blog.git
cd Full-stack-Blog/myblog
npm install //or yarn install
npm build
node scripts/publish ./server //發(fā)布到server目錄中
cd ..
cd server/
npm install //or yarn install
node index //默認(rèn)3305端口
//open localhost:3305/
調(diào)試配置
前后端分離配置(默認(rèn)不需要配置)
(需要整體運(yùn)行一下項(xiàng)目產(chǎn)生一下cookies)
前端修改
進(jìn)入myblog目錄進(jìn)入config的env文件里修改
'ORIGIN':'http://localhost:3005'
//修改一下本地主機(jī)
后端修改
進(jìn)入server目錄下
config/default.js//默認(rèn)配置文件
修改cors,修改成前端運(yùn)行的域名,默認(rèn)指向3000端口
node index -c
前后端分離方案
前端使用proxy做代理轉(zhuǎn)發(fā)
//在package.json中加入proxy字段,并更換域名即可
"proxy":"http://localhost:3005"
后端無需改動(dòng)
node index //啟動(dòng)即可
總體任務(wù)
1改寫項(xiàng)目框架由express->Koa2
2前端->工程化的react.js
TODO
- [ ] 重寫布局css
- [x] 2.1多頁面實(shí)踐(待更新/font)
- [x] 2.2redux實(shí)踐
- [x] 2.3單頁面實(shí)踐
- [ ] 2.4服務(wù)器同構(gòu)
- [ ] 2.5Immutable
- [ ] 2.6react動(dòng)畫機(jī)制
express->koa2
目前進(jìn)度
- [x] 工作目錄設(shè)定
- [x] 依賴模塊
- [x] 配置文件
- [x] 路由部分
- [x] 數(shù)據(jù)庫訪問
- [x] 處理react單頁重定向
- [ ] 單元測試
筆記
koa2
有關(guān)網(wǎng)絡(luò)請(qǐng)求的部分應(yīng)該放在redux中(尚未修改完成)
react
準(zhǔn)備node proxy代替跨域進(jìn)行調(diào)試(create-react-app自帶)
完成react+redux+react-routerv4全家桶
