前言

由于项目需求，最近开始学习了ant-design-pro框架，整个框架的业务功能代码主要在四个文件夹中，分别是：

routes：该文件夹下存放每个路由对应的页面组件代码。主要定义页面的基本结构和内容
components：组件文件夹。每个页面可能是由一些组件组成的，对于一些相对通用的组件，可以将该组件写入components文件夹中，并在routes文件夹中的文件引入来使用
models：用于组件的数据存储，接收请求返回的数据以及逻辑处理等
services：用于与后台交互、发送请求等

下面通过具体实践步骤来介绍页面创建的整个流程

实践

配置新的路由和菜单

路由的配置文件统一由src/common/router.js文件进行管理

通过添加一个新路由并在前端页面中增加一个菜单来对应路由

const routerConfig = {
    '/': {
      component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
    },
    '/dashboard/monitor': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
    },
    '/dashboard/workplace': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
    },
    '/testpage': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Test/Test')),
    },
}

路由/testpage对应的页面文件是Test/Test.js

然后在侧边栏中填写一项来对应到我们添加的路由中

const menuData = [{
  name: 'dashboard',
  icon: 'dashboard',  // https://demo.com/icon.png or <icon type="dashboard">
  path: 'dashboard',
  children: [{
    name: '分析页',
    path: 'analysis',
  }, {
    name: '监控页',
    path: 'monitor',
  }, {
    name: '工作台',
    path: 'workplace',
  }, {
    name: '测试页',
    path: 'testpage',
  }],
}, {
  // 更多配置
}];

创建一个页面

在src/routes下创建对应的js文件，如testpage.js

对应到我们添加的路由中

import React, { PureComponent } from 'react';
export default class Testpage extends PureComponent {
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

新增一个组件

如果页面相对复杂，需要引入一个组件

可以在components文件夹下创建一个组件，并在testpage.js引入并使用

如创建components/ImageWrapper/index.js

import React from 'react';
import styles from './index.less';    // 按照 CSS Modules 的方式引入样式文件。
export default ({ src, desc, style }) => (
  <div style="{style}" classname="{styles.imageWrapper}">
    <img classname="{styles.img}" src="{src}" alt="{desc}">
    {desc &amp;&amp; <div classname="{styles.desc}">{desc}</div>}
  </div>
);

然后修改pagetest.js

import React from 'react';
import ImageWrapper from '../../components/ImageWrapper';  // 注意保证引用路径的正确
export default () => (
  <imagewrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="示意图">;
)

增加service和module

假设pagetest.js页面需要发送请求

我们可以在组件加载时发送一个请求来获取数据

componentDidMount() {
  const { dispatch } = this.props;
  dispatch({
    type: 'project/fetchtagA',
  });
  dispatch({
    type: 'activities/fetchtagB',
  });
}

将会找到对应的models中的函数来发送请求

export default {
  namespace: 'pagetest',
  state: {
    ServicesA: [],
    ServicesB: [],
  },
  effects: {
    *fetchtagA(_, { call, put }) {
      const response = yield call(getServiceAList);
      yield put({
        type: 'ServiceAList',
        tagAServices: response.result,
      });
    },
    *fetchtagB(_, { call, put }) {
      const response = yield call(getServiceBList);
      yield put({
        type: 'ServiceBList',
        tagBServices: response.result,
      });
    },
  },
  reducers: {
    ServiceAList(state, action) {
      return {
        ...state,
        ServicesA: action.tagAServices,
      };
    },
    ServiceBList(state, action) {
      return {
        ...state,
        ServicesB: action.tagBServices,
      };
    },
  },
};

而真正发送请求的实际是service文件夹下的文件进行的

export async function getServiceAList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "waiting"},
  });
}
export async function getServiceBList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "current"},
  });
}

在routes文件夹中的pagetest.js中 ，我们可以直接在render部分使用应该得到的返回值进行渲染显示

const { pagetest, loading } = this.props;
// pagetest指的是相当于数据流
const { ServicesA, ServicesB } = pagetest;
// 从数据流中取出了具体的变量

上述就是快速创建一个页面的简单步骤