一、項目的目錄結構

├── config # umi 配置，包含路由，構建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模擬數據 ├── public │ └── favicon.png # Favicon ├── scripts # ├── src │ ├── assets # 本地靜態資源 │ ├── components # 業務通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局，整個網站的共用導航欄，頁腳和主體部分; 權限、token獲取 │ ├── models # 全局 dva model，換言之是redux（interface、數據交互） （interface、數據交互） │ ├── pages # 業務頁面入口和常用模板 │ ├── services # 后臺接口服務請求（get,post） │ ├── utils # 工具庫（放一些公用方法）--創建src下創建util目錄，并且創建request.js文件·「放狀態碼」，輸入如下內容：（用于異步請求數據） │ ├── g2.js # 可視化圖形配置 │ ├── theme.js # 主題配置 │ ├── locales # 國際化資源 │ ├── global.less # 全局樣式 │ └── global.ts # 全局 JS ├── tests # 測試工具 ├── README.md └── package.json.editorconfig 編輯器配置文件 .eslintrc ESLint配置文件 .gitignore Git忽略文件 .roadhogrc.mock.js Mock配置文件 .webpackrc 自定義的webpack配置文件，JSON格式，如果需要 JS 格式，可修改為 .webpackrc.js鏈接：https://www.jianshu.com/p/c7b3b9c98d04

二、主要目錄和文件介紹

1、config 目錄

├── config # umi 配置，包含路由，構建等配置 │ ├── config # 配置文件：包含路由、樣式、proxy等 │ ├── defaultSettings # 默認設置：包括標題title、navTheme等 │ ├── plugin.config # webpack的Plugin配置 │ ├── router.config # 路由配置 │ ├── themePluginConfig # 風格主題的配置

2、src 目錄

1、src/components組件目錄
（1）src/components/Authorized組件

授權組件，路由權限的管理。

關系： index.jsx -> Authorized(內容權限管理) -> CheckPermissions-> renderAuthorize（內容渲染）-> Secured（判斷是否擁有權限訪問此 view 權限） -> CheckPermissions-> CheckPermissions（通用權限檢查方法） -> PromiseRender（promise渲染）

（2）src/components/GlobalHeader組件

基礎布局的頭部，包含搜索、用戶頭像、語言切換。

├── src/components ├── ... ├── GlobalHeader # 基礎布局的頭部 │ ├── AvatarDropdown # 用戶頭像下拉菜單 │ ├── NoticeIconView # 通知圖標和通知消息視圖 │ ├── plugin.config # webpack的Plugin配置 │ ├── RightContent # 基礎布局的頭部核心：包含搜索、頭像、語言選擇

（3）src/components/… 其他組件

HeaderDropdown:頭部下拉菜單，用于用戶頭像、搜索等。
HeaderSearch：頭部搜索組件。
NoticeIcon:頭部通知組件。
PageLoading:加載組件。
SelectLang：語言切換組件。

2、src/layouts布局

（1）src/layouts/BasicLayout布局

基礎默認布局，菜單、頂部、內容、頁腳。包含logo、菜單、面包屑等。

ant-design-pro的布局：

（2）src/layouts/SecurityLayout布局

安全布局，負責驗證是否登錄和登錄后跳轉加載，我們可以在這里寫自己的登錄認證規則。

（3）src/layouts/… 其他布局

UserLayout： 用戶布局，用于登錄頁。
BlankLayout： 空白布局，用于打印頁面等不需要布局的頁面。

3、src/locales

國際化資源語言，包含四種語言：簡體中文、繁體中文、英語、葡萄牙語
如果使用國際化請注意它對諸如：菜單、消息提示等影響。如果你是國內用戶，那么你可以忽略它。

4、src/models

全局 dva model

1、在 Ant Design Pro 中，一個完整的前端 UI 交互到服務端處理流程是這樣的：

1.UI 組件交互操作； 2.調用 model 的 effect； 3.調用統一管理的 service 請求函數； 4.使用封裝的 request.ts 發送請求； 5.獲取服務端返回； 6.然后調用 reducer 改變 state； 7.更新 model。

2、dva是什么？請看這里：dva.js

它里面的文件內容如下即可：

// model {namespace: String, // 命名空間state: Object, // 狀態reducer: Object, // 同步更新 stateeffects: Object, // 副作用：處理異步邏輯subscriptions: Object // 訂閱數據源 }

這些文件被引用在src/pages/.umi/dva中

dvajs:
https://dvajs.com
https://dvajs.com/guide/concepts.html#models
https://dvajs.com/api/#app-start-selector

3、Model 是 dva 最重要的部分，可以理解為 redux、react-redux、redux-saga 的封裝。

