待学习: 1.https://www.cnblogs.com/jlj9520/p/6625535.html 2.http://python.jobbole.com/87112/ 3.…

React & shit Antd https://ant.design/components/tooltip-cn/ https://ant.design/components/tag-cn/ https://ant.design/components/notification-cn/ https://ant.design/components/alert-cn/…

官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/npm.umi(最新即可) 创建项目: 1.打开cmd 2.创建项目文件夹:输入mkdir ReactUmiG6App & cd ReactUmiG6App 回车 3.创建项目:yarn create umi   4.添加需要的依赖包:react .antd.@antv/g6 yarn add ant…

之前的几篇博客是将flask 结合 antd本地化,但是这样使得antd无法按需加载(也不支持ES6的语法),而且在写的过程中还需要把每个组件都用antd对象,这样的做法虽然是实现了antd的本地化,但是无法最大化的使用antd组件库,最好的方式就是官网上的组件代码直接拿过来用就行,今天所做的就是这个功能. 首先是借用Webpack ,它是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需…

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

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

Flask from flask import Flask , request from flask_cors import * import flask import json import pickle app = Flask(__name__) CORS(app, resources=r'/*') headers = { 'Cache-Control' : 'no-cache, no-store, must-revalidate', 'Pragma' : 'no-cache' , ' ,…

不知道为什么蚂蚁金服团队没有在ant design的DatePicker中单独给出选择年份的组件,这给我们这种懒人造成了很大的痛苦,自己手造轮子是很麻烦的.毕竟只是一个伸手党,emmmmm..... 然后就打算自己手撸了,首先去偷看了蚂蚁自己组件的样式,打算照着搬下来.后来发现下面的item是用的table布局,这种布局是我最厌恶的,还是换种方式吧,ul>li,嗯,我最喜欢的 然后开始. 代码如下: /** * 使用方法 * 引入: * import YearPicker from "@/…

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…

Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架. Umi 一套可插拔的企业级 react 应用框架,同样由dva作者 sorrycc 完成.他在Umi中引入了 UI 工具 antd,打包工具 roadhog,路由 react-router和状态管理器 dva,做到了可插拔机制. Dva 初实践 一…

需求说明,一个帐号角色可以设置管理多个项目的菜单权限 且菜单接口每次只能查询特定项目的菜单数据[无法查全部] 开发思路: 1,获取项目接口数组,得到项目数据 2,循环项目数据,以此为参数递归查询菜单数据[递归查询是为保证循环时数据异步请求顺序 不稳定] 3,将菜单数组组装成一个二维数组,以待循环树选择组件作展示 数据使用 4,循环树选择组件,实现树选择菜单功能 5,读取某条用户信息的菜单权限,将返回字符串菜单编码处理成与菜单数据相同的二维数组 6,奖该用户信息的菜单权限数组加载到循环树选择组件作…

antd官网上的Checkbox功能只能单独使用,在表格中加入Checkbox也只能点击Checkbox按钮才能实现选中或取消功能 如果我们要实在表格行中点击或在图片列表中点击图片就能实现选中或取消,就需要单独添加事件,然后使用该事件对Checkbox操作的数组进行操作,才能实现该功能, 简单来说就是为需要添加功能的地方再绑定一个事件,与Checkbox操作同一个数据 就可以了 先来看如何实现点击 表格行来选中或取消,这里有一个网上的例子可以贴出来 https://codesandbox.io/…

一个小而简单的单选全选功能,其实官网已经给出效果了,不过是我多做了些复合用法 addorupdatemodal.jsx import React from "react"; import {Modal,Table,Button,Checkbox,Card,Popconfirm } from 'antd'; import LoadingMixin from '../../../libs/loading.common.mixin'; import RequestMixin from '..…

文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm install --save video.js 引入 import 'video.js/dist/video-js.min.css' import videojs from 'video.js' index.js (自己注释掉的可以不用) import React from 'react' impo…

背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack.config.dev.js文件中的配置进行less的配置. 可以看到脚手架创建的config文件为加载loader写了一个公共方法,不是以前的webpack配置,所以仿照他的方式进行配置less文件. 直接复制css的配置,修改成less的配置,然后yarn start重启项目. 此时可以加载le…

引言 按照antd官网配置按需引入,还是出现一系列的报错: 原因 在网上搜了一下,大部分说是react-scripts以及react-app-rewired版本不兼容的问题,我果断把下载低版本 npm install react-app-rewired@1.6.2 --save npm install react-scripts@2.1.1 --save config-overrides.js 配置一下内容 重启即可 const { injectBabelPlugin } = require('…

一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe…

一.创建项目 使用npx create-react-app (项目名) --template typescript 创建项目 ①如果App.tsx文件有如下报错: (没有报错的请忽略) 需要将tsconfig.json文件里的 "jsx": "react-jsx" 配置改为 "jsx": "react" 即可. ② 此时运行yarn start会报错 此时需要将react-scripts版本4.0.0降级为3.4.4  (参考…

import React, { useState, useEffect } from "react"; // antd import { Pagination } from "antd"; // 二次封装axios import Unit from "../分页/index.js"; const App = () => { const [sj, setSj] = useState({ currentPage: 1, totalPage: 1…

antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https://segmentfault.com/q/1010000011223900),修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用less-loader 来处理css文件,在与antd一起使用时可能出现错误,单独写一条规则),所以我…

1.antd Upload默认值问题 需求是这样的,后台若没有图片默认值,则只有上传按钮,且只能上传一张图片:若有默认值,则显示默认头像图片, 可删除,删除之后有且只能添加一张图片,没有删除默认图片时不能添加图片 坑爹之路漫漫----- 图为无默认值时状态 图为有默认值状态,删除后可添加图片 首先设置defaultFileList,但是defaultFileList并不会默认添加到fileList里面 ?"":<Button style={{width:this.props.wi…

一:版本升级 首先说明一下这里的dva是最新版: 2.3.2 1.初始化项目构建 npm install dva-cli -g dva -v dva-cli version 注:通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上. dva new dva-test 这会创建 dva-test 目录,包含项目初始化目录和文件,并提供开发服务器.构建脚本.数据 mock 服务.代理服务器等功能. 然后我们 cd 进入 dva-test 目录,并启动开发服务器: cd dva-tes…

github仓库pc: https://github.com/llcMite/react-dva-antd.git github仓库mobile:https://github.com/llcMite/react-dva-antd-mobile.git 1)安装dva-cli及创建应用     npm install dva-cli -g dva new demo cd demo npm install npm start 2) 安装antd(如果是移动端antd-mobile) npm inst…

使用 react-app-rewired 1. 安装react-app-rewired: 由于新的 react-app-rewired@2.x 版本的关系,你还需要安装 customize-cra. yarn add react-app-rewired customize-cra // npm install react-app-rewired customize-cra 2. 修改package.json: /* package.json 的配置需要做如下修改*/ "scripts"…

我们要实现一个通过点击顶部导航来查询左侧菜单的一个功能 在这个功能中,我们要应用到onClick={this.headNavMenuList.bind(this)}方法来传递点击 不同按钮来传递不同的值 注意:如果 我们要在后续事件中使用传递过来的参数来更新局部DOM,则可以不加.bind(this),否则会报出警告 adtd中的事件与常用的事件略有不同,是在父层窗口上绑定事件,通过相同的key值来实现不同的数据传递 onClick={this.headNavMenuList.bind(this…

antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = [];在设置列参数的函数中render个open函数 { title: '操作', dataIndex: 'action', key: 'action', className: 'hotAaction hotZaction', render: (text, record) => <a href="javascri…

0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are these? 1.1 react.js React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库.使用 React 可以将一些简短.独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”. 1.2 dva dva 首先是一个基于 redux 和 redux-saga …

import React, { useState, useEffect } from "react" import { ListView } from "antd-mobile" const data = [ { img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png", title: "Meet hotel", des: "不是所有的兼职汪…

目录 前言 Backend-Flask Frontend-React Done References 前言 新的一年,开始水第一篇技术文.碰巧最近React玩得多,撸一篇文章纪念一下开发环境的搭建.…

一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1.若列头与内容不对齐或出现列重复,请指定固定列的宽度 width.如果指定 width 不生效,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局. 2.建议指定 scroll.x 为大于表格宽度的固定值或百分比.注意,且非固定列宽度之和不要超过 scroll.x. 如果按照…