React+TypeScript+Antd+Mock 後臺管理系統

前言

• 在近段時間中Ts在互聯網時代大熱起來
• 在前段時間我學習了Ts，對於寫過java的人來講ts其實學起來駕輕就熟
• 可是把Ts和前端項目結合在一塊兒是否是駕輕就熟呢，非也
• 對於我這樣沒有經驗只是簡單的學習了官網以及對官網對例子進行編寫執行
• 這實際上是一次挑戰，對本身技術對一個突破
• 我就拿到了前面剛作好的一個react項目來改爲Ts的項目
• 與其說是改應該說是重構，從項目的搭建都是從頭開始
• 項目地址：gitee.com/yhf7/ReactT…

工具/資料

• 系統 macOS 10.14.5
• yarn 1.17.3 cnpm 6.0.0 npm 6.4.1 node 10.13.0
• 編輯器 vs code 開發版
• 腳手架 create-react-app
• npm插件 www.npmjs.com/
• ts www.tslang.cn/docs/home.h…

實現功能樹圖

├── Mock // 模擬數據
│   ├── user
│   ├── oreder
│   └── 等
├── 頁面 //
│   ├── UI ├── 按鈕、彈框、Loading、通知提醒、全局Message、Tab、標籤、圖片畫廊（流式佈局）、輪播圖 // antd咱們經常使用的抽取
│   ├── 表單 ├── 登陸、註冊(註冊經常使用組合)
│   ├── 表格 ├── 基礎表格（經常使用的表格） 高級表格（在基礎表格上添加的一些表格屬性）
│   ├── 富文本 這個其實平時也是很經常使用到的 （插件不少挑本身喜歡的）
│   ├── 城市管理 ├── 實現表格數據 開通城市 以及一些查詢
│   ├── 訂單管理 ├── 實現表格數據 結束訂單 查詢訂單  訂單詳情 
│   │                                                  ├── （訂單詳情頁面）經過訂單詳情跳轉 展現地圖以及訂單詳情
│   ├── 員工管理 ├── 實現表格數據以及 增刪改查的組件彈框操做
│   ├── 車輛地圖 實現地圖以及車輛信息
│   ├── 圖表 ├──  餅圖、柱狀圖、折線圖
│   ├── 權限設置 ├── 建立角色 設置權限 用戶受權
複製代碼

起步

1. 起一個ts項目

$ create-react-app react-ts-demo --typescript
複製代碼

2. 安裝/配置 antd等插件

• 安裝了不少我也不太記得具體看package

$ sudo cnpm i antd axios less less-loader mockjs koa koa2-cors react-router-dom redux react-redux -S
複製代碼

3. 搭建mock

• 利用koa和mockjs構建：具體看文件中的mock文件吧

4. 變動js爲tsx和創建ts的接口等

• 這個提及來我也不知道着麼說直接去看項目吧

5. 封裝API接口，以及組件等

部分效果圖

• 前面幾個列表裏面的都是antd的一些組件把經常使用的抽取出來

1. 登陸頁面

   

2. 主頁面

   

3. ui界面其中一個

   

4. 城市管理

   

5. 訂單管理

   

6. 圖表

   

7. 員工管理