通常項目中一個模塊對應一個 model，一個基本的 model 如下：

import { fetchUsers } from '../services/user';export default {namespace: 'user',state: {list: [],},reducers: {save(state, action) {return {...state,list: action.data,};},},effects: {*fetch(action, { put, call }) {const users = yield put(fetchUsers, action.data);yield put({ type: 'save', data: users });},},subscriptions: {setup({ dispatch, history }) {return history.listen(({ pathname }) => {if (pathname === '/user') {dispatch({ type: 'fetch' });}});},}, }

另一個例子：

import * as services from '../services'; {namespace: 'system', //models命名空間，需全局唯一state: {dataList: []}, //models存儲的數據storereducers: {save(state, { payload }) { //更新store，用新數據合并state的舊數據return { ...state, ...payload };}},effects: {* testFunc({ payload: params }, { call, put, select }) { //dispatch請求的方法const { dataList } = yield select(state => state.system); //獲取models中的stateconst { data } = yield call(services.testFunc, params); //call,請求services里面的接口以及傳參，可繼續往后面加參數，跟JavaScript的call一樣if (data && data.code == 0) {const data_ = data.data.content;yield put({ //put,必須發出action save，此action被reducer監聽，從而達到更新state數據的目的type: 'save', payload: {dataList: data_ || []}});return data_; //返回response，可選} },},subscriptions: { //訂閱，在app.start()即啟動項目時被執行setup({ dispatch, history }) {return history.listen(({ pathname, query }) => {// 進入 '/manager/system' 路由，會發起一個名叫 'save' 的 effectif (pathname === '/manager/system') {//do sth... dispatch({ type: 'save', payload: query });}})}} }

• namespace 是該 model 的命名空間，同時也是全局 state 上的一個屬性，只能是字符串，不支持使用 . 創建多層命名空間。
• state 是狀態的初始值。該 Model 當前的狀態。數據保存在這里，直接決定了視圖層的輸出
• reducer 類似于 redux 中的 reducer，它是一個純函數，用于處理同步操作，是唯一可以修改 state 的地方，由 action 觸發，它有 state 和 action 兩個參數。
• effects 用于處理異步操作，不能直接修改 state，由 action 觸發，也可觸發 action。它只能是 generator 函數，并且有 action 和 effects 兩個參數。第二個參數 effects 包含 put、call 和 select 三個字段，put 用于觸發 action，call 用于調用異步處理邏輯，select 用于從 state 中獲取數據。
• subscriptions 用于訂閱某些數據源，并根據情況 dispatch 某些 action，格式為 ({ dispatch, history }, done) => unlistenFunction。

如上的一個 model，監聽路由變化，當進入 /user 頁面時，執行 effects 中的 fetch，以從服務端獲取用戶列表，然后 fetch 中觸發 reducers 中的 save 將從服務端獲取到的數據保存到 state 中。

注意，在 model 中觸發這個 model 中的 action 時不需要寫命名空間，比如在 fetch 中觸發 save 時是 { type: 'save' }。而在組件中觸發 action 時就需要帶上命名空間了，比如在某個組件中觸發 fetch 時，應該是 { type: 'user/fetch' }

4、dva: connect
當寫完 model 和組件后，需要將 model 和組件連接起來。dva 提供了 connect 方法，其實它就是 react-redux 的 connect。用法如下：

import React from 'react'; import { connect } from 'dva';const User = ({ dispatch, user }) => {return (<div></div>) }export default connect(({ user }) => {return user; })(User);

connect 后的組件除了可以獲取到 dispatch 和 state，還可以獲取到 location 和 history

鏈接：https://www.jianshu.com/p/c7b3b9c98d04

5、src/pages

業務頁面和常用模板

1、src/pages/document.ejs 默認html模板，umi 約定如果這個文件存在，會作為默認模板，內容上需要保證有 <div id="root"></div>，模板里可通過 context 來獲取到 umi 提供的變量。
2、user user業務邏輯內容，里面包含login登錄模塊，如果你需要更換登錄頁，請在這里處理。

6、src/services

服務請求層，在 Ant Design Pro 中，后臺接口服務需要寫在services文件下

例如登錄的請求：

import request from '@/utils/request'; export async function fakeAccountLogin(params) {return request('/api/login/account', {method: 'POST',data: params,}); } export async function getFakeCaptcha(mobile) {return request(`/api/login/captcha?mobile=${mobile}`); }

鏈接：https://www.jianshu.com/p/311e3e41688d

總結

以上是生活随笔為你收集整理的Ant Design Pro -- 02项目结构@20210331的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。