实验室后台管理项目总结

时间 2019-12-04

标签实验室后台管理项目总结繁體版

原文原文链接

在项目过程当中遇到的一些问题和解决方法

1.若是注入了 model可是发现怎么也访问不了想访问的那个接口，能够一层一层的经过打console.log来检查，若是已经进入了service层，颇有多是api接口写错了，须要注意的是最开始的“/”后端

INTRODUCTION:'/lab_introduction/lab_introduction',

2.项目中遇到须要状态的部分，能够单独写一个文件，若是返回的状态不是想要的那个状态，检查一下和后端的数据类型是否一致api

const PROJECTSTATUS = {
  SAVE: 0,
  PUBLISH: 1,
};

3.数据的分页有两种处理方式，一种是在pageProps里面利用回调函数onChange，一种是在组件中单独写一个turnPage函数，利用参数e，两种方法均可以实现分页，当肯定函数写正确以后，若是不能正确的翻页，检查models里面的函数，看函数里面写的名字和后端返回的名字是否相同异步

turnPage = (e) => {
    const { current, pageSize } = e;
    const { dispatch } = this.props;
    dispatch({
      type: 'enrollment/getAllList',
      payload: {
        page: current,
        pageSize,
      },
    });
  };

pagination: {
                ...pagination,
                onChange (page, pageSize) {
                dispatch({
                    type: 'personbase/listpage',
                    payload: {
                        pageSize,
                        page,
                    },
                  })
                },
              },

4.有时候会出现进入主页面以后没有点击新增,Modal就本身跳出来的状况，是由于在上次点击新增肯定以后并无隐藏掉它，因此下一次进入的时候它会显示出来。同时须要注意到的是，在隐藏的同时须要将里面的数据置为空，以保证下次新增的时候里面的数据是空的。函数

hiddenModal(state) {
      return {
        ...state,
        visible: false,
        currentRow: {
          num: 0,
          title: '',
          date: '',
          email: '',
        },
      };
    },

5.在增长上传图片的组件以后，新增一个以后会出现以前上一次上传的图片会出如今新增的页面中。这是由于models中还存在着上次上传的数据。咱们能够在index.js的声明周期中，执行updateState，将baseSource置为空学习

dispatch({
      type:'enrollment/updateState',
      payload:{
        baseSource:{},
      },
    });

updateState(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },

6.在上传图片的编辑页面保存以后会进入预览页面，若是在预览页面返回的话就看不见以前上传的图片了，可是在获取到的数据中是存在以前上传的图片的。后来检查了好久发现是由于我把上传的图片放在了Card里面，而后给Card加了一个loading。通常是须要异步请求的数据须要加loading，好比表格，input框中的内容。ui

<Card
            title="图片内容"
            style={{ marginBottom: '20px' }}
            bordered={false}
          >
            <Row>
              <Col>
                <ImageUploader {...uploaderProps} />
              </Col>
            </Row>
          </Card>

在项目过程当中学到的新知识

1.关于pathToRegexp
一种可能含有某种匹配模式的路径字符串是它的必选参数，它会返回一个正则对象。而后调用exec将请求路径与这个正则匹配起来this

const pathToRegexp = require('path-to-regexp');
    const match = pathToRegexp('/introduceInfo/:id').exec(this.props.history.location.pathname);

2.关于loading
loading能够监听异步请求的状态，当异步请求结束以后返回false。
由于多个页面可能共用同一个models，因此当从一个页面进入另外一个页面时，可能出现已经进入页面，可是数据尚未获取回来的状况，若是不加loading会出现之前的数据，为了不这种状况的发生，咱们能够在适当的地方加入loadingspa

@connect(({ introduce, loading }) => ({
    introduce,
    loading: loading.effects['introduce/getInfo'],
    editloading: loading.effects['introduce/editInfo'],
  }),
)

3.关于数据类型转换
像是相似于日期这种数据，在提交给后台以前咱们须要对数据类型进行处理，不然访问接口会失败getNowFormatDate函数对数据进行转换code

export function getNowFormatDate(time) {
  const date = time ? new Date(time) : new Date();
  const seperator1 = '-';
  const seperator2 = ':';
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = `0${month}`;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = `0${strDate}`;
  }
  const currentdate = `${date.getFullYear() + seperator1 + month + seperator1 + strDate
    } ${date.getHours()}${seperator2}${date.getMinutes()
    }${seperator2}${date.getSeconds()}`;
  return currentdate;
}

conclusion

这是用ant design写的第一个项目，在作完此次项目以后，对它的数据流向，路由切换等有了更为清楚的了解，作的东西总体来讲就是一个表单，怎么提交，怎么增长，删除，编辑和发布都比较清楚了，可是仍是有不少学习的地方，上传文件的组件是别人写的，我直接引用的，这其中还有不少值得思考的地方regexp