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