丰镇网站建设广东网络seo推广公司
1、Ant Design Pro 初了解
说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架。而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架 。
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快速入门
在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...
Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
ant使用指南详细入门教程
这篇文章主要介绍了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 ...
程序员,一起玩转GitHub版本控制,超简单入门教程 干货2
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...
阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
随机推荐
APP级别处理未捕获异常
前言: 项目APP有时候会出现Crash,然后就是弹出系统强制退出的对话框,点击关闭APP. 有的APP进行了处理,会发现,当程序出现异常的时候,会Toast一个提示"程序出现异常,3秒后将 ...
面向对象cookie增删查
& ...rem 与 px 手机页面自适应
rem相对于根元素html的,em相对于父元素的.rem和em相对大小的值默认情况下如果你没有在根元素指定参照值,那浏览器默认就是 1rem 为 16px,如果你指定了值假设为 20px,那 1rem ...
oracle中Update方法
1.两表(多表)关联update -- 被修改值由另一个表运算而来 update customers a set city_name=(select b.city_name from tmp_cust ...
功放AUX接口解析
功放上的AUX输入端口就是音频输入端口,用来连接音频输出设备:PC机上声卡.MP3播放器.CD机等
PhpStorm中文教程
PhpStorm中文教程 | 浏览:15972 | 更新:2014-06-10 21:14 1 2 3 4 5 分步阅读 PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供 ...
java它们的定义jar套餐读Excel(这包括2003和2007)数据,和实例
使用java它们的定义jar套餐读excel数据支持excel2007和excel2003 在http://download.csdn.net/detail/u010792467/8079355下载所 ...
JS杂记
jQuery(function($) {等于
function rickk() }Android:触屏事件
Android触屏事件包含两种: 1)屏幕触屏事件:重写onTouchEvent(MotionEvent event): 2)控件触屏事件:给控件注册触屏事件,setOnTouchEventListe ...
实现常用的配置文件/初始化文件读取的一个C程序
在编程中,我们经常会遇到一些配置文件或初始化文件.这些文件通常后缀名为.ini或者.conf,可以直接用记事本打开.里面会存储一些程序参数,在程序中直接读取使用.例如,计算机与服务器通信,服务器的ip ...