1.pattern正则验证 <Col md={12} sm={24}> <FormItem {...formItemLayout} label="班数"> {form.getFieldDecorator('classNum', { rules: [{ required: true, message: '请输入开设班数' }, { pattern:new RegExp(/^[0-9]*$/), message:'请输入正确的开设班数' }], })(<Inp

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 ; // 鼠标在图片中与图片左上角的X轴的距离 ; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { previewVisible: false, previewImage: '' } } //图片

react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1.将css的改为less,适配ant design 2.将图片进行初次加载就执行裁剪的方法 3.适配手机的滑动事件 // index.js /** * @name Index * @desc 滑动拼图验证 * @author darcrand * @version 2019-02-26 * * @pa

一.概述 参看地址:https://pro.ant.design/docs/router-and-nav-cn 二.原文摘要 路由和菜单是组织起一个应用的关键骨架,我们的脚手架提供了一些基本的工具及模板,帮助你更方便的搭建自己的路由/菜单. 如果你想了解更多关于 browserHistory 和 hashHistory,请参看 构建和发布. 注意:我们的脚手架依赖 dva@2,路由方面是基于 react-router@4 的实现,在写法以及 API 上与之前的版本有较大不同,所以,在开始前你需要

这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.design框架结合React.js和es6语法编写 2.项目工具和环境安装 项目主要运用Visual Studio和开发结合Git和当代码工具TortoiseCit(也就是小乌龟)工具加上Node.js环境 这里要先安装Git环境,然后安装TortoiseCit,TortoiseCit相当于是Git的工具

Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用. 组件的源码    https://github.com/haozhaohang/ant-design-expand-component 下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子: impor

这篇来介绍button中elementUi.iview.ant中样式结构 ant Design react ant-react中button分两个文件less: mixins.less:根据button功能样式不同封装成函数. index.less:调用mixins.less中的函数来声明button的相关class 我们先来看mixins.less的结构 btn(基础样式,主要用设置按钮通用样式): .btn() { display: inline-block;//行内块元素 font-wei

一.  为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标准浏览器的兼容性,举个例子:一个checkbox复选框在IE上显示一个样式,谷歌上又是一个样子,火狐上又是一个样子,这个时候框架开发者们就会对它的样式进行统一,并兼容各种小问题. 快速性 ,快速性很好理解,就是快速高效开发的意思,因为各种ui框架会封装很多我们常用的各种组件,这样我们就不用重复的去开

第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步:  https://blog.csdn.net/u012907049/article/details/72764151 Ant Design是UI设计语言.Ant Design同样出身名门,是阿里巴巴旗下蚂蚁金融服务集团(旗下拥有支付宝.余额宝等产品)所设计的一个前端UI组件库.目前支持了React, 并且有一个对Vue支持的测试版本. http://ant.d

Django商城项目笔记No.4用户部分-注册接口-图片验证码 1.首先分析注册业务接口 1.1.分析可得,至少这么几个接口 图片验证码 短信验证码 用户名是否存在 手机号是否存在 整体注册接口 图片验证码.短信验证码考虑到后续可能会在其他业务中也用到,因此我们将图片验证码独立,创建一个新应用verifications,在此应用中实现图片验证码.短信验证码. python ../../manage.py startapp verifications 创建应用后记得在配置文件里注册应用 2.图片验

在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对于不同的服务器平台,可能实现方式会有所不同,尤其最近使用了阿里云作为服务器上传,就需要自定义上传行为才能满足需求,因此针对不同平台文件上传的异同和 upload 组件使用中遇到的问题做一个简单总结,希望可以对遇到类似问题的小伙伴有所帮助. 首先这里大致总结了几个不同平台服务器上传方式的异同:   

一.概述 原文地址:https://pro.ant.design/docs/authority-management-cn 权限控制是中后台系统中常见的需求之一,你可以利用我们提供的权限控制组件,实现一些基本的权限控制功能,脚手架中也包含了几个简单示例以提供参考. 二.详细 2.1.权限组件 Authorized 这是脚手架权限管理的基础,基本思路是通过比对当前权限与准入权限,决定展示正常渲染内容还是异常内容,使用方式详见 Authorized 文档. 2.2.应用实例 通过对数据的组织及权限组

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性. 2.2.css modules 在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面

一.概述 参看地址:https://pro.ant.design/docs/new-component-cn 对于一些可能被多处引用的功能模块,建议提炼成业务组件统一管理.这些组件一般有以下特征: 只负责一块相对独立,稳定的功能: 没有单独的路由配置: 可能是纯静态的,也可能包含自己的 state,但不涉及 dva 的数据流,仅受父组件(通常是一个页面)传递的参数控制. 下面以一个简单的静态组件为例进行介绍.假设你的应用中经常需要展现图片,这些图片宽度固定,有一个灰色的背景和一定的内边距,有文字

Day20回顾: 1. 请求生命周期 2. 中间件 md = [ "file_path.classname" ] process_request[可有可无] process_response[必须有] process_request process_response process_request process_response process_request process_response process_request process_response 路由->函数 3.

拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项目,然后再去完成. 第一步: 需求 服务器端使用nodejs 可以加入现有的房间 可以创建新的房间 用户可以文字聊天 聊天记录永久保存 除了上面的基本需求之外,我们还需要实现登录.注册的相关功能,这样可以保证用户的唯一性,并在后台做出记录. 第二步:确定技术栈 确定技术栈是我们需要知道为什么使用某个

发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount() { this.fetchListCallback(); } fetchListCallback = () => { const { limit, offset } = this.state; const { dispatch } = this.props; dispatch({ type: 'b

在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功能. 目录结构浅谈 首先,我们来简单了解一下整个项目的目录结构及其中每个文件的功能. 一个完整的目录结构如下:  其中,关于业务功能的代码都在src文件夹下. 而src中本身又包含着很多的子文件夹. 其中,我们最常用的应该了routes,services,models以及components. 下面

最近公司做了一个系统,因为页面涉及的表单交互非常多,如果使用之前的 Node + Express 的开发模式效率是非常低的,因此经过考虑,最后决定使用 Node + React 的开发模式,并且使用了蚂蚁金服出品的开源框架 Ant Design. 正如Ant Design 官方介绍: "在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率."在这次开发的项目中,因为数据交互非常频繁,

前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard指示板 pages/Dashboard 目录下:Analysis.js分析页.Monitor.js指控页.WorkPlace.js工作台 用到的一些技术点:react v16.6 动态 import,React.lazy().Suspense.Error boundaries (来源:Postbir