開源 react + koa + mysql 設計的簡約風格的我的博客

前言

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

版本更新記錄

• 登陸功能：用戶名/郵箱 都可登陸！
• 我的信息：用戶的相關信息都可修改
• 郵件功能：評論回覆（綁定了郵箱的帳戶）若是有更新 都會自動經過郵件通知！

更新時間 2019-04-25 相關信息能夠查看 email-notice 這個分支

博客介紹

• 先後臺分離式開發（項目中也包含博客的後臺管理系統），爲了方便記錄後端開發過程，筆者將後端也一塊兒放在同個項目文件夾中。

• 博客樣式幾乎藉助於 antd 這個優秀的 UI 框架，主打簡約風格，是筆者借鑑了 antd 官方的風格所設計。

• 分出了幾個分支便於學習和查看開發記錄，相信這個項目會讓剛接觸 react 的夥伴學到一些的

• 博客地址 - 聯繫我能夠 email gershonv@163.com | QQ 434358603 | 博客關於頁面留言~

• 項目地址

• 預覽地址

  • 用戶名 admin/admin 最高權限，求小夥伴不要亂刪數據，亂刪數據其餘夥伴會沒什麼數據看的。
  • 給最高權限是爲了讓你們看到博主的權限。體驗博客完整的功能。
  • 後臺訪問路徑 /admin

實現功能

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

技術棧

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

分支

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

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: 開發分支
5. email-notice: 郵件推送服務

效果

預覽地址在這

概覽

評論功能與其餘

響應式

後臺管理

表結構

開啓項目

前端

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

源碼地址：github.com/gershonv/re…

項目結構：

後臺

項目地址

模塊設計

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

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