前言

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

項目預(yù)覽地址

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

GitHub地址

LinWeb/blog?github.com

體驗地址

- 博客主頁

林大大的博客?39.105.133.130:8088

- 后臺管理系統(tǒng)，管理員賬號密碼：admin/admin

林大大的博客?39.105.133.130:8088

界面截圖

- 博客主頁

- 后臺系統(tǒng)主頁

技術(shù)棧

- 前端技術(shù)棧

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

- 后端技術(shù)棧

koa2 + koa-router + mysql + sequelize

項目結(jié)構(gòu)詳解

項目運行

- 配置數(shù)據(jù)庫

安裝mysql，新建一個名稱叫“**blog**”的數(shù)據(jù)庫

- 安裝依賴

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

npm install

- 啟動項目

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

npm start

后臺模塊

- 文章

- 文章列表

- 文章詳情

- 標簽篩選

- 分類篩選

- 新增文章

- 刪除文章

- 更新文章

- 標簽

- 標簽列表

- 分類

- 分類列表

- 評論

- 評論列表

- 新增評論

- 刪除評論

- 回復(fù)

- 新增回復(fù)

- 刪除回復(fù)

- 用戶

- 注冊用戶

- 用戶登錄

- 用戶列表

- 刪除用戶

- 更新用戶

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

項目優(yōu)化

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

到現(xiàn)在做的優(yōu)化有以下幾點：

* antd做按需加載

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

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

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

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

持續(xù)優(yōu)化中~

項目總結(jié)

- 開始做這個項目的時候，先明確項目的需求，然后設(shè)計好數(shù)據(jù)表，考慮到數(shù)據(jù)表的聯(lián)系

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

- 個人來說，使用react的一個缺點是對數(shù)據(jù)監(jiān)聽方面沒有vue用起來順暢

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的引入antd组件样式_个人作品：一个技术栈koa2+ mysql+react + antd的个人博客的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。