ant design pro
文章平均质量分 73
程序员随风
四线城市咸鱼程序员 自由职业者 创业者 争取 35 岁退休 https://www.qiuzhi99.com
展开
-
【图文并茂】ant design pro 如何优雅奇妙地让创建和更新页面共用一个 form
如上图所示一般来说,新建和编辑页面的内容应该是差不多的。如果分开来写,每个 form 都写一份代码,那就太复杂了。一改的话,可能要改两次如何共用呢,还要做到,有时候他们有些差异的,比如用户修改的时候可以不用填密码,但是创建时一定要有密码。原创 2024-08-23 10:14:08 · 405 阅读 · 0 评论 -
【图文并茂】ant design pro v6 如何开启多标签功能
antd pro v6 很容易开多标签。原创 2024-08-22 17:23:35 · 320 阅读 · 0 评论 -
【图文并茂】ant design pro 如何优雅地把删除和批量删除功能合并到一起,并抽出来成为组件
如上图所示,其实批量删除和删除应该算是一个功能只是删除一个或多个的区别那么接口应该用的同一个删除一个的时候呢,就传 一个对象_id 过去删除多个的时候,就传 多个 对象 _id 的数组过去。原创 2024-08-22 16:54:59 · 790 阅读 · 0 评论 -
【图文并茂】ant design pro 如何用 renderFormItem 结合 TreeSelect 实现一个多层树级搜索
上一篇如上图所示比如我们经常要查一些,商品分类下的所有的商品类似这样的需求如何做。我们以菜单为例,我们可以查找某个父类下的所有子菜单当然最简单的做法,是提供一个 input text 框,让其输入菜单名称来查。但是为了更好的用户体验,我们直接让客户去选,而不是输入菜单名。原创 2024-08-22 15:31:31 · 800 阅读 · 0 评论 -
【图文并茂】ant design pro 如何实战使用 ProFormTreeSelect
上一节这一节的内容会利用上一篇文章的内容的。我们经常会实现一个远程数据调用的 select 框,不过有时候这个 select 是有层级的。就像我们这个分类一样,有父分类,子分类的。多层级。怎么处理呢?还是先实现后端。原创 2024-08-22 11:17:23 · 1116 阅读 · 0 评论 -
【图文并茂】ant design pro 如何统一封装好 ProFormSelect 的查询请求
你仔细看上面的图片吧经常有这样的需求吧。这些列表都是查询出来的。原创 2024-08-21 16:00:08 · 908 阅读 · 0 评论 -
【图文并茂】ant design pro 如何使用 refresh token 可续期 token 来提高用户体验
接下来 if (decodedToken.exp * 1000 < currentDate.getTime()) { 就去判断 access token 是否过期,过期才要续只要 refresh token 不过期,总能续上新的原创 2024-08-21 15:05:49 · 964 阅读 · 0 评论 -
【图文并茂】ant design pro 如何给后端发送 json web token - 请求拦截器的使用
上一节有讲过还差一个东西,去获取个人信息的时候,是要发送 token 的,不然会报 403.就是说在你登录之后才去获得个人信息。这样后端才能知道是谁的信息。token 就代码了某个人。原创 2024-08-21 13:57:02 · 844 阅读 · 0 评论 -
【图文并茂】ant design pro 如何对接后端个人信息接口
我们拥有 12 年建站编程经验上一节我们有讲到如何对接登录接口的仅仅能登录是最基本的,但是我们要进入后台还是需要另一个接口。关于第二点,是很重要的,这个接口就是必须你要登录过一次,拿到 token 之后,才能访问到。如果你没有 token ,也就是说没有登录过,这个接口访问的时候就会出问题,比如你都没登录过,你觉得能拿到个人信息吗,拿谁的。所以没有登录过的,就让它跳到登录页面,就是这个接口的作用。有没有登录过,就只看浏览器有没有存好 token.原创 2024-08-21 12:57:35 · 1098 阅读 · 0 评论 -
【图文并茂】ant design pro 如何对接登录接口
ant design pro 如何去对接登录呢。原创 2024-08-21 11:14:56 · 926 阅读 · 0 评论 -
ant design pro 的环境变量的使用
如上图所示,定义好环境变量后,整个应用的名字就发生的变化。原创 2024-08-20 17:55:53 · 424 阅读 · 0 评论 -
ant design pro 技巧之实现列表页多标签
后端的参数是叫 isOnline ,要对上 key 和 value。在 index.tsx 中的 protable 里加上这个就好。其实 ant design pro 是支持的。每次点击的时候要发请求,得到不同的数据。主要是上面的 menu 的选项处理,还有。像上图那样,我们经常给列表页做分类的,要把 activeKey 传给后端。我们拥有 12 年建站编程经验。肯定是要得到动态数据对吧。然后是请求列表里比较重要,这种多标签如何处理呢?其它的都没啥的问题。原创 2024-08-20 17:33:39 · 627 阅读 · 0 评论 -
ant design pro 技巧之自制复制到剪贴板组件
但是如何同时用上了 render 或 renderText, 这个 copyable 就会无效的。ant design pro 中 的 protable 是有一个选项可以控制是否能复制到剪贴板的。CopyToClipboard 这个组件是自己写的,我把源码分享出来,有需要的人可以拿一下。所以我自己写了一个组件来实现一样的效果。我们拥有 12 年建站编程经验。原创 2024-08-20 17:10:11 · 523 阅读 · 0 评论 -
ant design pro 如何处理权限管理
name 是显示出来给看的,主要是 path action 这两个结合起来,来标明一个唯一的权限。ant design pro 的前端去处理权限好处理的,弄个增删改查。最后才是在所有角色里找到权限来判断,依据的标准是 path action 这两个。刚好这两个我们是能取到的,在请求里取到值,跟用户存的数据库的数据匹配即可。这是个中间件,只要在路由里先用上就行,就是先检查一下是否有权限。主要是后端,如何存权限的信息,要存什么信息,如何验证。然后再判断是否有角色的,角色都没有,肯定没有权限了。原创 2024-08-20 16:33:59 · 412 阅读 · 0 评论 -
ant design pro 的表分层级如何处理
当然你要两边都存也行,但是每次修改都要操作就比较麻烦,但胜在读取数据,得到 children 比较简单。一般我存一个 parent ,指向父级就好,这样能通过 parent 找到所有的 children.如上图这样,经常我们要加一些分类表,但是这些表是有层次的,比如父级,这种应该如何来表达得更好呢。这里是没有存 children 的。但是需要把 children 返回给前端的。多加了个循环,但胜在数据不会太多,没啥问题。这块仍然跟编辑的时候有关,可以填上它的值。我们拥有 12 年建站编程经验。原创 2024-08-20 16:20:23 · 406 阅读 · 0 评论 -
ant design pro 如何实现动态菜单带上 icon 的
主要是 name children 这些比较重要,name 是显示出来的,children 是层级结构。当然还有 icon 之类的 还有 path ,也是要的,毕竟菜单要有路径的。如上图所示,这里的菜单是从后端动态得到的。只要你的后端能返回出这样的数据就行。我们拥有 12 年建站编程经验。原创 2024-08-20 15:28:42 · 636 阅读 · 0 评论 -
ant design pro access.ts 是如何控制多角色的权限的
permission 里面是有 “path”: “/permissions/:id”,看上面的图片,在前端中如何控制这些权限,比如控制按钮的显示,还有菜单的显示。假如你没用动态菜单,只要在 access 加上定义的权限就行。所以要根据这个是去匹配,因为它们是跟程序相关的,一般不会变化。当然你的后端可以任意来实现,只要返回出的数据匹配就对了。access 是这样引入的。这些在它的官网都有吧。“action”: “PUT”, 的。再讲一下,它的原理和搞法。先来讲讲如何应用它。原创 2024-08-19 15:13:31 · 850 阅读 · 0 评论 -
ant design 的 tree 如何作为角色中的权限选择之二
主要是这个 initialValues ,permissions 是 那个 name ,对上了就好。但是提交的时候要把 permissions 带上。我是权限组是有层级的,然后权限组下面有权限。为什么编辑的时候会填充上选中的状态?大约是这样的情况,希望对大家有所帮助。后端的话可以参考我的设计,原创 2024-08-19 14:54:00 · 523 阅读 · 0 评论 -
ant design 的 tree 如何作为角色中的权限选择之一
主要是这个 permissionGroups 的数据从哪里来。name children ,这些要跟组件的参数对上。组件好办,主要是后端这个数据结构,要对上。编辑的时候要让权限能选中哦。首先这个地方,你要使用。原创 2024-08-19 14:42:21 · 330 阅读 · 0 评论 -
ant design pro v6 如何做好角色管理
先上图:整个角色管理是如何做的吗?首先你要处理后端,要先把角色存到用户那。这是用户管理部分的内容:可以看到一个用户是有多个角色的。看到没有,存的是数组数组的是一个 role 对象role 对象是这样:主要是存一个 name 就好。permissions 是权限列表。import { Request, Response } from 'express';import Role from '../models/role';import handleAsync from '../原创 2024-08-19 12:00:03 · 377 阅读 · 0 评论