react全家桶+koa2實現一個多人部落格~

sunner發表於2019-02-16
React

Full-stack-blog(不斷更新筆記)

效果Demo
(有待進一步完善)
搭建一個基於Koa2的多人blog
功能(登入註冊上傳頭像,發表博文,發表留言)
參考自https://github.com/nswbmw/N-blog
前端部分以create-react-app的腳手架搭起react+react-router v4+redux的全家桶
後端採用koa2+mongodb

開發環境

開發環境(node要求 7.6以上)
Nodejs:7.6.0
koa:2.0
MongoDB:3.2.10

目錄結構

如何執行

後端預設配置在config/default.js中
請確保本地Mongodb 埠27017(預設)可用

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  //釋出到server目錄中
cd ..
cd server/
npm install //or yarn install
node index //預設3305埠
//open localhost:3305/

除錯配置

前後端分離配置(預設不需要配置)

(需要整體執行一下專案產生一下cookies)

前端修改

進入myblog目錄進入config的env檔案裡修改

 `ORIGIN`:`http://localhost:3005`
//修改一下本地主機

後端修改

進入server目錄下

config/default.js//預設配置檔案

修改cors,修改成前端執行的域名,預設指向3000埠

node index -c

總體任務

1改寫專案框架由express->Koa2

2前端->工程化的react.js

TODO

  • [ ] 重寫佈局css

  • [x] 2.1多頁面實踐(待更新/font)

  • [x] 2.2redux實踐

  • [x] 2.3單頁面實踐

  • [ ] 2.4伺服器同構

  • [ ] 2.5Immutable

  • [ ] 2.6react動畫機制

express->koa2

目前進度

  • [x] 工作目錄設定

  • [x] 依賴模組

  • [x] 配置檔案

  • [x] 路由部分

  • [x] 資料庫訪問

  • [x] 處理react單頁重定向

筆記

網路請求

相關文章