react + typescript 博客內容管理系統

RyanCMS

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

基於這個項目，你能夠了解到

• 先後端分離的實踐

• react如何搭配typeScript

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

• react服務端渲染

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

• 一種簡單易用的redux模型

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

    

• 裝飾器的一些妙用

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

• 寫一個webpack插件動態設置主題顏色

  • 

---

項目地址 http://cms.maocanhua.cn

項目演示地址 http://cms.maocanhua.cn/u/Ryan

如何使用

git clone git@github.com: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/ 便可預覽

---

獨立域名綁定

5.若是不想搭博客，又想在本身的域名下有個博客，能夠配置nginx映射到綁定域名下，例如 我想綁定到 www.maocanhua.cn

• 1- 綁定獨立域名
  

• 2- 配置nginx

  server {
      listen 80;
      server_name  www.maocanhua.cn;
      location /api {
         proxy_pass  http://cms.maocanhua.cn;  
      }
      
      location / {
           proxy_set_header ACCEPT-HOST $host;
           proxy_pass  http://cms.maocanhua.cn/domain/;  
      }
  }

• 3- 打開綁定的域名，若是能正常訪問，即配置成功

---

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

部分頁面