ant design pro 頁面載入原理及過程,@connect 裝飾器
一、概述
以列表頁中的標準列表為主
Ant Design Pro 預設通過只需瀏覽器單方面就可處理的 HashHistory 來完成路由。如果要切換為 BrowserHistory,那在 src/index.js 中也有對應的內容可以直接修改,但需要在後端伺服器進行相應路由配置。
二、詳述
載入過程圖
2.1、選單→路由→元件
在左側的導航欄點選 列表頁 > 標準列表
後,可以進入到上面截圖所示的頁面。導航欄的內容在 src/common/menu.js
中【或者服務獲取的地址】
選單:
{ name: '列表頁', icon: 'table', path: 'list', children: [ { name: '查詢表格', path: 'table-list', }, { name: '標準列表', path: 'basic-list', }, //…… ], },
路由
全域性的路由關係是:src/index.js
中通過 app.router(require('./router').default);
,將 src/router.js
繫結到 dva
例項的 router
方法上。而在 src/router.js
中又引入了 src/common/router.js
中的 getRouterData
作為資料來源。
其實就是相當於:src/common/menu.js
中 path
所指向的路徑對應於 src/common/router.js
中的路由記錄。
export const getRouterData = (app) => { const routerConfig = { ..., '/list/basic-list': { component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')), }, ..., }; ... }
這裡呼叫了同文件內的 lazy-loading 的動態載入函式 dynamicWrapper
,有 3 個引數,app
為全域性 dva
例項,models
為一個帶有相關 dva
Model 的 Array,component
即為該路由記錄對應的實際元件。
const dynamicWrapper = (app, models, component) => {...};
可以看到:
1、載入路由的時候,會動態載入當前檔案下的model檔案,也就是對應檔案下的src/models/list.js
元件:
src/routes/List/BasicList.js
import React, { PureComponent } from 'react';
import { connect } from 'dva';
//……
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@connect(({ list, loading }) => ({
list,
loading: loading.models.list,
}))
export default class BasicList extends PureComponent {
componentDidMount() {
this.props.dispatch({
type: 'list/fetch',
payload: {
count: 5,
},
});
}
render() {
return (
<PageHeaderLayout>{/* 頁面內容…… */}</PageHeaderLayout>
);
}
}
2.2、@connect 裝飾器
元件寫法中呼叫了 dva
所封裝的 react-redux
的 @connect
裝飾器,用來接收繫結的 list
這個 model 對應的 redux store。注意到這裡的裝飾器實際除了 app.state.list
以外還實際接收 app.state.loading
作為引數,這個 loading
的來源是 src/index.js
中呼叫的 dva-loading
這個外掛。
/*
* src/index.js
*/
import createLoading from 'dva-loading';
app.use(createLoading());
它返回的資訊包含了 global、model 和 effect 的非同步載入完成情況。
資料map一
{
"global": true,
"models": {
"list": false,
"user": true,
"rule": false
},
"effects": {
"list/fetch": false,
"user/fetchCurrent": true,
"rule/fetch": false
}
}
注意到在這裡帶上 {count: 5}
這個 payload 向 store 進行了一個型別為 list/fetch
的 dispatch,在 src/models/list.js
中就可以找到具體的對應操作。
import { queryFakeList } from '../services/api';
export default {
namespace: 'list',
state: {
list: [],
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryFakeList, payload);
yield put({
type: 'queryList',
payload: Array.isArray(response) ? response : [],
});
},
/* ... */
},
reducers: {
queryList(state, action) {
return {
...state,
list: action.payload,
};
},
/* ... */
},
};
View中使用
1、connect使用
@connect(({ list, loading }) => ({
list,//①
loading: loading.models.list,//②
}))
說明:
1、connect 有兩個引數,mapStateToProps以及mapDispatchToProps,一個將狀態繫結到元件的props一個將方法繫結到元件的props
2、程式碼①:將實體list中的state資料繫結到props,注意繫結的是實體list整體,使用時需要list.[state中的具體變數]
3、程式碼②:通過loading將上文“資料map一”中的models的list的key對應的value讀取出來。賦值給loading,以方便使用,如表格是否有載入圖示
當然程式碼②也可以通過key value編寫:loading.effects["list/fetch"]
2、變數獲取
因,在src/models/list.js
export default {
namespace: 'list',
state: {
list: [],
},
故在view中使用
render() {
const { list: { list }, loading } = this.props;
說明:
定義使用時:list: { list } ,含義實體list下的state型別的list變數
相關推薦
ant design pro 頁面載入原理及過程,@connect 裝飾器
一、概述 以列表頁中的標準列表為主 Ant Design Pro 預設通過只需瀏覽器單方面就可處理的 HashHistory 來完成路由。如果要切換為 BrowserHistory,那在 src/index.js 中也有對應的內容可以直接修改,但需要在後端
整理裝飾器的形成過程,背誦裝飾器的固定格式
固定格式 def wrapper(func): 2.傳入函式值f def inner(*args, **kwargs): #執行函式前進行的操作 ret = func(*args,**kwargs) # 5.執行f()函式 #執行函式後進行的操作
關於ant design pro框架找js頁面的問題
ant design pro 怎樣找對應的js頁面 相信第一次用ant design pro的朋友可能會對裡面的對應頁面關係給搞混,因為它不像h5裡連線是可以看到的, 下面就為大家分享下它的對應的js頁面是在哪。 程式碼在src目錄下,在locales資料夾下可以看到裡面有好幾個資料
創建頁面---基於Ant-Design-Pro-2-0-的CMS管理後臺入門系列
啟動項 表情 在一起 項目 cms 系列 .com att git 拉取項目 luwei.web.study-ant-design-pro, 切換至 page 分支,可看到創建頁面的效果 啟動項目 前置:安裝完依賴包,若未安裝,請移步 安裝項目依賴包 運行命令啟動項
Ant Design Pro專案開啟頁設為登入或者其他頁面
Ant Design Pro專案開啟頁設為登入或者其他頁面 一、開啟頁設為登入頁 首先找到utils包中的authority檔案,在該檔案中找到如下程式碼: export function getAuthority(str) { // return localStorage.getItem('ant
使用 sitemesh/decorator裝飾器裝飾jsp頁面(原理及詳細配置)
sa一、SiteMesh介紹SiteMesh是一個Java WEB項目的網頁布局和修飾框架。使用SiteMesh後就不再需要在每個頁面中都用<jsp:include>標簽引入頁頭、頁尾、導航等其他公用頁面了。可以將網頁的內容和頁面結構分離,達到頁面結構共享的目的。頁面裝飾效果耦合在目標頁面中,無需
結合http詳解基於域名的虛擬主機訪問詳細原理及過程
linux服務器如何響應[[email protected]/* */ blog]# netstat -lntup|grep 80 tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN
004-ant design pro安裝、目錄結構、項目加載啟動
assets ocs win 領域 org 參考 des 布局 class 一、概述 1.1、腳手架概念 編程領域中的“腳手架(Scaffolding)”指的是能夠快速搭建項目“骨架”的一類工具。例如大多數的React
002-ant design pro 布局
篩選 html imp 我們 mas app 路由 http span 一、概述 參看地址:https://pro.ant.design/docs/layout-cn 其實在上述地址ant-design上已經有詳細介紹,本文知識簡述概要。 頁面整體布局是一
003-ant design pro 路由和菜單
部分 doc angle line board 面包屑 腳手架 封裝 ebp 一、概述 參看地址:https://pro.ant.design/docs/router-and-nav-cn 二、原文摘要 路由和菜單是組織起一個應用的關鍵骨架,我們的腳手架提供了
006-ant design pro 樣式
module text patch 導致 multipl 應該 back wid round 一、概述 參看地址:https://pro.ant.design/docs/style-cn 基礎的 CSS 知識或查閱屬性,可以參考 MDN文檔。 二、詳細介紹
010-ant design pro advanced 圖表
mage water 分享 rtc 分享圖片 cit nod 繪制 wave 一、概述 原文地址:https://pro.ant.design/docs/graph-cn Ant Design Pro 提供了由設計師精心設計抽象的圖表類型,是在 BizCharts 圖表
013-ant design pro advanced 錯誤處理
title 相關 amp desc mar esp 封裝 tle resp 一、概述 原文地址:https://pro.ant.design/docs/error-cn 二、詳細 2.1、頁面級報錯 2.1.1、應用場景 路由直接引導到報錯頁面,比如你輸入
jsp頁面執行原理及獲取上下文根方式
展示 第一次 使用 繼續 發現 釋放 包含 情況 文件 一、在一個JSP文件第一次被請求時,JSP引擎把該JSP文件轉換成為一個Servlet。而這個引擎本身也是一個Servlet。jsp實質是屬於後臺。它的執行過程如下: (1)JSP引擎先把該JSP文件轉換成一個Java
ant-design-pro 之 Login 組件
con user 密碼 驗證 調用 pass des login asc 1.引入 // 引入 ant-design-pro import Login from ‘ant-design-pro/lib/Login‘; /** * UserName 賬號 * Passw
ant design pro開發碰到的跨域問題
跨域問題 為了讓admin管理系統適應手機版,決定對首頁及各個功能頁進行升級。以前用admin antd design作為腳手架進行開發發現對手機版支援不好。這次用ant design的pro版進行開發,從新搭建前端開發框架。 之前框架用axios作為請求網路的基礎元件,碰到了一些跨域問題,在我的另一篇裡
Ceilometer外掛採集資料原理及過程
本部落格所有文章採用的授權方式為 自由轉載-非商用-非衍生-保持署名 ,轉載請務必註明出處,謝謝。 宣告: 本部落格歡迎轉發,但請註明出處,保留原作者資訊 部落格地址:孟阿龍的部落格 所有內容為本人學習、研究、總結。如有雷同,實屬榮幸 注: 本文以Opens
ant design pro (七)和服務端進行互動
一、概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基於 React 技術棧的單頁面應用,我們提供的是前端程式碼和本地模擬資料的開發模式, 通過 Restful API 的形式和任何技術棧的服務端應用一起工作。下面將簡
ant design pro (十一)advanced Mock 和聯調
ces 底層 包含 跨域請求 from not file 數據請求 友好 一、概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 數據是前端開發過程中必不可少的一環,是分離前後端開發的關鍵鏈路。通過預先跟服務器端約定好的
ant design pro (十二)advanced UI 測試
一、概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 測試是專案研發流程中的重要一環,有效的測試用例可以梳理業務需求,保證研發的質量和進度,讓工程師可以放心的重構程式碼和新增功能。 Ant Design Pro 封裝了一套簡潔易用的 React 單元測試