使用antd design開發項目總結

項目名稱 ---------社會治安管理

所寫部分 --------- 人員管理

人員管理的基本操做就是普通的增刪查改,而在這增刪查改中最主要考察的就是數據的傳遞和頁面的跳轉
通常來講,管理這類頁面大致都是一個table,而後修改和增長會彈出一個modal進行填寫,或者數據較多的狀況下會進行頁面的跳轉,而後一個大的Form表單進行填寫.填寫後的數據映射在table裏面這就是整個用戶操做上的一個流程.

流程展現

頁面展現

圖一

圖二

圖三

圖四

圖五

圖六

圖七

技術問題的解決

(1) 頁面的跳轉攜帶參數的問題
個人頁面不少都會進行頁面的跳轉,而下一個頁面的信息都是跟上頁面相關聯的,及時我跳轉的頁面所須要的信息,在跳轉前的頁面都是存在的,因此我第一個想的方法就是在跳轉路由的時候,經過傳參的方式,進行數據的傳遞,因此我是用了location中的state來存儲我傳的數據.

const data=record;
                const path = {
                    pathname:'/person/releaseDetial',
                    state:{data},

這樣傳遞的數據,我直接在新的頁面經過this.props.history.location中把他取出來,這樣傳遞數據,雖然確實能夠在新的頁面拿到而且進行渲染,可是問題是,若是進行刷新,個人數據將會丟失,只能返回上一頁,從新進入.因此這裏的修改,採用拼接URL的方式.由於刷新不會改變的是路由的地址,因此咱們採用跳轉路由經過拼接URL的方式,而後經過解析路由,在新頁面進行數據的請求.

const {id}= record;
                than.props.dispatch(routerRedux.push({   
                    pathname: `/person/druginfo/edit/${id}`,
                }))

router.js裏面配置路由使這麼寫

'/person/druginfo/:type/:id':{
          component: dynamicWrapper(app, ['personrelease'], () => import('../routes/Person/PersonRelease/ReleaseInfo')),
        },

在新的頁面進行解析路由,拿到咱們須要的id,而後在本頁面進行數據請求

const pathToRegexp = require('path-to-regexp');
        const match = pathToRegexp('/person/druginfo/:type/:id').exec(this.props.history.location.pathname)
        this.props.dispatch({
            type:'persondrug/getBase',
            payload:{
                idCard:match[2],
            },
        });

(2)父子組件以前的信息
子調父
父組件通常是向子組件傳遞數據,而後子組件拿到數據進行本身頁面的一個渲染,可是更多時候,咱們須要將一些函數一塊兒傳給子組件,好比:彈出一個Modal進行數據的填寫,而後關閉Model的這個操做咱們須要父組件來控制,可是這個肯定按鈕又是在子組件裏面.這時候咱們就須要將此類的函數向子組件傳遞.還有一種函數叫作回調函數,父組件何時須要傳遞迴調函數給子組件呢,當父組件須要子組件的一些數據的時候,好比咱們填好數據,點擊肯定的時候確定須要將填寫好的數據返回給父組件,由父組件向後臺發送請求.
父控子
我有個網頁是填寫其餘人員信息,而這個信息由基本信息(一個組件)和其餘人員信息組成,有個問題是,我組件裏面表單的信息何時進行校驗,何時將填好的數據返回給父頁面.這個回答固然是當我點擊肯定時候進行數據的校驗,校驗成功就會拿到數據,而後傳遞給後臺.固然流程上是這個樣子的,但是個人子組件怎麼能感知到父頁面的操做呢,這裏就涉及到一個問題,怎麼父組件控制子組件的方法,我是用的react的ref的方法能夠參考連接用法:參考我寫的一個總結
(3)tabs的使用
在使用tabs的時候我犯了一個致命的錯誤,想使用tabs切換各自綁定路由的頁面,而後再把他們當成組件來使用,卻違反了react的路由灌入models必須有路由的跳轉才能生成並注入models的原則.可是在使用tabs的時候我碰到一個問題是,如何刷新不應表高亮的tabs位置,這個採用了本地存儲localStorage的方法來實現的,具體參考網頁