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)}`)
}