![](https://img-blog.csdnimg.cn/20210301112309615.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Ant Design Pro
文章平均质量分 65
Ant Design Pro总结
成续源
这个作者很懒,什么都没留下…
展开
-
使用Antd和Express实现文件的上传功能
文章目录前言使用Nodejs的Express框架实现文件上传后端功能使用Postman测试文件上传功能使用Antd的Upload组件实现文件上传前端功能前言根据公司需求,前端网页上传excel文件,后端接收文件并解析。采用Antd的Upload组件实现前端功能,由于上传文件不好用mock进行测试,临时编写一个node程序测试后端功能。使用Nodejs的Express框架实现文件上传后端功能使用Express框架,关键是使用multer包来实现文件上传功能 "dependencies": {原创 2021-09-14 10:41:29 · 1088 阅读 · 0 评论 -
优化Ant Design走马灯(Carousel)组件,增加前后翻页按钮
文章目录原有组件不足实现效果实现思路实现过程原有组件不足原有的Carousel组件相关属性太少,翻页需要点击下面的dots来实现,由于dots很不明显,点击很困难(修改样式后还是很不容易点钟),根据项目需求,增加了前后按钮,鼠标移动上去显示翻页按钮,实现了前后手动翻页功能。实现效果见下图实现思路增加前后按钮,捆绑Carousel组件的next()和prev()方法,改变button的...原创 2020-05-06 14:20:13 · 7272 阅读 · 5 评论 -
Ant Design Pro路由参数改变页面没有重新渲染问题的解决
文章目录发现问题解决问题发现问题同一个组件根据Ant Pro路由传递进来的user和menu两个参数实现不同页面的渲染效果,测试发现页面在第一次渲染时没有问题,改变参数重新渲染则不刷新,如下所示:/users/admin/menus/chargingPile 渲染充电桩页面成功/users/admin/menus/airCondition 渲染空调页面失败最终发现应该使用React生命周...原创 2020-05-07 14:31:01 · 3586 阅读 · 1 评论 -
react中定时刷新echarts图表
文章目录实现效果关键问题实现过程相关思考实现效果Ant Design结合React定时获取数据并刷新echarts图表,实现效果如下:关键问题在componentWillMount中设置定时器定时获取数值,在componentWillUnmount中删除定时器使用echarts-for-react构建echarts图表,数据刷新时填充新的数值到echarts option中,随后获取...原创 2020-05-06 13:58:57 · 1689 阅读 · 0 评论 -
近期前端总结
文章目录antd Tree中的checkbox实现单选js递归实现js获取当前年份和前一年字符串antd Tree中的checkbox实现单选只需要获取checkedKeys数组,只保留最后一位 /** * Tree单选功能实现 * @param checkedKeys */ handleCheck = checkedKeys => { checkedK...原创 2020-04-23 16:36:57 · 99 阅读 · 0 评论 -
Ant Design父组件一次性获取子组件表单值
文章目录业务需求实现思路业务需求父组件获取子组件数值,子组件是一个表单,包含Cascader、Select两种类型组件,其中能源类型Select根据Cascader数值拿到,效果如图:其中antd版本3.26.3实现思路通过使用 onFieldsChange获取表单值,通过回调函数传给父组件。antd官方说明父组件 // changedFields是子组件表单变化值,allFi...原创 2020-04-23 16:23:11 · 1417 阅读 · 0 评论 -
ant design pro中DatePicker更改月份显示为数字、增加YearPicker组件
文章目录问题描述修改MonthPicker增加YearPicker层级关系爷组件ReportDisplay父级组件ReportSearchBar底层组件YearPicker总结问题描述ant design pro中的DatePicker组件很好用,在项目中使用后有2个小瑕疵DatePicker、WeekPicker中显示的都是数字,但是月份显示是中文没有YearPicker组件,选择年...原创 2020-02-25 17:42:10 · 2374 阅读 · 0 评论 -
ant design pro覆盖样式
文章目录工作中碰到需要覆盖antd样式的过程,记录一下过程整个project采用antd的dark-theme主题,加入DatePicker和Cascade组建后底色不一样,看的很蛋疼,原始效果如下:强迫癌发作,准备把DatePicker组件底色改成和Cascade一样,右键chrome查看元素发现是默认的ant-input class选择器,那么就好办了,修改less如下,注意用gl...原创 2020-02-25 17:04:50 · 1955 阅读 · 0 评论 -
ES6返回JSX的两种方式
文章目录方式1:直接返回(注意圆括号内包含JSX表达式)方式2:返回一个数组工作中遇到根据条件判断返回JSX的情况,做个小结方式1:直接返回(注意圆括号内包含JSX表达式)return ( <MonthPicker className={styles.element} format='YYYY-MM' placeholder='请选择月份' onC...原创 2020-02-25 14:33:16 · 1007 阅读 · 0 评论 -
React新生命周期函数getDerivedStateFromProps结合定时器更新组件数据
文章目录新生命周期函数getDerivedStateFromProps实现目标相关代码父组件子组件总结新生命周期函数getDerivedStateFromPropsreact 16.3后更新了生命周期函数,不建议使用原来的componentWillReceiveProps、componentWillUpdate、componentWillMount,增加了getDerivedStateFro...原创 2020-02-15 23:51:35 · 1264 阅读 · 0 评论 -
记录一次antd访问mock数据失败的原因
文章目录组件中配置service路径mock配置问题总结组件中配置 const params = { value: '0052akr0jgp3ij', label: '实验设备', }; getMeasurementValuesByDevice(params).then(response => { this.setState({ ...原创 2020-02-15 19:00:16 · 1262 阅读 · 0 评论 -
antd父组件获取子组件表单的值
文章目录实现功能组件关系基本思路父组件中关键代码子组件中关键代码完整代码父组件AccountManage.js子组件AccountRoleSearchBar.js子组件UserMainForm.js实现功能编写用户管理模块前端界面,实现用户的增加、查询、删除、更新操作,为了体现React模块的复用性,拆分为1个父组件和2个子组件,整体效果如下:整体页面:新增和编辑用户弹出窗UserMai...原创 2020-02-08 19:47:03 · 2314 阅读 · 0 评论 -
Ant Design Pro引入svg文件(非icon)
文章目录前言路由和菜单配置代理配置页面和组件配置启动http服务最终效果前言传统的基于C/S架构的自动化监控系统随着web技术的发展也日新月异,目前比较常见的做法是监控页面图作为svg嵌入web浏览器,通过浏览器监控刀闸状态和开关位置,本文提供一种实现方法。版本如下:Ant Design Pro: 脚手架2.0Python:2.7.16路由和菜单配置路由和菜单配置: //...原创 2019-12-25 16:50:51 · 3119 阅读 · 0 评论 -
Ant Design Pro引入自定义主题及在主题文件中配置背景图片
文章目录前言分析修改和引入主题文件在主题文件中配置背景图片前言开发环境:Ant Design Pro: 2.0官方文档:定制主题Ant Design Pro官方提供了黑色主题和阿里云控制台主题,可以参考文档直接使用。项目需求:前端主题根据应用场景灵活匹配,在一个主题文件里能修改所有属性。背景图片可以在主题文件中定制。分析2.0版本的Ant Design Pro默认主题路...原创 2019-12-16 15:26:13 · 10311 阅读 · 0 评论 -
Ant Design Pro V2动态菜单实现
文章目录前言实现效果前端实现过程官网文档BasicLayout组件中调用model/menu.jsmodel/menu.js中引入serviceservice中定义后端API后端实现过程定义菜单类定义控制器效果验证前言Ant Design Pro是蚂蚁金服团队出品的一款前端框架,安装完毕后可以看到菜单和路由是静态渲染的,在实际的开发过程中,经常需要根据用户名或者权限生成不同的菜单,下面介绍一下...原创 2019-12-11 16:27:24 · 898 阅读 · 0 评论 -
Ant Design中的dva流程梳理
文章目录功能代码功能实现<ul>增加<li>功能代码page层:src/routes/List.jsimport React from 'react';//dva是1种分层想,将page(routes/List.js)和model(models/ListData.js)进行分层//其中page只负责页面显示,数据在model中进行处理import {co...原创 2019-11-29 17:24:20 · 1168 阅读 · 0 评论