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