前言权限是后台管理系统常见的需求,后台开发必须考虑设计的模块,antd-pro给我们提供了很好的关于权限的封装,我们只需要在配置菜单的时候配置上准入身份,在登录成功以后获取到登陆者身份以后更新登录人身份参数即可。 效果: 1、没有准入权限的菜单将不显示 2、直接在浏览器输入没有准入权限的的地址,将跳转到403页面(图1)
图1.直接输入地址但却没有权限
转载
2024-04-01 11:42:25
518阅读
前言:前一篇记录了【后台管理系统】目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点。附:Ant Design Pro 在线预览地址。 Dashboard指示板pages/Dashboard 目录下:Analysis.js分析页、Monitor.js指控页、WorkPlace.js工作台用到的一些技术点:react v16.6 动态
转载
2024-05-07 12:09:22
54阅读
Ant Design Pro v4 is Here 距离 Pro 的上个版本发布已经过去了 8 个月,Pro 也进行了许多的迭代,但是大部分更新仍然以修复 bug 为主。在此期间我们遇到了许多使用 Pro 的痛点,也在思考如何能够解决这些问题。与此同时整个前端业界也在发生着变化,随着业务的复杂化,微前端已经呼之欲出。类似阿里云的控制台这样的上百页面,几百位开发者共同协同的项目也会越来越多
antd pro默认访问后,直接进入主界面的欢迎。 我需要改变一下方式,所有用户需要登录后才可以访问主界面,还有配合后端返回的数据格式,以及使用token来判断是否登录。大致思路:登录成功后将token放入localStorage退出登录的时候清除tokenRequest拦截器:发送请求时,从localStorage获取token加入请求头中Request拦截器:接收返回时,统一处理错误Secur
转载
2024-06-07 16:45:34
225阅读
ProForm 高级表单一. 简介ProForm 在原来的 Form的基础上增加一些语法糖和更多的布局设置,帮助我们快速的开发一个表单。同时添加一些默认行为,让我们的表单默认好用。ProForm 没有黑科技,只是 antd 的 Form 的封装,如果要使用自定义的组件可以用 Form.Item 包裹后使用,支持混用包含分步表单,Modal 表单,Drawer 表单,查询表单,轻量筛选等多种 lay
转载
2024-03-25 20:44:58
555阅读
Ant Design Pro of Vue是蚂蚁金服开发的一套Vue前端框架,号称可以让开发人员轻松搭建企业级的前端项目。进入官网,选择开始使用,可以看到官网提示:你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、Vue.Js、Vuex、Vue-Router、g2 和 antd-vue,提前了解和学习这些知识会
转载
2024-05-09 11:03:29
428阅读
前言:Ant Design是服务于企业级的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。设计原则:一、亲密性 如果信息之间关联性越接近,也越像一个视觉单元;反之,它们的距离就应该越远,越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。 二、对齐 在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲
转载
2024-03-15 13:55:35
88阅读
最近接手了一个react项目,里面需要用到折线图,看到图表的感觉不难。但是仔细一看引入的是 Ant Design Charts。然后去看了一下文档,发现好多地方的属性与echart区别很大,甚至用法都不一样了。最终结合文档,对属性一 一 试用了解,完成了任务。现给与记录,以便后来再使用方便。实现目标( UI 给图 )
转载
2024-03-07 21:20:18
264阅读
Ant是一个很好的跨平台构建工具,特别是对于Java项目,这里使用它对Android工程进行自动化构建可以得到非常大的便利。一般来说对Android工程进行构建主要有以下几个步骤:使用aapt来编译工程生成R.java;使用aapt来对工程所需用的资源进行打包;转换并编译AIDL文件;编译Java源文件并生成.class;转换并压缩.class文件成.dex文件;使用aapt打包生成未签名的apk
转载
2024-07-24 21:09:36
60阅读
第一部分: 前言 ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计方便我们快速开发和减少不必要的设计与代码,很多实用react框架的开发者都已经在使用ant.design了,且其在github上的star数也早已上万,足见其火热程度。 ant.design的目的也在于提高用户、开发者等多方的体验与幸福感。 ant.design设计很精妙,vue的iv
转载
2024-05-23 05:56:50
196阅读
ant design pro和ant design基础学习要学会并熟悉基于ant design pro快速开发出项目,需要学会以下知识:JSX 语法jsx语法 一般来说,HTML 原生标签都使用小写,开发者自定义的组件标签首字母大写,比如<MyComponent/>React 组件语法虽然输出 JSX 代码的函数就是一个 React 组件,但是这种写法只适合那些最简单的组件。更正式、更
1.利用moment时间转换 常用转换为普通时间格式
moment("时间").format('yyyy-MM-DD’)
moment("时间").format('yyyy-MM-DD hh:mm:ss’) //表示12小时制
moment("时间").format('yyyy-MM-DD HH:mm:ss’) //表示24小时制
MM: 月份 mm: 分
DD: 日期 dd: 星期
转载
2024-08-08 19:33:17
195阅读
react整合Ant Design Landing[首页模板集]安装nodejs安装create-react-app实用create-react-app 初始化create-react-app demo进入目录并启动 cd demo & npm start页面访问下载设计后下载文档[设计编辑页面Ant Design Landing入口](https://landing.ant.desig
转载
2024-04-03 21:08:14
198阅读
在使用ant design开发后台业务过程中,遇到了给upload组件配置后台服务器的问题。因为用习惯了七牛云的快速易用,以及喜欢它的自动压缩接口,因此第一反应就是想怎么配置上传到七牛云上面。不过经过多番搜寻,并没找到好的解决方案。官方推荐参考的jQuery-File-Upload服务端上传接口实现测试了几个nodejs的实现,发现很久没有维护了,存在一些问题。于是只能从阅读ant design源
转载
2024-05-03 15:04:41
103阅读
Ant Design的布局 我们来讲一下Ant Design布局空间布局是体系化视觉设计的起点,和传统的平面设计的不同之处在于,UI界面的布局空间要基于『动态、体系化』的角度出发展开,我们受到建筑界大师柯布西耶的模度思想的启发,基于『秩序之美』的原则,探索UI设计中的动态空间秩序。 在中后台视觉体系中定义布局系统,建议从5个方面出发: 1.统一的画板尺寸 2.适配方案 3.网络单位 4.栅格 5.
转载
2024-02-27 08:18:46
175阅读
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用。 github的代码地址: https://github.com/haozhaohang/ant
转载
2024-04-07 06:34:03
489阅读
背景Ant Design是一套不错的UI组件库,功能强大。但是依赖了很多其他的组件,在RN6.3以后要自己安装以下组件才能正常使用。yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-com
转载
2024-05-12 16:20:14
219阅读
http://ant.design/index-cn
原创
2021-07-20 11:38:32
292阅读
需求:本篇文章适用于表头同时添加悬浮和排序,另,只需支持文字悬浮对title封一层方法即可eg:const TooltipTitle = (text, title) => { // text 展示的thead title 展示的提醒文字
return (
<Fragment>
<span style={{ marginRight: 8 }}>{
转载
2024-02-29 12:24:08
138阅读
ant design组件(按首字母分):
A、Alert警告提示、Avatar头像、Affix固钉、Anchor锚点、AutoComplete自动完成
B、Badge徽标数、Button按钮、BackTop回到顶部、Breadcrumb面包屑
C、Col列、Card卡片、Content内容部分、Checkbox多选框、Calendar日历、
[color=#fff]spa[/color]Casca
转载
2024-05-30 21:32:42
53阅读