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...
基于Spring和Ant Design Pro在localStorage中存储数据
文章目录背景介绍实现功能后端实现（Spring）前端实现（Ant Design Pro）背景介绍在Web开发过程中，往往需要获取一些数据，比如用户登录后的用户名。以往前后端不分离的开发过程中，可以把这些数据放在session中获取，在HTML5中引入了LocalStorage，可以把数据存储在LocalStorage中。Ant Design Pro是一款基于DVA的前端框架，当每个Web页面...
Ant Design Pro V2动态菜单实现
文章目录前言实现效果前端实现过程官网文档BasicLayout组件中调用model/menu.jsmodel/menu.js中引入serviceservice中定义后端API后端实现过程定义菜单类定义控制器效果验证前言Ant Design Pro是蚂蚁金服团队出品的一款前端框架，安装完毕后可以看到菜单和路由是静态渲染的，在实际的开发过程中，经常需要根据用户名或者权限生成不同的菜单，下面介绍一下...
Ant Design Pro引入自定义主题及在主题文件中配置背景图片
文章目录前言分析修改和引入主题文件在主题文件中配置背景图片前言开发环境：Ant Design Pro: 2.0官方文档：定制主题Ant Design Pro官方提供了黑色主题和阿里云控制台主题，可以参考文档直接使用。项目需求：前端主题根据应用场景灵活匹配，在一个主题文件里能修改所有属性。背景图片可以在主题文件中定制。分析2.0版本的Ant Design Pro默认主题路...
Ant Design Pro引入svg文件（非icon）
文章目录前言路由和菜单配置代理配置页面和组件配置启动http服务最终效果前言传统的基于C/S架构的自动化监控系统随着web技术的发展也日新月异，目前比较常见的做法是监控页面图作为svg嵌入web浏览器，通过浏览器监控刀闸状态和开关位置，本文提供一种实现方法。版本如下：Ant Design Pro: 脚手架2.0Python：2.7.16路由和菜单配置路由和菜单配置: //...
js中undefined和null判断
判断是否为undefinedvar exp = undefined;if (typeof(exp) == undefined){ alert("undefined");}判断是否为nullvar exp = null; if (!exp && typeof(exp)!=”undefined” && exp!=0) { alert(“is ...
antd父组件获取子组件表单的值
文章目录实现功能组件关系基本思路父组件中关键代码子组件中关键代码完整代码父组件AccountManage.js子组件AccountRoleSearchBar.js子组件UserMainForm.js实现功能编写用户管理模块前端界面，实现用户的增加、查询、删除、更新操作，为了体现React模块的复用性，拆分为1个父组件和2个子组件，整体效果如下：整体页面：新增和编辑用户弹出窗UserMai...
Oracle数据表被锁死后解锁
查看哪个session引起的锁死select b.username,b.sid,b.serial#,logon_time from v$locked_object a,v$session b where a.session_id = b.sid order by b.logon_time;杀掉对应的进行-- alter system kill session'sid,serial#'al...
记录一次排查问题：Hibernate删除数据表报InvalidDataAccessApiUsageException
文章目录现象分析hibenate映射配置检查Spring AOP配置检查hibernate表结构检查感谢现象通过service层调用dao层方法，通过hibernate删除用户管理表TB_SYSACCOUNT条目的时候报错：org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not...
记录一次antd访问mock数据失败的原因
文章目录组件中配置service路径mock配置问题总结组件中配置 const params = { value: '0052akr0jgp3ij', label: '实验设备', }; getMeasurementValuesByDevice(params).then(response => { this.setState({ ...
React新生命周期函数getDerivedStateFromProps结合定时器更新组件数据
文章目录新生命周期函数getDerivedStateFromProps实现目标相关代码父组件子组件总结新生命周期函数getDerivedStateFromPropsreact 16.3后更新了生命周期函数，不建议使用原来的componentWillReceiveProps、componentWillUpdate、componentWillMount，增加了getDerivedStateFro...
ES6返回JSX的两种方式
文章目录方式1：直接返回（注意圆括号内包含JSX表达式）方式2：返回一个数组工作中遇到根据条件判断返回JSX的情况，做个小结方式1：直接返回（注意圆括号内包含JSX表达式）return ( <MonthPicker className={styles.element} format='YYYY-MM' placeholder='请选择月份' onC...
ant design pro覆盖样式
文章目录工作中碰到需要覆盖antd样式的过程，记录一下过程整个project采用antd的dark-theme主题，加入DatePicker和Cascade组建后底色不一样，看的很蛋疼，原始效果如下：强迫癌发作，准备把DatePicker组件底色改成和Cascade一样，右键chrome查看元素发现是默认的ant-input class选择器，那么就好办了，修改less如下，注意用gl...
ant design pro中DatePicker更改月份显示为数字、增加YearPicker组件
文章目录问题描述修改MonthPicker增加YearPicker层级关系爷组件ReportDisplay父级组件ReportSearchBar底层组件YearPicker总结问题描述ant design pro中的DatePicker组件很好用，在项目中使用后有2个小瑕疵DatePicker、WeekPicker中显示的都是数字，但是月份显示是中文没有YearPicker组件，选择年...
react中axios结合后端实现GET和POST请求
文章目录get实现方式1（参数直接在url中）get时间方式2（作为JSONString跟在url末尾）post实现（传递JSONObject）区别在这里不做介绍了，POST方法比GET方法稍微安全一点，GET方法比POST方法要快一些，个人感觉传递单个参数用GET，传递多个参数用POST。get实现方式1（参数直接在url中）前端export function getAllSubstat...
Ant Design父组件一次性获取子组件表单值
文章目录业务需求实现思路业务需求父组件获取子组件数值，子组件是一个表单，包含Cascader、Select两种类型组件，其中能源类型Select根据Cascader数值拿到，效果如图：其中antd版本3.26.3实现思路通过使用 onFieldsChange获取表单值，通过回调函数传给父组件。antd官方说明父组件 // changedFields是子组件表单变化值，allFi...
Ant Design离线引入Symbol实现Icon
文章目录实现功能过程搜索图标加入项目封装组件具体使用效果其它细节实现功能Ant Design项目中自带的<Icon />不能满足要求，其一图表数量太少，其二样式单一，通过引入www.iconfont.cn中提供的图标实现既定功能。icon的引入有unicode、font-class、symbol三种，其中symbol代表了未来的主流，也是官网推荐用法。我们知道svg引入后可以自定...
react中定时刷新echarts图表
文章目录实现效果关键问题实现过程相关思考实现效果Ant Design结合React定时获取数据并刷新echarts图表，实现效果如下：关键问题在componentWillMount中设置定时器定时获取数值，在componentWillUnmount中删除定时器使用echarts-for-react构建echarts图表，数据刷新时填充新的数值到echarts option中，随后获取...
react生命周期函数componentWillReceiveProps（通过比较先后传递的props刷新组件）
componentWillReceiveProps这个生命周期函数用的不多，碰到正好总结下。该函数通过比较先后两次传入的props数值是否相同，执行相应的方法。如代码所示，比较前一次传入的type, historyData和现在的是否相同，决定是否如何填充echarts options componentWillReceiveProps(nextProps) { const { t...
今日推荐
周排行