ant-design-pro淺析總結
前言
使用螞蟻金服的ant-design-pro框架,畢竟也是剛開始學習React,剛從github拉下來有點懵,不明白那麼多模組之間是如何呼叫的,資料如何和頁面關聯,伴隨著這些疑問去學習了Redux,之後就覺得思路清晰多了,明白了整個專案內部的呼叫流程後,裡面的模組就可以隨意新增調整,所以個人覺得在使用ant-design-pro之前,前提是去學習一下Redux,這樣整個思路都會清晰起來。扯皮的話不多說了,直接步入正題。
ant-design-pro的整個框架結構
├── mock # 本地模擬資料
├── public # 存放公共資源
├── src
│ ├── assets # 本地靜態資源
│ ├── common # 導航資訊和路由的配置
│ ├── components # 通用元件的封裝,如表格、表單
│ ├── e2e # 整合測試用例
│ ├── layouts # 通用佈局,整個網站的共用導航欄,頁尾和主體部分
│ ├── models # dva model
│ ├── routes # 瀏覽器中所看到的頁面
│ ├── services # 後臺介面服務
│ ├── utils # 工具庫
│ ├── g2.js # 視覺化圖形配置
│ ├── theme.js # 主題配置
│ ├── index.ejs # HTML 入口模板,相當於index.html
│ ├── index.js # 應用入口
│ ├── index.less # 全域性樣式
│ └── router.js # 路由入口
├── tests # 測試工具
├── README.md
└── package.json
在以上的目錄中,所獨立出來的模組,對於第一次使用這個架構的同學來說,比較新奇的就是mock模組,以及src中的分層結構:models、service、routes這三部分和common了,下面的內容就重點介紹這三部分的關係,以及每部分的職責。
common
目前專案所使用的是v2.0這個版本,每個版本可能都會有些不同之處,這個版本中目前將導航和路由分開,分別在menu.js和router.js這兩個檔案中。
- menu.js
主要設定導航欄的資訊,如跳轉連結和所顯示的文字和圖示。如下所示:
{
name: '題庫', //導航欄上顯示的文字
icon: 'table', //顯示的圖示
path: 'problem', //跳轉的連結
}
- router.js
這個檔案很重要,裡面涉及了路由,資料還有頁面,主要將路由和頁面關聯,以及將資料和頁面關聯。如下所示:
'/problem': {
component: dynamicWrapper(app, ['problemList'], () => import('../routes/ProblemList')
),
},
'/problem/detail/:id': {
component: dynamicWrapper(app, ['problem', 'user'], () => import('../routes/Problem')),
},
從上面程式碼可以看出,一個頁面可以關聯多個數據,這個根據頁面的需求來決定,只要是關聯的資料都可以在頁面中拿到。dynamicWrapper
函式所做的工作就是將頁面與model關聯起來,其中第二個引數就是model的檔名。
models
在第二部分框架的基本結構中就說了models是屬於dva的,所以如果你之前就使用過dva的話,那這個框架就用起來非常得心應手,model是dva的核心部分,ant-design-pro就是針對dva的一次最佳實踐。下面看下model檔案的主要結構:
import { getProblemInfo } from '../services/api';
export default {
namespace: 'problem',
state: {
problemInfo: {}, // 題目詳情
loading: true,
},
effects: {
*fetchProblemInfo({ payload }, { call, put }) {
yield put({ //開啟頁面載入動畫
type: 'changeLoading',
payload: true,
});
const response = yield call(getProblemInfo, payload); // 獲取頁面資料
if (response.code === 0) {
yield put({ //將資料交給reducer處理
type: 'saveProblemInfo',
payload: response.data,
});
}
}
}
yield put({ //結束頁面載入動畫
type: 'changeLoading',
payload: false,
});
},
},
reducers: {
saveProblemInfo(state, action) {
return {
...state,
problemInfo: action.payload, //將資料返回給頁面
};
},
changeLoading(state, action) {
return {
...state,
loading: action.payload,
};
},
},
};
- namespace:該欄位就相當於model的索引,根據該名稱空間就可以找到頁面對應的model;
- effects: 處理所有的非同步邏輯,將返回結果以Action的形式交給reducer處理;
- reducers:處理所有的同步邏輯,將資料返回給頁面;
補充:在effects中呼叫了service中所封裝的後臺介面,該呼叫方式是ES6中的generator函式,該函式使得非同步操作如同同步操作一樣。call就相當於一個執行器,在call內部對generator函式進行了處理。
routes
在routes中主要涉及兩個操作,第一個就是如何拿到資料,第二個就是如何傳送同步或非同步請求來更新頁面資料。
- 如何拿到資料
在該模組中,就是每個路由所對應的頁面,下面主要了解資料是如何在頁面中取到的:
import { connect } from 'dva';
@connect(state => ({
problem: state.problem,
user: state.user,
}))
export default class Problem extends PureComponent {
render() {
const { problem, user } = this.props;
return (
<div title="題目">{problem.title}</div>
);
}
}
從上面的程式碼可以看到在頁面中匯入了dva框架,用dva的connect方法可以拿到所有的state,我們只需要在頁面中獲取需要的state即可。拿到之後所有的資料都是以props的形式嵌入頁面的,也就是我們就像操作props來對待這些資料即可。
- 如何更新頁面資料
在和model關聯的頁面中,都會給頁面傳入dispatch()
這個方法,該方法就是分發的意思,可以發出一個Action,Action是Redux中的概念,發出這個Action後就會找到頁面所對應的model,然後做出相應的處理。如下:
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'problem/fetchProblemInfo',
payload: {
id: this.props.match.params.id,
},
});
}
dispatch中的引數就是一個Action。第一個type欄位由兩部分組成,前半部分是model的namespace(名稱空間),後半部分是該Action的處理位置,對應model中的effects(處理非同步邏輯),或reducers(處理同步邏輯)。
services
這個模組中的邏輯相對比較簡單,就是模仿一下後臺介面的實現,對請求進行了進一步的封裝。
// 獲得題目資訊
export async function getProblemInfo(params) {
return request(`/apiv1/problem/get?${stringify(params)}`);
}
// 普通提交
export async function commonSubmit (params) {
return request('/authv1/submit/common', {
method: 'POST',
body: params,
})
}
在該層將request的結果返回給model層,放在async內部的函式都是同步的。
Mock
Mock的功能就是可以在本地模擬後臺的行為,在框架中主要涉及到.roadhogrc.mock.js檔案。如果開啟代理的話,當發起請求時就會被代理到本地來處理,根據請求方式和URL就可以返回不同的資料。
總結
以上是對ant-design-pro的一次實踐總結,希望有助於剛開始接觸這個框架的新手加深理解,具體的時間專案已傳至
歡迎 start Thanks♪(・ω・)ノ。
最後再說一點吧!框架這樣的封裝,使得頁面、後臺請求和資料處理邏輯分離,讓前端開發和後臺開發一樣更加工程化,在開發時更容易定位錯誤,也有利於程式碼後期的維護。但這使得程式碼完全依賴於dva框架,如果有天dva停止了維護更新,出現錯誤無法處理,太依賴第三方庫不是很利於專案版本的更新迭代。有利也有弊,所以我們在選擇框架時也是要慎重考慮的。相關推薦
ant-design-pro淺析總結
前言使用螞蟻金服的ant-design-pro框架,畢竟也是剛開始學習React,剛從github拉下來有點懵,不明白那麼多模組之間是如何呼叫的,資料如何和頁面關聯,伴隨著這些疑問去學習了Redux,之後就覺得思路清晰多了,明白了整個專案內部的呼叫流程後,裡面的模組就可以隨意
ant-design-pro 使用總結—自定義打包 構建配置
ant-design-pro使用了umi.js,沒有直接使用webpack,我們要配置自定義的構建打包跟直接的webpack配置不太一樣。 首先,大部分的webpack打包配置都可以直接修改config/config.js來實現,比如 proxy,publicP
ant design pro 程式碼學習(六) ----- 知識點總結2
1 、connect 多個model 以下為redux的API中對connect方法的定義: connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
Ant Design Pro 腳手架+umiJS 實踐總結
一、簡介 1、Ant Design Pro Ant Design Pro是一款搭建中後臺管理控制檯的腳手架 ,基於React,dva.js,Ant Design (1)其中dva主要是控制資料流向,是純粹的資料流,用作狀態管理 使用React技術棧管理大型複雜的應用往往要使用Redux來管理
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、應用場景 路由直接引導到報錯頁面,比如你輸入
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作為請求網路的基礎元件,碰到了一些跨域問題,在我的另一篇裡
關於ant design pro框架找js頁面的問題
ant design pro 怎樣找對應的js頁面 相信第一次用ant design pro的朋友可能會對裡面的對應頁面關係給搞混,因為它不像h5裡連線是可以看到的, 下面就為大家分享下它的對應的js頁面是在哪。 程式碼在src目錄下,在locales資料夾下可以看到裡面有好幾個資料
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 單元測試
1.獲取Ant Design Pro專案
我是一個後臺程式設計師,搞後臺程式碼和資料庫多點,但是專案逼我做全棧程式設計師 專案其他工程用的前端最先進也就mvc了,感覺和現在的前端主流脫節很大 先前也就在mvc裡引用了vue.js開發了一個微信企業號,那個專案也是把我搞得好累 這次繼續挑戰自己,玩一次純的前後臺分
2.Ant Design Pro的第一個選單
準備 正式開發前需要準備一個IDE,如果是用純記事本的大神請忽略 可以選Sublime和VsCode等,找個自己用過的順手的 反正我都沒用過,跟隨我軟的指令碼我就選VsCode把 在VSCode裡新增一個工程,選定上一章克隆下來的工程資料夾目錄 然後再儲存下工程檔案
ant design pro (十三)advanced 錯誤處理
一、概述 原文地址:https://pro.ant.design/docs/error-cn 二、詳細 2.1、頁面級報錯 2.1.1、應用場景 路由直接引導到報錯頁面,比如你輸入的網址沒有匹配到任何頁面,可以由路由引導到預設的 404 頁面。 程式碼控制跳轉到報錯頁面,比如根據請求
Ant Design Pro,用setFieldsValue方法,給巢狀到Form表單中的DatePicker元件設定預設值
其實用setFieldsValue或者獲取setState方法都可以設定DatePicker的預設值。 setState方法: <FormItem label="日期選擇框"> {getFieldDecorator('date', {