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)}`)
}
ant design pro超详细入门教程的更多相关文章
- 【建议收藏】Redis超详细入门教程大杂烩
写在前边 Redis入门的整合篇.本篇也算是把2021年redis留下来的坑填上去,重新整合了一翻,点击这里,回顾我的2020与2021~一名大二后台练习生 NoSQL NoSQL(NoSQL = N ...
- Ant Design Pro快速入门
在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...
- Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
- ant使用指南详细入门教程
这篇文章主要介绍了ant使用指南详细入门教程,本文详细的讲解了安装.验证安装.使用方法.使用实例.ant命令等内容,需要的朋友可以参考下 一.概述 ant 是一个将软件编译.测试.部署等步骤联系在一起 ...
- <转载>ant使用指南详细入门教程 http://www.jb51.net/article/67041.htm
这篇文章主要介绍了ant使用指南详细入门教程,本文详细的讲解了安装.验证安装.使用方法.使用实例.ant命令等内容,需要的朋友可以参考下 一.概述 ant 是一个将软件编译.测试.部署等步骤联系在一起 ...
- Ant Design Pro (中后台系统)教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
- 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)
前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...
- ant design pro (六)样式
一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...
- 测试平台系列(5) 引入Ant Design Pro
引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...
随机推荐
- linux禁止特定ip访问某个端口
linux禁止特定ip访问某个端口 解决方法: 禁止特定ip访问8501端口的命令0:iptables -I INPUT -s 192.168.0.232 -ptcp --dport 8501 - ...
- 置BAT批处理窗口显示颜色
置BAT批处理窗口显示颜色 摘自:https://blog.csdn.net/tp7309/article/details/53450131 2016年12月04日 01:08:33 亦游 阅读数:1 ...
- iOS 当键盘覆盖textFiled时简单的处理方法
//方法1--- - (void)textFieldDidBeginEditing:(UITextField *)textField { if (iPhone5) { return; } else { ...
- PAT 甲级 1052 Linked List Sorting (25 分)(数组模拟链表,没注意到不一定所有节点都在链表里)
1052 Linked List Sorting (25 分) A linked list consists of a series of structures, which are not ne ...
- kubeadm 安装kubernetes1.6.2
准备工作 安装依赖 yum install -y wget vim net-tools epel-release 修改内核参数 cat <<EOF > /etc/sysctl.d/k ...
- 基于Spring Boot的可直接运行的分布式ID生成器的实现以及SnowFlake算法详解
背景 最近对snowflake比较感兴趣,就看了一些分布式唯一ID生成器(发号器)的开源项目的源码,例如百度的uid-generator,美团的leaf.大致看了一遍后感觉uid-generator代 ...
- 基于 Spring + Atomikos + Mybatis的多数据源配置(含有BaseDao,BaseService)
1.spring配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- 使用jquery操作iframe中的元素
使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...
- Oracle 表的导入与导出
周末任务:将一个表从一个库导到另一个库大致思路:用expdp 将表从一个实例导出 ,再用impdp将导出的 .dmp文件导入到另一个实例1.在实例 orcl 中准备一个用于导出的表: 进入实例为orc ...
- PCL学习(四)点云转换为网格
Remove needless points compute normals surface reconstruction get texture(param 4096 basic) save pro ...