開源 react + koa + mysql 設計的簡約風格的個人部落格

摘要： 使用 react 有一段時間了, 也想用 react 去寫點什麼，平時接觸最多的就是 blog 了，於是乎藉助 antd 這個 UI 框架設計出了一個極其簡約風格的 spa 部落格。 目的也是將 react 的生態圈的工具梳理一遍，後端則採用了 koa + sequelize + mysql...

使用 react 有一段時間了, 也想用 react 去寫點什麼，平時接觸最多的就是 blog 了，於是乎藉助 antd 這個 UI 框架設計出了一個極其簡約風格的 spa 部落格。 目的也是將 react 的生態圈的工具梳理一遍，後端則採用了 koa + sequelize + mysql 的技術選型（我司用的就是這個技術棧啦，所以筆者也用這個了）

部落格介紹

• 前後臺同構（同時包含部落格的後臺管理），為了方便記錄後端開發過程，筆者將後端也一起放在同個專案資料夾中。
• 部落格樣式幾乎藉助於 antd 這個優秀的 UI 框架，主打簡約風格（其實就是筆者覺得怎麼好看怎麼寫而已）~
• 分出了幾個分支便於學習和檢視開發記錄，相信這個專案會讓剛接觸 react 的夥伴學到一些的

預覽地址 : 由於域名還在備案中，所以暫時用 ip 代替啦

技術棧

• 前端
  • react v16.8.1
  • redux redux-thunk
  • react-router4
  • axios
  • marked highlight.js
• 後端
  • koa2 + koa-router
  • sequelize + mysql
  • jwt + bcrypt

實現功能

• 主頁 + 列表頁 + 搜尋頁 + 後臺增刪改查文章等
• 評論與回覆功能模組
• 使用者登入註冊，以及許可權管理 (jwt + localStorage)
• markdown 程式碼高亮
• 錨點導航 回到頂部
• 響應式開發

分支

為了方便檢視開發記錄筆者分了幾個分支

1. client-chore : 記錄前端專案的構建過程
   1. 配置 react + antd + less + babel-plugins-import
   2. 配置 redux + redux-thunk + redux-logger (開發和生產環境)
   3. 配置 裝飾器 + axios 封裝 + 路由配置（主部落格路由 和 admin 管理系統）
2. server-chore : 記錄後端專案的構建過程
   1. 配置 koa + koa-router + 中介軟體
   2. 專案結構劃分（mvc結構）
   3. 配置 sequelize 以及資料庫的設計
   4. ...
3. client-markdown : 配置 markdown 語法高亮
4. dev : 開發分支

效果

預覽地址在這

概覽

評論功能與其他

響應式

後臺管理

表結構

開啟專案

前端

git clone https://github.com/gershonv/react-blog.git

cd react-blog

npm i --registry=https://registry.npm.taobao.org

npm start
複製程式碼

後端

建立一個 blogdev 的 mysql 資料庫，執行 server/config/blogdev.sql 檔案匯入資料

cd server
npm i --registry=https://registry.npm.taobao.org=
npm start
複製程式碼

總結

從零開發個人部落格，整個過程感受就是不動手就不知道自己還有多少知識沒了解到或者說好好運用到。麻雀雖小五臟俱全吧。

要點在於

• 前端
  • 如何組織專案架構。合適的專案架構可以提高開發效率和更好的後期維護。
  • 第二 router 4 如何封裝才更好拓展，維護。這裡部分藉助了 rekit 目錄結構
  • 如何利用 react 新特性去組織你的程式碼
  • 如何利用工具提高效率，裝飾器，熱載入，（redux、…）
  • 當然許可權的管理 jwt， 對 antd 的使用
• 後端
  • koa 各類中介軟體使用
  • 登入註冊許可權，jwt 加密，處理許可權的方式
  • sequelize 的使用 模型定義 多表~
  • 錯誤的統一處理，如何優雅的處理
  • 專案結構如何搭建等等

原始碼地址： github.com/gershonv/re…

專案結構：

PS : 覺得不錯的夥伴可以給個 star ~~~ 或者 fork 下來看看哦。如果有什麼建議，也可以提 issue 哦