import omit from 'omit.js'; // 作用: 从已经存在的对象中过滤特定属性 const formProps = omit(this.props, [ 'prefixCls', 'className', 'layout', 'form', 'hideRequiredMark', ]); import hoistStatics from 'hoist-non-react-statics'; // 作用:常用语高阶组件中,将被包裹元素的静态方法,“同步”到容器元素中. hoi…

见章知著 1024,程序员们节日快乐!本文主要讲述react配合antd以及react-img-crop第三方库实现一个可控的图片上传功能. 运行项目 需要具有node环境 第三方库安装 1.antd(Upload)安装和初始化 1.1.在代码编辑器(VS-Code或者其他编辑器)代开终端,输入命令行安装antd: $ yarn add antd --save 或者 $ npm install antd --save 1.2.安装好antd后,修改src/App.css,在新建的项目中引入ant…

React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给大家,希望能让读者少踩一些坑! 本文看点 实际项目效果…

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,…

一.安装使用 1.1.安装 推荐使用 npm 或 yarn 的方式进行开发 npm install antd --save yarn add antd 1.2.浏览器引入 在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd. 我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css import { DatePicker } from 'antd'; ReactDOM…

webpack配置 webpack.config.dev.js, webpack.config.prod同理. 'use strict'; const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Case…

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.基础表格 Table组件基础Api bordered属性:是否展示外边框和列边框 columns属性:表格列的配置描述(即表头) dataSource属性:数据数组 pagination属性:分页器,设为 false 时不展示和进行分页 <Card title="基础表格"&g…

具体js如下,配合的是antd里面的upload组件,使用的是xlsx插件 npm :  npm install xlsx 插件链接: https://github.com/SheetJS/sheetjs 方法中的fileList[0].originFileObj 就是antd的upload组件上传文件的文件信息,类型为File. 搭配的upload组件:…

form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等等都大同小异.大差不差且表单的功能基本相似,所以很有必要对这些表单来一个简单的封装. 其实,封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了,这里不再做过多的描述了,且在"封装react antd的表格table组件"一文中,我们也对相关技术作了简要介绍…

背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码规范.请求封装等等, 涉及内容较多,所以我分成了几个部分来记录搭建的过程: 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇) 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(引入redux) 从0到1用react+antd+re…

一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级表示的是应用,这是table的最左边的数据.然后是按钮的数据,这里显示在table的头部. 二.效果图如下 三.具体代码 1.RoleApplicationTable.js import React from 'react'; import RoleCheckbox from 'components…

vue-loader配合webpack的使用及安装: 工程文件简单的目录结构 index.html main.js   入口文件 App.vue   vue文件,官方推荐命名法 package.json   工程文件(项目依赖,名称,配置)     npm init --yes   生成 webpack.config.js   webpack配置文件 ps:  es6模块化开发  导出模块:export default {}   引入模块:import 模块名 from 地址 webpack的准…

引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form/)表单页面的大概样子如下:…

