react + typescript 博客內容管理系統

RyanCMS

項目地址 https://github.com/m-Ryan/RyanCMS

基於這個項目，你可以瞭解到

• [x] 前後端分離的實踐

• [x] react如何搭配typeScript

   - 例如編寫基本的接口，枚舉、泛型
   - 例如使用第三方包如何編寫d.ts

• [x] react服務端渲染

   - 如何通過nodejs中間層做服務端渲染
   - 如何在服務端渲染時向redux注入數據
   - 如何避免服務端已經調用的接口，在瀏覽器端重複調用

• [x] 一種簡單易用的redux模型

• • 這樣的redux模型你用過沒
    
• 只要這樣調用
  

• [x] 裝飾器的一些妙用

  • 例如編寫一個autobind 綁定react中的this
  • 例如編寫一個catchError 捕獲錯誤
  • 例如編寫一個loading 設置加載狀態等等

TODO

• [ ] 主題切換
• [ ] 自定義欄目
• [ ] 一些優化

項目預覽 http://cms.maocanhua.cn

項目預覽博客 http://cms.maocanhua.cn/u/Ryan

如何使用

 git clone [email protected]:m-Ryan/RyanCMS.git

在 backend下新建一個文件夾config，在下面新建 ormconfig.json

裏面的內容大概是這樣

{
  "type": "mysql",
  "host": "localhost",
  "port": 3306,
  "username": "root",
  "password": "******",
  "database": "cms",
  "entities": [
    "src/**/**.entity{.ts,.js}"
  ],
  "synchronize": true,
  "cache": true,
  "logging": false
}

首次使用請先安裝依賴

• 切換到 backend，npm install 或者 yarn
• 切換到 fontend，npm install 或者 yarn

1.切換到 backend

• yarn start => 本地開發

2.切換到 fontend

• yarn start => 本地開發

打開 http://localhost:3000/ 即可預覽

---

服務端渲染

3.切換到 backend

• yarn start => 本地開發

4.切換到 fontend

• yarn build => 編譯前端代碼
• yarn server:start => 本地開發，使用nodejs中間層

打開 http://localhost:3100/ 即可預覽

如果你喜歡或者對你有幫助，不妨給我個star或者fork一下吧❤️

---

部分頁面