使用 react + koa2 + mysql 開發出一個簡潔風格的我的博客

前言

使用 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

實現功能

• [x] 主頁 + 列表頁 + 搜索頁 + 後臺增刪改查文章等
• [x] 博客標籤、分類
• [x] 評論與回覆功能模塊
• [x] 用戶登陸註冊，以及權限管理 (jwt + localStorage)
• [x] markdown 代碼高亮
• [x] 錨點導航 回到頂部
• [x] 響應式開發

分支

爲了方便查看開發記錄筆者分了幾個分支

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/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 的使用 模型定義 多表~
  • 錯誤的統一處理，如何優雅的處理
  • 項目結構如何搭建等等

源碼地址：https://github.com/gershonv/react-blog

項目結構：

後臺

項目地址

模塊設計

• 博主 auth = 1 具有最高權限 文章、評論和回覆的增刪改查權限（root用戶只能在註冊後在數據庫改權限）
• 普通用戶 auth = 2 具有評論和回覆的功能
• 注意 關於頁面引用 articleId = -1 新建文章後自改庫吧

PS : 以爲不錯的夥伴能夠給個 star ~~~ 或者 fork 下來看看哦。若是有什麼建議，也能夠提 issue 哦