react+koa+mongodb+redis 打造我的技術博客

react+koa+mongodb+redis 我的技術博客(github地址),求star,求fork，你們一塊兒學習

說明:

• 借鑑項目:React-Express-Blog-Demo,基礎比較弱的能夠先看下這個項目，說的比較詳細，因爲比較偏後端，因此前端這塊改動的很少，主要是後端的一些改動，後面會依次貼出代碼改動以及所遇到的一些問題跟解決方案

改動基本介紹，相關代碼會貼出來並主要說一下:

• 前端:

  • 增長了後臺管理評論功能,主要有評論審覈,開啓審覈
  • 增長了github第三方登陸功能
  • 給文章增長了評論功能,用戶能夠發表評論以及給評論進行點贊

• 後端:

  • 後端由express改爲了koa以及相應的中間件的改變
  • 加入了token+session認證機制
  • 數據庫這塊作了一些字段的改動以及增長了評論點贊表跟評論表
  • 增長了單元測試以及代碼風格檢查
  • 增長了log模塊，能夠實現具體文件名以及行號提示

項目結構介紹，只涉及後端，前端基本沒啥改動，不懂得能夠看下我借鑑的項目

• 項目結構地址

api接口整理

• api接口地址

前端

前端後臺評論管理功能

• 這裏跟別的文章管理沒什麼區別，主要的問題就在於columns這個數組對象須要放在組件裏，不然沒法獲取this對象以及對應的props，另外antd庫，在使用
  switch組件的時候defaultChecked在面對Pagination換頁時會出現狀態沒法更改，仍是顯示上一頁的狀態，這裏須要使用checked屬性，具體代碼以及說明

前端第三方github登陸功能

• github第三方登陸在react上這種單頁面實現的時候，會出現跨域問題，這裏的話有兩種解決辦法，具體代碼以及解決辦法

前端文章評論功能

• 這塊是經過我上文所借鑑項目裏的教程開發的，樣式的話是採用github的issue結構，具體代碼位於blog/app/containers/comment文件夾裏，這裏就不細說了，惟一須要注意的就是在評論或者點讚的時候須要更新react state

後端

後端框架修改

• 將框架由express改爲了koa2，具體的中間件的話能夠查看blog/server/api/apiServer.js

token+session功能

• 在後臺中間件這裏新增了token中間件(檢測token)跟admin中間件(檢測是否爲admin),這裏token中間件的處理流程是先檢測請求路徑是否須要驗證token,若是須要則檢測其請求頭上的authorization字段,知足的話進入路由，而且在結束後在其響應頭上將token值添加到Authorization字段，這裏若是先後端採用不一樣的端口會產生跨域問題，具體代碼以及解決方案

後端數據庫字段更改跟表添加

• 這裏就一些表字段更改就表添加，惟一須要注意的是mongoose.model這個方法在表名沒有s的時候會自動加上,另外使用了mongodb的aggregate,pipeline等，具體代碼以及方案

單元測試以及代碼檢查

• 單元測試這裏用的是jest，緣由的話主要因爲它內嵌了斷言等，而且支持react，代碼位於blog/test文件夾，目前只寫了登陸的測試接口，後面有時間再加上，代碼檢查的話採用的是eslint庫，extends standard，後面加了一些本身的規則

log模塊

• 這裏在網上其實有別的方式來定義一個全局的錯誤變量，可是很惋惜的是在es5裏已經再也不支持，這裏我採用的是定義一個全局函數，當調用它的時候會產生一個錯誤，再經過正則來獲取所在的代碼行號跟文件信息，具體代碼

環境

react @16.3.1
react-router @4.2.0
node @8.9.1
mongodb @4.0.2
webpack @4.4.1

運行

git clone https://github.com/oyosc/blog

npm install

npm run start-prod

獨立打包

npm run build

pm2方式啓動

npm install pm2 -g

pm2 -i max start npm -- run start-prod-debug(這裏的命令能夠查看package.json文件)

開發數據庫文件

地址: blog_db

從零開始搭建項目

感興趣的請移步個人博客

TODO

• 後面有時間打算把推送也實現下，至於其餘的再看吧

more

• 因爲一直是作後端程序員，因此搞起前端來感受很麻煩，有問題什麼的請提issue,有時間的話會回答的，最後歡迎star,歡迎fork,你們一塊兒學習