摘要：大漠窮秋于贈此筆名。是版本的實(shí)現(xiàn)，和版本保持風(fēng)格一致。碼云最有價值的開源項(xiàng)目這是版的實(shí)現(xiàn)，和版本保持風(fēng)格一致。采用版本，使用組件庫以及開發(fā)。已推薦這是的服務(wù)端代碼，基于。如果你需要與這個后端代碼進(jìn)行對接，請檢出本項(xiàng)目的分支。

你好，我是徐曉東，筆名燕云長風(fēng)。大漠窮秋于 2019-03-16 21:22 贈此筆名。
寓意：結(jié)合李白著名的邊塞詩《關(guān)山月》取【燕云長風(fēng)】—— 長風(fēng)幾萬里，吹度玉門關(guān)。

NiceFish-React 是React版本的實(shí)現(xiàn)，和NiceFish Angular版本保持風(fēng)格一致。前端技術(shù)棧：React Hooks v16.8.3 ，React-Router v5，Bootstrap v4.7 SCSS源碼定制, Echarts v4.2.1, Ant-Design v.3.15.2 組件庫以及TypeScript進(jìn)行開發(fā)，沒有使用任何的前端腳手架，自己從零開始搭建整個博客系統(tǒng)，最大程度上保證了可擴(kuò)展和維護(hù)性。為了減輕代碼體積和提升性能，后續(xù)利用了Suspens 和 lazy 實(shí)現(xiàn)了Code Splitting，優(yōu)化后首屏加載只需663ms。
為了大家更加直觀認(rèn)識，我截了一組運(yùn)行效果圖：

首屏加載完只需663ms

這是閱讀頁面,不需要登錄訪問權(quán)限

這是統(tǒng)計(jì)圖表頁面,采用UI指定顏色值使用輪詢算法實(shí)現(xiàn)(需要登錄訪問權(quán)限)

這是文章評論頁面,有過濾和排序功能

這是我為NIceFish系列設(shè)計(jì)的登錄效果圖

這是閱讀頁面的詳情面(不需要登錄訪問權(quán)限)

好了,這是以上的效果展示圖,通過此博客系統(tǒng):

我的收獲如下:

1.對新版本的ReactHooks有了一定的理解和開發(fā)經(jīng)驗(yàn)

2.熟悉了BootStrap SCSS 源碼,定制了一套風(fēng)格,學(xué)習(xí)了Twitter的優(yōu)秀的scss源碼(想學(xué)scss的同志,擼一遍BootstrapSCSS源碼,你就能學(xué)的很全面)

3.使用全新的ReactRouter v5 ,學(xué)習(xí)了新路由"動態(tài)映射"的哲學(xué)思想

4.深入理解和使用Echarts繪圖組件庫

如果你需要更加全面的代碼,請?jiān)L問:NiceFish-React

這是NiceFish-React 在gitee page 上的在線演示地址:NiceFish-React

燕云長風(fēng)

NiceFish：美人魚，這是一個微型Blog系統(tǒng)，前端基于Angular7.0 + PrimeNG7.1.0。（GVIP 碼云最有價值的開源項(xiàng)目 3160 ☆)

NiceFish-React：這是React版的實(shí)現(xiàn)，和 NiceFish Angular 版本保持風(fēng)格一致。采用React Hooks 16.8.3 版本，使用TypeScript、Ant Design組件庫以及Bootstrap v4.2.1 開發(fā)。 (7 ☆)

OpenWMS-Frontend：OpenWMS項(xiàng)目前端基于 Angular 7.0 + PrimeNG 7.1.0。 (已推薦 199 ☆)

nicefish-spring-cloud：這是NiceFish的服務(wù)端代碼，基于SpringCloud。已經(jīng)完成了一些基本的功能，如 SpringSecurity+OAuth2+JWT 實(shí)現(xiàn)SSO，文章、用戶、評論等的分頁查詢等。如果你需要與這個后端代碼進(jìn)行對接，請檢出本項(xiàng)目的 for-spring-cloud 分支。 (已推薦 113 ☆)

燕云長風(fēng)知乎

燕云長風(fēng)知乎專欄

燕云長風(fēng)github

燕云長風(fēng)gitee

燕云長風(fēng)twitter

燕云長風(fēng)medium