ant design pro**於ant design，其是一段自帶樣式的react元件，用於企業後台的漂亮的，可控的元件。ant design有很多元件和樣式，不可能所有都記住，我們只要記住常用的，遇到不常用的，學會查文件就可以了
因為ant design很強大，阿里有些大神就直接將ant design繼續向上封裝成乙個完整的專案，這就是ant design pro，注意ant design pro已經是乙個成形的專案，配置環境已經好了，我們做專案只需要在其上進行增刪改就可以了，其就是個腳手架
安裝
npm create umi
這時候pro的腳手架就會安裝了
目錄結構
ant design pro最常用有兩個命令：
路由和選單是組織起乙個應用的關鍵骨架，pro 中的路由為了方便管理，使用了中心化的方式，在 config.ts 統一配置和管理，根據路由的配置會自動生成對應的選單。
我們看下如何定義和修改antd pro中的樣式
因為我們定義的css是全域性性的，這就產生了全域性汙染的問題，也就是說，我們通過npm run build之後的css檔案，後面的css選擇器會覆蓋前面的css選擇器，為了解決這種情況，我們採用了css modules方式，其定義如下：
import styles from './example.less';
export default () =>
;.title
下面我們看下pro作為前端框架和服務端是如何進行互動的：
1.ui 元件互動操作；
2.呼叫 model 的 effect；
3.呼叫統一管理的 service 請求函式；
4.使用封裝的 request.ts 傳送請求；
5.獲取服務端返回；
6.然後呼叫 reducer 改變 state；
7.更新 model。
從上面的流程可以看出，為了方便管理維護，統一的請求處理都放在 services 資料夾中，並且一般按照 model 維度進行拆分檔案， 在處理複雜的非同步請求的時候，很容易讓邏輯混亂，陷入巢狀陷阱，所以 ant design pro 的底層基礎框架 dva 使用 effect 的方式來管理同步化非同步請求(通過 generator 和 yield 使得非同步呼叫的邏輯處理跟同步一樣)：
effects: , ) );
// 非同步請求 1
const response = yield call(queryfakelist, payload);
yield put();
// 非同步請求 2
輕鬆玩轉CSS浮動原理
其實css浮動原理就4句話，不像網上的某些文章說的天花亂墜！浮動必會脫離文件流 浮動會失去塊級作用 浮動只在自己所在位置那行向左或者向右浮動 在寬度和高度沒有設定的情況下，乙個元素加上float後，會變成類似內聯元素的效果，但是它其實是塊級元素，width和height都可以設定的 請仔細理解上面這...
輕鬆玩轉php連線mysql
一.php操作mysql資料庫環境準備 二.php資料庫連線步驟 1.第一步 連線資料庫伺服器 2.第二步 判斷錯誤 3.第三步 選擇資料庫 4.第四步 設定字符集 5.第五步 準備sql語句 6.第六步 傳送sql語句 7.第七步 判斷是否執行正常或者遍歷資料,8.第八步 關閉資料庫 9.其他 顯...
利用Docker輕鬆玩轉Cassandra
摘要 cassandra 是乙個流行的分布式nosql資料儲存系統。最近有客戶問起了cassandra在如何docker中執行的一些問題。本文將利用docker compose和阿里雲容器服務輕鬆玩轉cassandra cassandra 是乙個流行的分布式nosql資料儲存系統。最近有客戶問起了c...