ant design pro模板_ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介
官网简介
Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈,我们将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。
我的理解
ant design pro 是快速搭建web端的后台管理信息系统的框架,在其中,我们可以使用ant design 这个ui 库,也可以使用框架中提供的很多页面,里面也存在图表等一些组件,让我们不必要画更多时间去学习echart,highchart,这种图表插件。
可能有人会存在疑问,我们通过css来改变ui库的原始css属性没那么容易。ant design pro 提供了一种less写法,我们可以给我们所使用的组件绑定一个class的名字,然后确定element当中我们需要改变样式的元素类名,然后通过嵌套选中的形式,就可以改变我们想改变的元素样式。
第一个问题:改变ant design 的原始样式
less 文件
.and_collapse_list{
td[class='ant-table-row-cell-break-word']{
position: relative;
line-height: 20px;
}
}
jsx文件
// 1. 引入我们要使用的less
import style from "./collapselist.less"
在这里,我给Table 绑定了 and_collapse_list 这个类名,然后通过 td[class='ant-table-row-cell-break-word'] 标签名字+ class 的方式 确定一个元素,改变他的样式。
第二个问题 ant design pro 当中数据管理的方式
在pro项目当中,存在一个封装好的请求方式"umi-request"
我们可以在这个基础方进行二次封装,也可以直接使用他发起异步请求
一般我们数据维护需要三个文件
存放数据请求的js 可以叫api.js
数据管理的js 可以叫model.js
视图容器jsx 这个就是你的页面,通过他发起请求,渲染数据
引入我们新建的model dva.js 里面 app.model({ namespace: '命令空间', ...(require('路径').default) });
话不多说直接上代码
api.js
// 这里用到的是我们二次封装好的request.js
import request from '@/utils/request';
// 这里导出一个async 或者 普通函数都不影响
export async function getA(newData) {
return request("/a",{
method: "post",
headers: {},
data: newData
})
}
export async function getB(newData) {
return request("/b",{
method: "post",
headers: {},
data: newData
})
}
model.js
import {getA,getB} from 'api.js'
const CollapseModel = {
// 这里是每一个model的命名空间,是唯一的。
namespace : "collapse",
// 这里就是仓库里面的值
state : {
AndInfo:{},
IosInfo:{}
},
// 这里存放异步方法
effects : {
// * 是es6当中generetor 生成器函数
// {payload,callback} 这里是传递过来的参数 用到了解构赋值
// call 是用来调用异步方法的,如果你想在jsx当中使用异步请求回来的值需要使用这个回掉函数。
// put 是用来调用reducer当中的同步的方法
*getA({payload,callback},{call,put}) {
let {newData} = payload
const data = yield call(getA,newData)
if(callback){
// 把data传递给我们的callback,让我们jsx当中对的callback可以使用它
callback(data)
}
},
*getB({payload,callback},{call,put}) {
let {newData} = payload
const data = yield call(getB,newData)
if(callback){
callback(data)
}
},
},
// reducer 是一个纯函数 这个可以去百度了解一下。同样的输入换取同样的输出
// 如果对概念不理解,那么就可以仿照我的写法。记住不可以直接改变state
reducers: {
saveA(state,{payload}) {
let newState = JSON.parse(JSON.stringify(state))
newState.IosInfo =payload.data
console.log(newState)
return newState
}
},
}
export default CollapseModel
jsx 我们的页面
// 必须引入这个高阶函数,把我们的组件和model联系起来,如果熟悉redux的话,实际就是在我们的组件外层包裹了Provider 并且提供了一个store。让仓库的数据穿透我们的组件
// 高阶函数就是将函数作为参数传递给另一个函数
import { connect } from 'dva';
// 这是一个修饰器写法 实际是通过connect函数把我们的组件传递进去,并且返回一个新的组件
// 第一个参数是mapstate 是对传递过来的值进行处理,类似vue中的计算属性,第二个参数就是组件
// 比如在这里我要使用 model 文件中 state 里面的 AndInfo
@connect((collapse) => ({
AndInfo:collapse.AndInfo
}))
//使用这个值 是通过this.props获取的
componentDidMount() {
const {AndInfo,dispatch} = this.props
// 调用model 里面的方法 必须通过dispatch
dispatch({
type:"collapse/getA",
payload:{
newData:{a:"123"}
},
// 因为我们把一个函数当作一个变量进行传递所以在这个过程当中一定需要绑定this
callback:this.callbackA.bind(this)
})
}
callbackA = (res) =>{
...
}
ant design pro模板_ant design pro 当中改变ant design 组件的样式和 数据管理相关推荐
- ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
- ant design pro模板_Ant Design Pro 学习笔记
学习笔记 摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
- 使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度
文章目录 使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度 需求 实现 参考代码 参考 使用react-draggable和r ...
- 65动态版式标题Premiere Pro模板
65动态版式标题Premiere Pro模板预设推荐给大家.这是一款非常棒的65个动力学排版场景Premiere Pro模板,包含不同风格的动态图形模板形式.非常适合您的后效应排版,动画,商业名称设计 ...
- 【Premiere Pro模板】动态模板(.mogrt文件)无法改变颜色的解决方法
记录下一个pr动态模板模板的使用 一.mogrt格式文件 1.我们平时在剪视频的时候,会找一些现成的模板来使用 比如我这边就在b站上的链接里下载了一套字体模板 2.格式是.mogrt格式,后面发现这个 ...
- 什么是Pro*C/C++,嵌入式SQL,第一个pro*c程序,pro*c++,Makefile,Proc增删改查
1 什么是Pro*C/C++ 1.通过在过程编程语言C/C++中嵌入SQL语句而开发出的应用程序 2.什么是嵌入式SQL 1.在通用编程语言中使用的SQL称为嵌入式SQL 2.在SQL标准中定义 ...
- iPhone 14系列或均搭载A16芯片:但Pro型号为A16 Pro
去年9月,苹果推出了全新的iPhone 13系列,拥有高刷屏.小刘海.A15芯片等诸多升级点,这让该机的销量数据还是非常亮眼的.不过对于该机万年的不变的外观和部分"保守"的硬件配置 ...
- 如何选择华为MATE 30 PRO 5G和P40 PRO?
如何选择华为MATE 30 PRO 5G和P40 PRO? 题主问题的核心是如何选择mate30pro的5G和华为P40pro?这样来说吧!你觉得拍照对你重要吗?如果重要的话,华为P40pro确实每年 ...
- Critical Warning: Synopsys Design Constraints File file notfound: 'CMTT.sdc'. A Synopsys Design Cons
在使用quartus ii进行FPGA开发时,遇到如下警告信息: Critical Warning: Synopsys Design Constraints File file notfound: ' ...
最新文章
- oracle数据库增加新字段
- 漫画:程序员相亲图鉴,笑屎我了~
- Python 资料性网站。
- mybatis中的查询缓存
- 第二周:神经网络的编程基础之Python与向量化
- Vue 应用性能优化指南(转)
- 你觉得一个128g主力机用几年会到非换不可的程度?
- 安装XHProf分析PHP性能瓶颈(原创)
- ASMSupport教程4.7 生成关系运算符
- html源码加密ensure-china_php源码加密方法详解
- 谷歌手机Nexus和Pixel系列研发代号
- JavaScript问题01 js代码放在header和body的区别
- Centos7.2 / Linux的下搭建LAMP环境的搭建和配置虚拟主机
- 泰坦尼克号python数据分析统计服_Python数据分析及可视化实例之泰坦尼克号存活预测(23)...
- SpringBoot整合Redis
- java取万位的值,excel表格数值如何取万位整数,来研究下吧
- ios获取本地音乐库音乐很详细
- netbeans java中文_NetBeans添加中文javadoc
- python处理wrf气象数据_气象编程 | Python3之WRF的投影转换
- SQL SERVER 实用教程(第四版) 实验 1-10 非标准答案
热门文章
- AcWing 837. 连通块中点的数量
- mysql 5.6特性_MySQL 5.6新特性概览
- stm32运行java_STM32之——3种启动方式学习
- git 本地代码到远程库
- Robocopy命令实现文件服务器每日镜像备份/增量备份操作
- 使用IntelliJ IDEA开发Spring MVC HelloWorld
- 加强大数据应用助推 交通信息服务产业化进程
- 源头防堵信息泄露 监管拟全面推行支付标记化
- squirrelmail+change_sqlpass 认证 问题
- Delphi7 Lite Edition 7.3.4.0 [2010-11-20]