实验室后台管理项目总结

---

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

---

1.如果注入了 model但是发现怎么也访问不了想访问的那个接口，可以一层一层的通过打console.log来检查，如果已经进入了service层，很有可能是api接口写错了，需要注意的是最开始的“/”

INTRODUCTION:'/lab_introduction/lab_introduction',

2.项目中遇到需要状态的部分，可以单独写一个文件，如果返回的状态不是想要的那个状态，检查一下和后端的数据类型是否一致

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框中的内容。

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

---

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

---

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

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

2.关于loading
loading可以监听异步请求的状态，当异步请求结束之后返回false。
因为多个页面可能共用同一个models，所以当从一个页面进入另一个页面时，可能出现已经进入页面，但是数据还没有获取回来的情况，如果不加loading会出现以前的数据，为了避免这种情况的发生，我们可以在适当的 地方加入loading

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

3.关于数据类型转换
像是类似于日期这种数据，在提交给后台之前我们需要对数据类型进行处理，否则访问接口会失败getNowFormatDate函数对数据进行转换

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写的第一个项目，在做完这次项目之后，对它的数据流向，路由切换等有了更为清楚的了解，做的东西整体来说就是一个表单，怎么提交，怎么增加，删除，编辑和发布都比较清楚了，但是还是有很多学习的地方，上传文件的组件是别人写的，我直接引用的，这其中还有很多值得思考的地方