一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: <script src="/static/react/react.min.js"></script> <script src="/static/react/react-dom.min.js"></script> <scr

这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 第三篇:优化单页面开发环境:webpack与react的运行时打包与热更新 第四篇:React配合Webpack实现代码分割与异步加载 本文内容将记录使用webpack.babel.react.antdesign配置单页面应用开发环境的过程.这是我首次使用前端框架开发Web应

使用Antdesign Form时,当页面加载时,需要从后台获取数据,对Form中控件的默认赋值.看似比较简单的需求,而且Antdesign 官方文档中也有相应介绍,然后对于Form 的CheckBox 的默认值加载,文档中并没有涉及. 需求: 当页面记载时,从后台获取当前Form 对象值,然后将值加载到控件中.如下图, Form控件定义方式如下, 官网中案例使用Form.create方法创建一个对象,mapPropsToFields方法完成对控件赋初值,对于Input, Select等控件是完

1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org/guide/getting-started.html 4.我们没必要从头建立项目,直接使用antdesign项目即可,当然罗马不是一天建成的,我们可以使用上面项目进行简单的语法测试学习React用. 5.启动antdesign项目 6.将用这个项目来做SpringBoot学习的前端展示页面,该de

本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'react'; class User extends React.Component { render() { return ( <div>用户管理</div> ); } } export default User; import React from 'react'; class User

github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风格,但不适合新手直接学习测试语法用,将从一个空白项目开始创建 1.打开umi管理后台,创建一个新项目 2.umi会自动安装各种依赖项,进行项目创建 3.项目结构如下,将仿照antd做一个登录页面 二.实现登录页面 创建了不包含antd演示的jgdemo项目,以后改使用vscode编辑代码,创建use

1.逻辑代码 /** * 添加用户 */ import React,{PureComponent} from 'react' import {Card,Form,Input,Select,Button} from 'antd' import {connect} from 'react-redux' /** * 用户列表 */ const FormItem = Form.Item; const Option = Select.Option; @Form.create() class UserAdd

前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这篇文章将基于前面两篇文章进一步优化开发环境,实现单页面开发时的运行时打包与热更新. 调整文件布局 在第二篇文章中发现了框架代码文件的命名有些冲突,这里我们需要做一下调整,以便接下来的讲述不易出现问题.调整时需要小小地改动配置文件几个路径.文件布局调整前后对比如下: 图片基本已经说明了情况.我们将在s

这是Webpack+React系列配置过程记录的第二篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 第三篇:优化单页面开发环境:webpack与react的运行时打包与热更新 第四篇:React配合Webpack实现代码分割与异步加载 上一篇文章讲述了如何搭建单页面应用的开发环境.本文接着介绍如何实现单页面应用. 实际上,单页面应用利用js实现了页面的动态化,用户使用时基本

 1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除

最近有个需求是新闻时间排序与点击量排序,数据库中存储的新闻是按照时间顺序排序的,从后台数据中取出数据,在前端进行页面展示即可. 我用到了ant-design中的Tabs切换页,样式大概如下图. 其实这个项目里面最令我欣喜的是reducer中间件的封装,无需通过fetch请求数据这些,而是使用另外的封装中间件的方式 当然在store里面有引用redux-thunk 项目首先是使用了三种请求方式 在中间件中使用这三种方式,并且封装了callApi 我们将方法写在action中,callAPI就是我们

第一步安装ant-design插件 第二步查看项目目录 第三步运行项目 我们查看index.js文件 这个其实是Datepicker组件的展示效果 第四步我们按照下面的代码代替Index.js中的内容 我们用到了两个组件,一个是Message.info,一个是Datepicker 查看效果图 Message.info还可以写上消失的时间,比如50ms Message.info("点击成功",50) react中的setState就是一个很大的状态机,我们很多的数据都会在state中声明

前言 在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段.这里假定我们已经了解了react,redux和dva/umi相关的知识.并有做过相关练习. 如果还不了解以上相关的知识,建议去以下网站学习一遍,下面给出一个大概学习的路线吧. html/css/js 这里推荐大家去w3cschool稍作了解,不过看本篇文章的同学肯定都是有一定基础的.那么就当做巩固好了. es6 这里我没有系统看过教程,我是在一本叫做react学习手册的书上面看到的.这里还是放一

1.下载Node.js Node.js的版本需要不低于V4.x,本不在省略,如果需要出门左转Node.js安装教程. 查看Node.js版本: C:\Users\Administrator>node --version v8.9.1 2.安装antd 使用npm install antd-init -g 安装antd,因为npm安装插件是从国外服务器下载,受网络影响比较大,可能出现异常.可以使用cnpm安装: 2.1用npm安装 cnpm npm install cnpm -g --regist

首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api中文文档     ant-design 中文文档 本人也是第一次接触react,对本教程如疑问,欢迎评论 或 发送至 15521285778@163.com 交流 1,全局安装Create React App , 创建项目 Create React App 是开始构建新的 React 单页应用程序的最佳方

本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm i babel-plugin-import -D 安装一个babel插件用于做组件的按需加载(否则项目会打包整个组件库,非常大) 根目录下新建.roadhogrc文件(别忘了前面的点,这是roadhog工具的配置文件,下面的代码用于加载上一个命令安装的import插件),写入: { "extraBa

本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1.修改router下的index.js export default new Router({ routes: [ { path: '/', name: '登录', component: Login } { path: '/MainFrm', name: '首页', component: MainFrm, c

前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu-cn/ 速度比较快 1.最开始想的很简单,增加一个页面,修改一个路由即可,实际操作中掉了几次坑,花了很长时间 首先修改路由如下,注意:如果写后面,比如 的话会报 要放前面如下 或者增加exact 注意,嵌套路由父路由不能使用exact:true 这种无法访问 2.修改BasicLayout内容如下

目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(React)学习-13 Warning XX should not be prefixed with namespace XXX AntDesign(React)学习-12 使用Table AntDesign(React)学习-11 使用mobx AntDesign(React)学习-10 Dva 与后台数

我们知道,当下最火的前端框架,非蚂蚁金服的AntDesign莫属,这个框架不仅在国内非常有名,在国外GitHub上React前端框架也排名第一.而且这个框架涵盖了React.Vue.Angular等多种语言,甚至有人结合.net Core 5的新特性WebAssembly做了Ant Design Blazor,在此为国人点赞! 公司的新平台,用户前端界面当仁不让地使用了AntDesign for React,可以使用最新版本的特性(目前版本为4.10.1):至于为什么不使用Ant Design

很多同学说AgileConfig的UI实在是太丑了.我想想也是的,本来这个项目是我自己使用的,一开始甚至连UI都没有,全靠手动在数据库里修改数据.后来加上了UI也是使用了老掉牙的bootstrap3做为基础样式.前台框架也是使用了angularjs,同样是老掉牙的东西.过年期间终于下决心翻新AgileConfig的前端UI.最后选择的前端UI框架为AntDesign Pro + React.至于为啥选Ant-Design Pro是因为他好看,而且流行,选择React是因为VUE跟Angular我