React UmiJS项目开发日记（二）

本文记录下公司React UmiJS项目中，某些文件中的某些代码的作用。

 

1.项目/config/config.js中，配置了proxy，可以对url进行映射，例如：

proxy: {
  '/robot/api/': {
    target: 'http://127.0.0.1:8089',
    pathRewrite: {'^/robot':''},//最终请求时忽略掉robot
    changeOrigin: true,
  },
},

之后，在某个models/test.js中的effects中，可以使用这个url发请求，例如：

effects: {
  *fetchRobots({ callback }, { call, put } ){
    const response = yield call( services.get3, '/robot/api/robots?robotType.equals=2');
    if (response) {
      yield put({
        type: 'fetchsave',
        payload: response,
      });
      if (callback) callback(response);
    }
  },
},

 

2.项目/src/services/api.js中，封装了整个项目中通用的一些方法，例如get与post方法，如下：

import { stringify } from 'qs';
import { message } from 'antd';
import { saveAs } from 'file-saver';
import fetch from 'dva/fetch';
import moment from 'moment';
import request from '@/utils/request';

//get方式和后台交互
export async function get(url, params){

  //可以根据不同情况对url与params进行处理
  const params1 = params;
  params1.stu_name = 'test';
  delete params1.stu_name;
  
  const params2 = {};
  Object.keys(params1).map(key -> {
    if(params1[key]) {
      params2[key.replace('_','.')] = params1[key];
    }
    return params2;
  });
  
  const str = stringify(params2);
  let newUrl = url;
  if(str){
    newUrl = '${url}?${str}';
  }  

  return request(newUrl, params2);
}

//post2不加任何公共参数
export async function post2(url,values){
  return request(url, {
    method: 'POST',
    body: values,
  });
}

之后，在需要使用请求的js中即可使用，例如项目/src/models/codeselect.js中：

import * as services from '@/services/api';

export default {

effects: {
  *codequery({queryPara},{call,put}){
    const response = yield call(services.post2, '/api/code-select/codequery', queryPara );
    if(response){
      yield put({
        type: 'codequerycallback',
        payload: response,
        queryPara,
      });
    }
  },
},


reducers: {
  codequerycallback(state,action){
    const mapData={};
    action.payload.forEach(item)=>{
      mapData[item.codeValue]=item.codeName;
    });
    switch (action.queryPara.codeType.toLowerCase()) {
      case 'status':
        return { ...state, status: action.payload || state.status };
      case 'name' :
        return { ...state, name: action.payload || state.name };
      default: 
        return { ...state};
    }
  },
},

};

之后，在其它js中可以调用该方法，例如 项目/src/components/QueryAdvance/index.js中：

import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Timeline} from 'antd';
import * as moment from 'moment';

@connect(({ ApprovalLine, codeselect }) => ({
  ApprovalLine,
  codeselect,
}))

class Index extends PureComponent {
  state = {initcom: ''};

  //页面加载时调用
  componentDidMount(){
    const {dispatch, zt} = this.props;
    
    dispatch({
      type: 'codeselect/codequery',
      queryPara: {
        codeType: 'paynumber',
      },
    });
  
  }
}

 

3.在 项目/src/pages/ListPage/index.jsx中，可以在初始化方法中，调用其它js中effects中带*号的方法，如下：

componentDidMount(){
  const {dispatch} = this.props;
  dispatch({
    type: 'codeselect/search',
    queryPara: {},
  });
}

对应 项目/src/models/codeselect.js 中的*search方法：

state: {
  searchData: [], //查询后台得到的数据
},

effects: {
  *search({queryPara},{call,put}){
    const response = yield call(services.post2, '/api/code-select/select', queryPara );
    if(response){
      yield put({
        type: 'searchcallback',
        payload: response,
      });
    }
  },
},


reducers: {
  searchcallback(state,action){
        return { ...state, searchData: action.payload || state.searchData };
  },
},

之后，与index.jsx同级(或下级)目录下的其它js页中，可以获得searchData的结果并使用，例如 项目/src/pages/ListPage/querySimple.js:

import {From,Input,DatePicker,Select,TreeSelect,Button,Icon} from 'antd';


@connect(({ ListPage, loading, codeselect }) => ({
  ListPage,
  codeselect,
  loading: loading.models.ListPage,
}))


render(){
 const {
   form: {getFieldDecorator},
   dispatch,
   codeselect,
   loading,
   ListPage:{queryPara}
 } = this.props;

<TreeSelect 
  dropdownStyle = {{ maxHeight:400, overflow: 'auto' }}
  treeData={codeselect.searchData}
  treeCheckable
  showCheckedStrategy={SHOW_PARENT}
  allowClear
  treeDefaultExpandedKeys={[
    codeselect.searchData[0] ? codeselect.searchData[0].key : null;
  ]}
  placeholder={
    formatMessage({ id:'global.select.placeholder' })+
    formatMessage({ id:'ListPage.treeSelect' })
  }
/>

}