使用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的方法来实现的,具体参考网页