ant design pro超详细入门教程

1、Ant Design Pro 初了解

     说到ant design pro，得先了解一下ant design是个什么东西？ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架。而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架  。

     ant design pro官方文档：https://pro.ant.design/docs/getting-started-cn

2、安装

    默认你本地已安装好node和git环境

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

3、目录结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

4、让你的项目run起来！

npm start

同时，如果你的本地安装了yarn，也可以使用yarn来启动

打开浏览器访问 http://localhost:8000

 5、开始项目你的项目

   1、如何开发你的新页面

       a.在src/pages 目录下新建你的模块与页面

      b.在config目录下router.config.js文件中配置菜单路由

     c.国际化

       在src目录下的locals配置新菜单栏目所对应的中文信息

   

2、与服务端进行交互

    a、请求流程

• UI 组件交互操作；
• 调用 model 的 effect；
• 调用统一管理的 service 请求函数；
• 使用封装的 request.js 发送请求；
• 获取服务端返回；
• 然后调用 reducer 改变 state；
• 更新 model

src/pages/newProject/new.js

import React, { PureComponent } from 'react';
//引入阿里dva框架
import { connect } from 'dva';

//调用了 dva 所封装的 react-redux 的 @connect 装饰器，用来接收绑定的 list 这个 model 对应的 redux store
@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
class CardList extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
   //dispatch分发器调用models发起请求，具体流程是dispatch=>models=>services
    dispatch({
      type: 'list/fetch',   //list 为model 中的namespace，fetch为方法名
      payload: {
        count: 8,
      },
    });
  }

src/pages/newProjec/models

import { queryFakeList } from '@/services/api'

export default {
    namespace: 'list',
    //state 存储数据收到 Action 以后，会更新数据
    state: {
        list: [],
    },

    effects: {
     // @param payload 参数
     // @param call 执行异步函数调用接口
     // @param put 发出一个 Action，类似于 dispatch 将服务端返回的数据传递给上面的state
        *fetch({ payload }, { call, put }) {
            const response = yield call(queryFakeList, payload)
            yield put({
                type: 'queryList',   //reducers 中的方法
                payload: Array.isArray(response) ? response : [],
            })
        },
      }
    reducers: {
        queryList(state, action) {
            return {
                ...state,
                list: action.payload,   //更新state中的数据
            }
        },
}

src/services/api.js

import { stringify } from 'qs'
//对服务端发起请求
export async function queryFakeList(params) {
    return request(`/api/fake_list?${stringify(params)}`)
}