前言

此項目是個人博客，有前端界面+后臺管理系統；目的是當做react和node的練手項目，同時還可以了解到服務器nginx部署web站點以及備案和域名的基本操作流程。

項目預覽地址

https://www.lxsblog.cn?www.lxsblog.cn

GitHub地址

LinWeb/blog?github.com

體驗地址

- 博客主頁

林大大的博客?39.105.133.130:8088

- 后臺管理系統，管理員賬號密碼：admin/admin

林大大的博客?39.105.133.130:8088

界面截圖

- 博客主頁

- 后臺系統主頁

技術棧

- 前端技術棧

react + antd + react-router + react-redux + axios

- 后端技術棧

koa2 + koa-router + mysql + sequelize

項目結構詳解

項目運行

- 配置數據庫

安裝mysql，新建一個名稱叫“**blog**”的數據庫

- 安裝依賴

項目根目錄和根目錄的app目錄下分別安裝

npm install

- 啟動項目

項目根目錄和根目錄的app目錄下分別啟動

npm start

后臺模塊

- 文章

- 文章列表

- 文章詳情

- 標簽篩選

- 分類篩選

- 新增文章

- 刪除文章

- 更新文章

- 標簽

- 標簽列表

- 分類

- 分類列表

- 評論

- 評論列表

- 新增評論

- 刪除評論

- 回復

- 新增回復

- 刪除回復

- 用戶

- 注冊用戶

- 用戶登錄

- 用戶列表

- 刪除用戶

- 更新用戶

- 校驗用戶名是否已注冊過

項目優化

目前，已優化了一部分，首次加載需要3,4秒的時間，由于目前租的云服務器的寬帶只有1M。

到現在做的優化有以下幾點：

* antd做按需加載

* highlight.js高亮依賴包只引入需要的模塊

* 前端webpack+nginx 使用GZIP壓縮，不采用koa后端壓縮，減少I/O的消耗

* webpack配置splitChunks切割模塊代碼，生成多個模塊js文件

* 采用自定義高階組件bundle.js+import('')，按需動態加載組件

持續優化中~

項目總結

- 開始做這個項目的時候，先明確項目的需求，然后設計好數據表，考慮到數據表的聯系

- 因為項目是使用sequelize操作mysql，所以要提前了解開發文檔，不然會走很多坑

- 個人來說，使用react的一個缺點是對數據監聽方面沒有vue用起來順暢

- 使用antd這個react組件庫，帶來了界面設計方面的便利，自己只是再做一些樣式的優化即可