antdpro學習筆記（一）

2021-08-26 08:44:49 字數 1568 閱讀 3601

在玩了一段時間antd後，又發現他還有個antdpro版，相比較而言後者功能更強大一些，對比一下在官網的演示demo就可以發現，後者的功能更偏向於實用方向以及對業務處理方面。而且在**的實現方式上兩者也有很大區別。本文不作比較，只是記錄上手antdpro的過程及自己的理解。

1.專案的入口為src/index.js檔案：

import './polyfill';


import dva from 'dva';


import createhistory from 'history/createhashhistory';


// user browserhistory


// import createhistory from 'history/createbrowserhistory';


import createloading from 'dva-loading';


import 'moment/locale/zh-cn';


import './rollbar';


import './index.less';


// 1. initialize


history: createhistory(),


});// 2. plugins


// 3. register global model


// 4. router


// 5. start
2.左側選單的配置放在了src/common/menu.js:

import  from '../utils/utils';


const menudata = [


, ,,],


},,,,


,,,],


},],},,


,],},,


,,


],},


];function formatter(data, parentpath = '/', parentauthority) = item;


if (!isurl(path)) 


const result = ;


if (item.children) $/`, item.authority);


}return result;


});}export const getmenudata = () => formatter(menudata);
'/': ,


'/dashboard/analysis': ,
4.資料操作在src/models/資料夾下新建乙個js檔案（對應routerconfig中的model），作為這個頁面的model，用來定義該頁面需要用到的資料，以及一些函式。在model中存在 namespace(命名空間，用來區分不同的頁面之間的資料，一般命名空間與檔名相同)，state（該命名空間下的資料），effects（一些非同步請求的api方法定義在這裡），reducers（用來修改state的一些函式定義在reducers下）。

model類似於mvc結構中控制器的角色，其中主要有五個配置項。

小結：頁面中整體的資料流程如下：

學習 Antd Pro 前後端分離

最近學習reactjs 前些年用rn開發過移動端，入門還算輕鬆。現在打算使用 antd pro 實現前後端分離。要使用antd pro這個腳手架，必須熟悉 umi dva redux saga 等相關知識。基礎知識及目錄結構可以先看官方文件 官方介紹 ant design pro 是乙個企業級中後台...

學習筆記一

lisp 最重要的一種執行模式之一 repl that endless cycle of reading,evaluating,and printing is why it s called the read eval print loop or repl.第乙個lisp程式 在repl模式下執行l...

學習筆記 一

什麼是seo？搜尋引擎優化 search engine optimization，簡稱seo 是一種利用搜尋引擎的搜尋規則來提高目的 在有關搜尋引擎內的排名的方式。深刻理解是 通過seo這樣一套基於搜尋引擎的營銷思路，為 提供生態式的自我營銷解決方案，讓 在行業內佔據領先地位，從而獲得品牌收益。研究...