第一个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

最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pro是权限菜单,权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户,比如管理员有给用户分配不同角色的权限,那管理员就可以看到系统管理等导航菜单,而用户A只有发布某些业务的权限,那用户A就不能看到系统管理的导航菜单等等.不过这不在我们本文的考虑范围内,有兴趣的同学可以自行去看它的API:Autho

前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功成为当前最火热的三大前端框架之一.相比于Angular,React更加轻量.而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在移动端的开发上面,大名鼎鼎的React Native更是尽显优势,在代码性能上要好过Vue框架.

在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'react'; import { Tag,Icon,Input } from 'antd'; export interface TagDataType{ data:string, color:string, key:string } export interface Props { data:Arra

首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 开箱即用的中台前端/设计解决方案,没有用过的小伙伴先撸一遍文档.基于React,需要一定的基础. 2. Ant Design 配套组件,另外Antd还设计了超级组件 ProComponents,看着有点麻烦,不过我猜用起来应该很爽. 3. v5是预览版默认ts,目前不可选js版本.前端ts是一个趋势

如何实现canvas根据父容器进行自适应? Ant Design的组件都提供了强大的自适应能力,为了对齐父组件,镶嵌在Ant Design组件里的canvas也需要能根据父级容器进行自适应的能力,页面高度一般不用做自适应,因为即使太多内容页面太长,也会出现滚动条,所以问题不大,问题在于宽度,屏幕尺寸各不同,如果宽度不够,元素就会被挤变形或者换行 步骤: 首先,固定canvas的height,对于width 1.实时获取父组件的尺寸 2.实时修改canvas的尺寸 1 这里使用一个npm的包,可以

react-start 基础知识 1.使用脚手架创建项目并启动 ​ 1.1 安装脚手架: npm install -g create-react-app ​ 1.2 使用脚手架创建项目: create-react-app antd-start-demo antd-start-demo为项目名. ​ 1.3 启动 npm start 2.npm转换为yarn ​ 2.1 安装yarn: npm install -g yarn ​ 2.2 获取yarn当前的镜像源: yarn config get

最初的时候,只使用了antd中的menu,header和footer都是自己写的组件,在写路由时,总是报如下错误: 相关的路由配置如下: 在网上查的说是组件未暴露出去或者是return 这一行必须有个括号或者标签,我检查了我自己的代码,以上两项都没有问题.不知道改如何解决这个问题. 于是采用antd的layout布局,直接在webpack的入口文件的位置,配置相关的路由即可,如下: 但这样的话就把所有的路由写到了一个文件里,感觉很复杂,而且在这个文件里还要写头部的一些配置和布局,还要引入其他的组

一.H5制作 - 图片文本的动画效果 bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变:若先调节动画时间和延迟时间在选定动画效果,则动画和延迟时间可以实现. 期望:先选定动画效果,再调节动画时间和延迟时间,动画和延迟时间也能实现. 问题原因:原代码中的动画数据保存时机设置在选择动画类型的时候 只能先选时间再选动画,如果先选动画再选时间,后选的时间就保存不了了 解决方法:①将slider组件的onChange方法关掉,只保留onAf

import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd'; //具体导航的名称 const breadcrumbNameMap = { '/user':'用户管理', '/user/user_info':'用户信息', '/user/user_info/user_detail':'用户详情', '/user/user_pool':'用户池', '/use

腾讯云搞定服务器,具体过程就不赘述了,文档都有,咨询客服或者自行百度,体验一下过程. 一. 服务器 1. 云服务器 cvm 1核2G centos8.0 2. 域名注册 www.homejok.com 3. 网站备案 二. Linux安装Nginx 我用的下载包安装的方法,自定义的路径,文件名,轻微强迫症

一.简介 PostgreSQL,开源数据库(没听过小伙伴自己反思一下自行百度) PgAdmin,官方提供的数据库管理工具. 二.环境 1. 官网下载包,安装数据库 tar xjvf /app/package/postgresql-12.2.tar.bz2 -C /app/pgsql #解压包到指定目录 cd /app/pgsql/postgresql-12.2 ./configure --prefix=/app/pgsqlsys 运行报错,需要装个依赖再运行(不同环境缺少依赖不同,按提示安装)

 2017-12-04补充说明——树形菜单版本号2.x 设置默认该树形组件展开(默认展开所有树节点) 参考文档的写法: defaultExpandAll={true} //经过测试并不生效, 另外注意该属性设置时有一个问题:如何确保默认展开所有树形的叶子节点时,数据已经加载回来了?如果默认展开所有叶子节点的时候,值没有加载回来,并不会生效. <Tree showLine defaultExpandAll onSelect={this.onSelect} > <TreeNode title

一. 简介 1. 平常用的core webapi 3.1,恰逢.Net5.0正式版发布了,直接开整. 2. 先学习IdentityServer4 .Autofac.EF Core,集成到后台框架里. 3. 这篇没什么内容,就是把类库先建好,控制器加上前台调用的登录接口,. 本着学习(折磨自己

如何将内建配置全部暴露? 使用create-react-app结合antd搭建的项目中,项目目录没有该项目所有的内建配置, 1.执行yarn run eject 执行该命令后,运行项目yarn start,提示如下错误 解决办法:yarn add react-scripts 然后运行项目后又提示新的错误,如图 为优化打包体积大小我使用使用 Day.js 替换 momentjs ,解决办法:yarn add @babel/helper-create-regexp-features-plugin 运

一. 简介 Autofac与.Net Core自带DI的区别,大佬级的文章数不胜数.我只是根据实际应用简单介绍(非常简单的那种) 1.批量注入,自带DI需要自己写循环反射注入,Autofac现成方法,简洁的多. 2.其他功能,Autofac玩法丰富,官网或其他文章都有介绍. 二. 使用 1.Nuget 2.Program.cs 3.Startup.cs 这里需要添加一个方法,在方法里进行注入,注入时在最后带上.PropertiesAutowired()是开启属性注入.如果内容太多比较臃肿,注入模

一. 简介 EFCore 是轻量化.可扩展.开源和跨平台版的常用数据访问技术,走你(官方文档) 二. 使用 1.安装数据库驱动包.PMC 工具包 不同的数据库有不同的包,参考,我用 PostgreSQL,所以是 Npgsql.EntityFrameworkCore.PostgreSQL 技术迭代的真快啊,.net5不配使用最新版本 2.迁移 CodeFirst (1)新建EF上下文 WinterSirContext (2)连接字符串放在 appsetting,新建一个帮助类用来读取配置(参考),

一.日志 日志具有帮助开发者快速的定位问题,记录各种信息,配合其他分析框架使用等等功能,收集日志的各类框架如:Log4net.NLog.Exceptionless.Serilog等等,百度或园子里介绍及对比文章不胜枚举,此不赘述.易用为主,选择NLog先集成,方便后面演示使用. 1.安装 NLog.Web.AspNetCore 2.新建 nlog.config,只改了输出路径.(配置和变量介绍参考最后链接,就不贴代码了) 3.注入到框架中,测试输出效果 二.异常处理 异常处理分为两种,一种是过滤

一.Aop Aop 面向切面编程(Aspect Oriented Program),在项目中,很多地方都会用到Aop的概念,比如:过滤器(Filter),中间件(Middleware) 通常用来处理数据请求.切面缓存.记录日志.异常捕获等等.但是想在服务层中使用Aop,前面说的就不好使了,目的是减少代码入侵,降低解耦,又能实现业务需求,才是Aop意义所在.前面介绍使用了Autofac,在这还能发挥作用. 1.安装 安装Autofac.Extras.DynamicProxy,Autofac实现Ao

一.简介 IdentityServer4 是用于 ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架,通过中间件的方式集成.JWT(json web token)本身是一个格式,不是一个框架,在ids4中也用到了这种格式,而在很多公司的项目里(包括我们)使用JWT来完成鉴权机制,是在这个token格式的基础上用代码实现生成.颁发.校验.刷新.过期等功能.这是IdentityServer4与JWT的区别. 二.配置 (1)新建一个空Api项目作为认证鉴权中心,