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 ...
随机推荐
- Java高并发程序设计
一.并行世界 摩尔定律的失效,2004年秋季,Intel宣布彻底取消4GHz计划,CPU向多核心的发展,顶级计算机科学家唐纳德丶尔文丶克努斯评价:在我看来,这种现象(并发)或多或少是由于硬件设计者已经 ...
- 123457------com.threeapp.quWeiKaTongPinTu01----趣味卡通拼图游戏
com.threeapp.quWeiKaTongPinTu01----趣味卡通拼图游戏
- Mac更新npm和node版本
npm: 查看当前版本: npm --version 更新到最新版: sodu npm install npm@latest -g node: 1.查看当前版本: node -v 2.清除npm当前缓 ...
- vue中的$listeners属性作用
一.当组件的根元素不具备一些DOM事件,但是根元素内部元素具备相对应的DOM事件,那么可以使用$listeners获取父组件传递进来的所有事件函数,再通过v-on="xxxx"绑定 ...
- Tengine编译安装+lua+sticky模块
一.两个依赖包 有yum的直接 yum yum –y install openssl openssl-devel prce prce-devel zlib zlib-devel 没有yum环境的, ...
- vue element-ui typescript tree报错 === Property 'getCheckedNodes' does not exist on type 'Element | Element[] | Vue | Vue[]'.
import { Tree } from 'element-ui' const ref = <Tree>this.$refs.tree ref.getCheckedNodes()
- [转帖]从壹开始前后端分离【重要】║最全的部署方案 & 最丰富的错误分析
从壹开始前后端分离[重要]║最全的部署方案 & 最丰富的错误分析 https://www.cnblogs.com/laozhang-is-phi/p/beautifulPublish-most ...
- 【牛客网】Longest Common Subsequence
[牛客网]Longest Common Subsequence 发现只有d数组最格路 于是我们把前三个数组中相同的数记成一个三维坐标,同一个数坐标不会超过8个 从前往后枚举d,每次最多只会更新不超过8 ...
- [tensorflow] 入门day1-数据整理与展示
tensorflow真是一个我绕不开的坑(苍天饶过谁.jpg) 其实tensorflow1和2的差别挺大的,暂时从1入坑,2的话之后简单过一下. tf2中更改的函数(供参考):https://docs ...
- 1233: 输出杨辉三角前n行(Java)
WUSTOJ 1233: 输出杨辉三角前n行 题目 原题链接 Description 输出杨辉三角前n行. Input 输入一个数n(n <= 9) Output 输出杨辉三角前n行.(注意行末 ...