【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（二）

前言：上一篇梳理了上手Ant Design Pro需要了解的一些基础知识，这一篇记录一些在开发【后台管理系统】登录注册、数据获取、列表展示等功能时需要注意的地方。

---

一、与服务器交互的一般步骤

• 代理到后端，配置跨域

1. 修改 config/config.js
2. 配置 proxy 属性。只要 proxy 和 mock url 不同，是可以共存的。

   proxy: {
       '/login': {
           target: 'http://192.168.1.106:9099',
           changeOrigin: true,
           pathRewrite: { '^/login': '' },
       },
   }
   

• 添加要请求的接口

1. 修改 services/api.js （可以是service目录下其他自定义文件）

   import request from '@/utils/request';  //ant design pro封装的reques请求文件
   
   export async function fakeAccountLogin(params) {
     return request('/login', {
       method: 'POST',
       body: params
     });
   }　　

• 在modal里面写effect调取接口方法

1. 修改 model/login.js (可以是model目录下其它自定义文件）

   import { fakeAccountLogin, getFakeCaptcha } from '@/services/api'; //请求的接口方法
   
   namespace: 'login', //要唯一
   
   state: {
       list: []  //后台返回的数据存储在该list中,名字想怎么起怎么起
   },
   
   effects: {
       *login({ payload }, { call, put }) {  //login是界面要调取的接口名称
            const response = yield call(fakeAccountLogin, payload);  //yield call（）真正调用接口，传递数据，返回响应的方法
            yield put({                   //一个yield put只能触发一个action
                  type: 'queryList',   //通过调用这个reducer把返回数据传给list
                  payload: response, 
            });
   
            reducers: {
                  queryList(state, action) {
                     return {
                         ...state,
                         list: action.payload,  //这就拿到数据啦
                     };
                  },
            }
       }
   }
   

• 组件中创建连接

1. 在 pages/User/Login.js 组件中通过 dva提供的connect高阶组件连接组件和dva，传入namespace(唯一）获得其中的state和effects(dispatch方法）

   import { connect } from 'dva'
   
   @connect(({ login, loading }) => ({   //login是namespace  loading是对应使用的方法
        login,       //login是namespace
        submitting: loading.effects['login/login'],  //login 命名空间的login请求接口（入口）
   })) 

2. 一般在componentDidMount生命钩子中发送请求获取数据

   componentDidMount() {
    //注意务必先使用dva中的connect建立连接，否则是无法调用props中的dispatch法的
           this.props.dispatch({
               //调用model中的方法发起请求，（model的命名空间+方法名）
               type: 'mbit/firstRequest',
               //设置参数
               payload:{
                     args1:"参数1",
                     args2:"参数2",
               },
           });
   }

3. 登录提交等操作方法中发送请求获取数据

   handleSubmit = (err, values) => {
           const { type } = this.state;
           if (!err) {
               const { dispatch } = this.props;
               dispatch({
                    type: 'login/login',
                    payload: {
                          login_type: "usernameAndPassword",
                          credentials: {
                               username: values.userName,
                               password: values.password
                          },
                         ...values
                    },
               });
           }
   };
   

• 获取数据后的其它操作

1. 显示后台返回的数据

   const {Login: { list },loading} = this.props;  //这个就在对应namespace下面list数组，之前存放后台返回数据的list数组
   
   <Table columns={columns} dataSource={list?list.content:[]} rowKey="id"/>  //dataSource里面是通过list获取到的数据

2. 跳转路由页面

   import { routerRedux } from 'dva/router';
   
   yield put(routerRedux.replace('/'));

3. 将获取到的数据存入localStorage

   localStorage.setItem('login_token', response.data.token);

4. 每次请求中带着token  获取localStorage中的token封装进请求头中（修改 request.js 请求文件）

   let login_token;
   
   newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers,
   };
         
   if (localStorage.getItem('login_token') != null){
        login_token = localStorage.getItem('login_token');
        newOptions.headers['AuthorizationToken'] = localStorage.getItem('login_token');
   }
   

 

二、关于@connect装饰器

• 组件写法中调用了 dva 所封装的 react-redux 的 @connect 装饰器

1. 用来接收绑定的 list 这个 model 对应的 redux store。
2. 这里的装饰器实际除了 app.state.list 以外还实际接收 app.state.loading 作为参数，这个 loading 的来源是 src/index.js 中调用的 dva-loading这个插件。

   /*
   * src/index.js
   */
   import createLoading from 'dva-loading';
   app.use(createLoading());
   

   它返回的信息包含了 global、model 和 effect 的异步加载完成情况。数据map一

   {
     "global": true,
     "models": {
       "list": false,
       "user": true,
       "rule": false
     },
     "effects": {
       "list/fetch": false,
       "user/fetchCurrent": true,
       "rule/fetch": false
     }
   }
   

   在这里带上 {count: 5} 这个 payload （参数）向 store 进行了一个类型为 list/fetch 的 dispatch，在 src/models/list.js 中就可以找到具体的对应操作。

   import { queryFakeList } from '../services/api';
    
   export default {
     namespace: 'list',
    
     state: {
       list: [],
     },
    
     effects: {
       *fetch({ payload }, { call, put }) {
         const response = yield call(queryFakeList, payload);
         yield put({
           type: 'queryList',
           payload: Array.isArray(response) ? response : [],
         });
       },
       /* ... */
     },
    
     reducers: {
       queryList(state, action) {
         return {
           ...state,
           list: action.payload,
         };
       },
       /* ... */
     },
   };
   

• View中使用@connect

  @connect(({ list, loading }) => ({
    list,//①
    loading: loading.models.list,//②
  }))
  

1. connect 有两个参数，mapStateToProps以及mapDispatchToProps,一个将state状态绑定到组件的props，一个将dispatch方法绑定到组件的props

2. 代码①：将实体list中的state数据绑定到props，注意绑定的是实体list整体，使用时需要list.[state中的具体变量]

3. 代码②：通过loading将上文“数据map一”中的models的list的key对应的value读取出来。赋值给loading，以方便使用，如表格是否有加载图标（也可以通过key value编写：loading.effects["list/fetch"]，如下↓可取多个）

   //pages/Dashboard/WorkPlace.js
   
   @connect(({ user, project, activities, chart, loading }) => ({
     currentUser: user.currentUser,
     project,
     activities,
     chart,
     currentUserLoading: loading.effects['user/fetchCurrent'],
     projectLoading: loading.effects['project/fetchNotice'],
     activitiesLoading: loading.effects['activities/fetchList'],
   }))
   

• 变量获取

1. 因，在src/models/list.js

   export default {
     namespace: 'list',
    
     state: {
       list: [],
     },

2. 故，在view中

   render() {
       const { list: { list }, loading } = this.props;
   

   定义使用时：list: { list }  ，含义：实体list下的state类型的list变量

 

三、项目实践注意点

• 登录注册

1. 登录关键点：登录成功后，请求中始终带着存着登录信息的token，在其他功能中，如需要获取用户信息，则直接从token中获取
2. 注册关键点：注册必须输入正确的手机验证码，在校验手机号格式正确后就可通过阿里云发送验证码，但是同一号码多次发送，可能会被封号

• 数据获取

1. 表格Table组件中的单选/多选，获取当前选中项的列表数据：record

   {
         title: '资料审核',
         dataIndex: 'detailInfo',
         render: (text, record) => <a onClick={() => this.previewItem(record.id)}>资料详情>></a>
   },　　

2. 在所有选中项的列表数据中删选/计算符合条件的数据：selectRows

   //components/StandardTable/index.js
   
   handleRowSelectChange = (selectedRowKeys, selectedRows) => {
       let { noPayList, payedList, needTotalList } = this.state;
       noPayList = initNoPayList(selectedRows);
       payedList = initPayedList(selectedRows);
       needTotalList = needTotalList.map(item => ({
         ...item,
         total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex], 10), 0),
       }));
       const { onSelectRow } = this.props;
       if (onSelectRow) {
         onSelectRow(selectedRows);
       }
   
       this.setState({ selectedRowKeys, selectedRows, noPayList, payedList, needTotalList });
   };
   

   　　

3. 表单Form组件中获取用户提交的数据：fields / fieldsValue

   const okHandle = (record) => {
       form.validateFields((err, fieldsValue) => {
         if (err) return;
         form.resetFields();
         handleRemark(record, fieldsValue);
       });
     };

   注意：要使用Form，必须用Form.create()包裹组件，然后从this.props中获取到Form；通过 form.getFieldDecorator 提交数据

   const CreateForm = Form.create()(props => {
     const { modalVisible, record, form, handleRemark, handleModalVisible } = props;
     const rowObject = {
       minRows: 2, 
       maxRows: 6   
     }  
     const okHandle = (record) => {
       form.validateFields((err, fieldsValue) => {
         if (err) return;
         form.resetFields();
         handleRemark(record, fieldsValue);
       });
     };
     return (
       <Modal
         destroyOnClose
         title="添加备注"
         visible={modalVisible}
         okText="确定"
         cancelText="取消"
         onOk={() => okHandle(record)}
         onCancel={() => handleModalVisible()}
       >
         <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
           {form.getFieldDecorator('remark', {
             rules: [{ required: true, message: '请输入至少五个字符的审批备注！', min: 5 }],
           })(
              <TextArea 
                autosize={rowObject}
              />
             )}
         </FormItem>
       </Modal>
     );
   });

• 列表展示

1. componentDidMount() 组件成功挂载后通过this.props中的dispatch方法传递参数、发送请求、获取数据，完成state数据初始化
2. 定义 columns 列表项数组，传给Table组件的 column属性，其中 title为列表项标题、dataIndex为与服务端返回数据对应字段、render方法对数据处理后展示
3. 从this.props中拿到的store中存储的 list （或其它）列表数据，传给Table组件的dataSource，列表才可以将column数组中的字段与数据一一对应
4. 通常，列表上方有【查询】、【编辑】等操作，在输入查询内容时，要对字符串做 去首尾空格，确保执行查询时为完整无空格字符串

    trimStr = str => {
       return str.replace(/(^s*)|(s*$)/g,"");
    }
   
   //查询
   handleSearch = e => {
       e.preventDefault();
   
       const { dispatch, form } = this.props;
   
       form.validateFields((err, fieldsValue) => {
         if (err) return;
   
         let values = {
           ...fieldsValue,
           updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
         };
   
         Object.keys(values).forEach(key => {
           if(values[key]){
             values[key] = this.trimStr(values[key])
           }
         });
   
         this.setState({
           formValues: values,
         });
   
         dispatch({
           type: 'agent/fetch',
           payload: {
             currentPage: 1,
             pd: {},
             showCount: 10
           },
         });
       });
   };　　

• 其它

1. 向对象中添加新的属性与属性值：Object['属性'] = 值；
2. 遍历对象修改每一个对象属性：Object.keys(values).forEach(key => { ……})
3. forEach直接操作原数组，不会返回新值，map会返回新值：在React中根据数据动态循环添加元素，使用map

   <Row gutter={24}>
            { infoPics.map((infoPic, index) => 
                  (<Col key={index} xl={6} lg={12} md={24} sm={24} xs={24}>
                        <div className={styles.infoTitle}>{`代理资料${index+1}`}</div>
                        <div 
                             className={styles.infoPic}
                             style={{ backgroundImage: `url(${infoPic})` }}
                        >
                            { infoPic == '' ? <div className={styles.empty}><Empty /></div> : '' }
                        </div>
                   </Col>)
                 )
            }   
   </Row>
   

   

4. 资源文件需要加统一前缀时，在配置文件中定义方法，应用时直接在数据前调用方法即可

   //util/util.js
   export function setFileHost(){
     return 'http://baidu.com/';    
   }
   
   //RightContent.js
   import { setFileHost } from '@/utils/utils'
   
   <Avatar
           size="small"
           className={styles.avatar}
           src={`${setFileHost()+currentUser.headIcon}`}
           alt="avatar"
    />　

5. 后台标题：标题修改是在 src/layouts/BasicLayout.js 中找到 getPageTitle 进行修改
6. 后台Logo：Logo位于 src/components/SideMenu/SideMenu.js 中，原先的logo是props传过来的，所以我在引用logo文件的时候加了import yhzLogo from '../../assets/logo.png';避免参数名重复，另外logo图片文件最好放在src/assets 里面

 

参考资料

• 全世界的见闻博客：https://blog.csdn.net/JavaLiXL/article/details/88090364

• 木子旭博客：https://www.cnblogs.com/bjlhx/p/9009056.html

---

注：转载请注明出处