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

不吃早餐發表於2019-02-24

前言

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

部落格介紹

前後臺分離式開發（專案中也包含部落格的後臺管理系統），為了方便記錄後端開發過程，筆者將後端也一起放在同個專案資料夾中。
部落格樣式幾乎藉助於 antd 這個優秀的 UI 框架，主打簡約風格，是筆者借鑑了 antd 官方的風格所設計~
分出了幾個分支便於學習和檢視開發記錄，相信這個專案會讓剛接觸 react 的夥伴學到一些的
部落格地址 - 聯絡我可以 email gershonv@163.com | QQ 434358603 | 部落格關於頁面留言~
專案地址
預覽地址
- 使用者名稱 admin/admin 最高許可權，求小夥伴不要亂刪資料，亂刪資料其他夥伴會沒什麼資料看的。
- 給最高許可權是為了讓大家看到博主的許可權。體驗部落格完整的功能。
- 後臺訪問路徑 /admin

技術棧

前端（基於 create-react-app eject 後的配置）
- react v16.8.1
- redux redux-thunk
- react-router4
- axios
- marked highlight.js
後端（自構建後臺專案）
- koa2 + koa-router
- sequelize + mysql
- jwt + bcrypt

實現功能

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

分支

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

client-chore: 記錄前端專案的構建過程
1. 配置 react + antd + less + babel-plugins-import
2. 配置 redux + redux-thunk + redux-logger (開發和生產環境)
3. 配置裝飾器 + axios 封裝 + 路由配置（主部落格路由和 admin 管理系統）
server-chore: 記錄後端專案的構建過程
1. 配置 koa + koa-router + 中介軟體
2. 專案結構劃分（mvc結構）
3. 配置 sequelize 以及資料庫的設計
4. ...
client-markdown: 配置 markdown 語法高亮
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/db.js 去連線你的資料庫。執行 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 的使用模型定義多表~
- 錯誤的統一處理，如何優雅的處理
- 專案結構如何搭建等等