先在MyApplication中初始化ImageLoader initImageLoader(getApplicationContext()); /** * 初始化ImageLoader * 如果你经常出现oom * 减少配置的线程池的大小(.threadPoolSize(...)),建议1~5 * 配置中使用.diskCacheExtraOptions(480, 320, null) * @param context */ public static void initImageLoader(…

使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, /*翻页查询*/ pageSize:10, /*分页查询*/ activePage: 1, /*默认显示一页*/ selectedRowKeys: [], // 这里配置默认勾选列 loading: false, /*antd*/ selectedRow:[] } 在制作过程中,根据需要把antd的…

antd 主页地址:https://ant.design/docs/react/introduce 在使用过程中,不能照搬antd的组件代码,因为有些并不合适.首先,菜单并没有做跳转功能,仅仅是菜单,需要在它的基础方法中添加我们的业务代码. /*菜单组件,所有的方法都要bind this*/ import React,{Component} from 'react'; import {render} from 'react-dom'; import {Link,browserHistory} f…

公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getFieldDecorator API时会后错,直接使用getFieldProps代替,即可 this.props.form 中含有大量的方法,可以去这里调用 刚开始使用大部分的报错是因为antd中的方法都没有 bind(this) 绑定this,只要绑定this即可 使用antd组件不能直接export de…

本文介绍通过grep来进行日志分析,主要介绍grep -C和配合awk实际对catalina.out使用案例 grep可以对日志文件进行筛选,统计,查询,快速定位bug. 首先,你的日志需要比较规范,格式统一 格式如         时间 日志级别 请求url 用户id 输入 输出 如果你的日志是上面的格式,用grep会舒服很多,否则需要进行过滤 常用命令 grep '2016-12-01' catalina.out       会逐行匹配,如果发现有 2016-12-01 则会输出 grep…

调整 ANTD 组件菜单的字体大小:经过多次试验,原有字体太小,只有12px,通过下列CSS 强制加大. 1.分组子菜单(标题) .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title{ font-size: 15px !important;} 2.菜单项 .ant-menu-inline > .ant-menu-item{ font-size: 15px !important;}…

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言  http://www.cnblogs.com/panzi/p/5742089.html ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取)  http://www.cnblogs.com/panzi/p/5745042.html ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(二) 之 Chat…

1,react中文文档http://reactjs.cn/react/docs/thinking-in-react-zh-CN.html 2,antd文档 https://ant.design/docs/react/introduce…

前言 上一篇中,我们用了反射工厂来解除BLL和UI层耦合的问题.当然那是最简单的解决方法,再复杂一点的程序可能思路相同,但是在编程细节中需要考虑的就更多了,比如今天我在重构过程中遇到的问题.也是接下来我要解决的问题,缓存模块.为什么要解决这个问题呢,由于我们有些下载代码运行的小伙伴,发现怎么运行报错,原来是没有装redis.可是我只想看layim和signalr代码而已啊,不想装什么redis.那么基于昨天的经验,我把缓存模块同样提取出接口,然后加了一个原始的cache层.这个cache是基于S…

原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpj…

首先在config.php里面添加配合mongodb的数据库连接 'DB_TYPE'=>'mongo',// 数据库类型 'DB_HOST'=>'localhost',// 服务器地址 'DB_NAME'=>'fzdb',// 数据库名 'DB_USER'=>'',// 用户名 'DB_PWD'=>'',// 密码 'DB_PORT'=>27017,// 端口 'DB_PREFIX'=>'fz_',// 数据库表前缀 'DB_CHARSET'=>'utf8'…

备份 新建一个脚本/root/backup.py,内容如下: #!/usr/bin/env python# -*- coding: utf-8 -*- ''' 脚本作者:昨夜星辰 脚本作用:配合crond服务实现自定义周期备份MySQL数据库(使用innobackupex进行备份) 创建日期:2016年9月22日 ''' import os import datetime import subprocess # MySQL服务root用户的密码 password = 'test' # 用于存放备…

错误提示: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接. (provider: SQL Network Interfaces, error: 50 - 发生了 Local Database Runtime 错误.Cannot create an automatic instance. See the Windows Application event log for er…

from:http://www.cnblogs.com/zeusro/p/5171084.html 运用.net core配合VS 2015制作nuget包 以往做nuget包我们一般要么用命令行,要么用nuget的图形化界面去做,但是一些操作比较麻烦.比如引入命名空间,引入第三方nuget包.今天,我们来讲解下一种全新的构建方式. 环境: win10 VS2015 企业版 .net 全家桶(.net framework,dnx,.NET core) Why: 运用.net core+官方这种特…

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 在上面的练习当中我们已经成…

Semantic-UI-React: http://react.semantic-ui.com/ ANTD :http://ant.design/ Amaze UI React: http://amazeui.org/react/…

会不会使用工具,是一般QA和高级QA的区别 ---To be crazy Java就是好,开源框架遍地都是,各种niubility的jar包,各种神器,真是不亦乐乎. 今天研究一下基于图片识别作为对象的niubility的sikuli框架. MIT的研究人员设计了一种新颖的图形脚本语言Sikuli,计算机用户只须有最基本的编程技能(比如会写print"hello world"), 他不需要去写出一行行代码,而是用屏幕截图的方式,用截出来的图形元素组合出神奇的程序. 简单了解一下: 官网…