ReactJS

2022-05-14 · 阅读 4689 · 字数 888

由于视频文件太大，不适合通过自己服务器中转一层，还是在前端直接传到七牛云合理。 文档 七牛云 Go SDK 文档，参考上传凭证的生成：https://developer.qiniu.com/kodo/sdk/go 七牛云 JS SDK 文档，参考其自定义文件名：https://developer.qiniu.com/kodo/1283/javascript 关于 token token 上传凭证。 作用：客户端（移动端或者Web端）上传文件的时候，需要从客户自己的业务服务器获取上传凭证 有效期：默认情况下，在不指定上传凭证的有效时间情况下，默认有效期为1个小时。也可以自行指定上传凭证的 ...

阅读全文...

2022-04-27 · 阅读 4399 · 字数 213

Antd Pro V5 的诡异问题不断，在新增了一个路由配置项，修改图标之后，导致报错。 之前的 V5 beta 版从来没有遇到这个问题，是最新的 V5 正式版新引入的问题。 新图标导致报错 { name: '配置项', icon: 'SettingOutlined', path: '/settings', component: './Settings', access: 'canAdmin', }, 报错信息： Module "./@ant-design/icons/SettingOutlined" does not exist ...

阅读全文...

2022-03-10 · 阅读 10667 · 字数 219

组件返回的日期格式问题 antd 选择日期的控件 DatePicker 是输出的 moment 对象，如： Date: "2022-03-10T03:33:14.737Z" 解决办法： // 在 CreateForm 的 onFinish 里加上 if (value.Date) { value.Date = moment(value.Date).format('YYYY-MM-DD'); } 服务器返回日期字符串的解析问题 Uncaught TypeError: date.clone is not a function 解决办法： // 编辑按钮的点击事件里， ...

阅读全文...

2022-03-10 · 阅读 2908 · 字数 345

Bug 现象 在 Antd Pro V5 数据列表页，点击编辑某个条目，去掉某个字段的内容，保存。 再点击新建，还是编辑的上一条信息。 这时点击保存，实际上是覆盖了上一条的信息，而不是新建了一条信息。 这个问题，之前也有发现过，但是一直没有找到复现的方法。一些用户反馈的复现方法也不好使。 这次好不容易发现了重现步骤，看来是 100% 出现的严重 bug，必须修复一下。 问题定位 又试了几种操作流程： 编辑，然后取消，不保存。再点击新建。一切正常，数据没有串。 点击编辑，再编辑另一条。也正常。 猜测是新建条目并保存之后，全局的 currentRow 没有重置。 const [currentR ...

阅读全文...

2021-11-08 · 阅读 3215 · 字数 316

开发时倒是好好的，但是再次 clone 到不同目录，或者其他电脑上 clone 之后，先 tyarn 安装依赖，然后 tyarn start 报错： > tyarn start yarn run v1.22.10 $ cross-env UMI_ENV=dev umi dev Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/brows ...

阅读全文...

2021-10-30 · 阅读 6410 · 字数 478

按钮放在哪里 如 Antd Pro 示例中，放在过滤设置区域还挺合适的。因为导出 Excel 需要遵循过滤条件，如时间段，类型等。 https://procomponents.ant.design/components/table#%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C%E8%87%AA%E5%AE%9A%E4%B9%89 button or link link 容易实现吧，target 设置一下，在新 tab 页中下载。 可以确认一下，Ant Design 有没有体验更好的组件。之前用过 Ant Design 的上传组件不错。 Ant Design 中 Bu ...

阅读全文...

2021-10-28 · 阅读 5984 · 字数 432

例如，我要在数据后台拉取一段时间的代理商交易记录，并进行金额数据合计。 展现形式 可以使用 Antd Pro ProTable 的"表格主体自定义"，该区域在 table 列表的上方，更醒目一些。 https://procomponents.ant.design/components/table#%E8%A1%A8%E6%A0%BC%E4%B8%BB%E4%BD%93%E8%87%AA%E5%AE%9A%E4%B9%89 相对 Ant Design Table 的"总结栏"，"表格主体自定义" 格式更灵活，更醒目。 关键的一点是，Pr ...

阅读全文...

2021-10-18 · 阅读 4227 · 字数 488

Antd Pro 写的物联网 IoT 设备管理后台，需要加上一个所有设备的监控大屏。 入口 [X] Antd Pro 顶部菜单栏，“监控大屏”，闪烁图标达到醒目的效果 [X] 左侧菜单，进入 功能模块 基础模板： http://datav-react.jiaminghi.com/demo/construction-data/index.html [X] 修改顶部标题 [X] 废弃。点击全屏 [ ] 实时时间 [ ] 全国地图。飞线图 [ ] 各种设备数字 全屏组件 https://antd-plus.alitajs.com/components/operation/fullscreen ...

阅读全文...

2021-10-09 · 阅读 8804 · 字数 5842

需求 只需要省市二级选择，而不需要省市区。 网上不少示例使用的是 Ant Design select，实际上用 Cascader 级联选择组件更合理。 最终效果： Ant Design Cascader 级联选择组件 https://ant.design/components/cascader-cn/ 从文档看，label 是可选项，猜测不写 label 则同 value。 interface Option { value: string | number; label?: React.ReactNode; disabled?: boolean; children?: Opt ...

阅读全文...

2024-10-28 · 阅读 7682 · 字数 141

虽然修改了 Antd Pro V5 的全局 title，但是在加载时，还没有完全加载完的时候， 还是显示的 Ant Design Pro 的标题。 解决方法： 修改 Antd Pro V5 加载时的 title 打开：src/pages/document.ejs 修改里面的 title 部分。 .ejs 是什么格式？ Embedded JavaScript templating. 看起来就是一种 JS 的模板格式。 favicon.ico 在哪里替换 public 目录 login 页面的 logo > grep logo.svg -r src/ src/pages/user/Login ...

阅读全文...

2021-09-07 · 阅读 5374 · 字数 316

执行 tyarn build 完成后，会看到 Antd Pro 项目根目录下多了个 dist 目录。这个即是打包好的线上代码。 从 package.json 可以看到 build 对应的实际命令： "build": "umi build", 将 dist 目录 scp 到生产服务器上，然后增加 nginx 配置： location / { root /home/path_of_project/dist; index index.html index.htm; try_files $uri $uri/ /index.htm ...

阅读全文...

2022-01-25 · 阅读 9387 · 字数 858

以一个会员管理系统为例，采用前后端分离的架构，前端 Antd Pro V5, 后端 Golang Gin。 整理这个笔记是为了把操作流程串联起来，方便以后新建此类项目，节省时间。 原则 从看的见的部分入手，即先搞前端，然后后端。这样很容易了解哪部分需要调整，否值后台写着写着就迷失了方向。不知道下一步该搞什么。写程序确实很难标准化流程，这导致有时效率会不尽人意，总结一些可以遵守的原则，可以少走弯路。 尽量不要从头搭框架，特别是 Antd Pro 这种代码质量不行的框架，每次踩坑都是浪费时间。要么复制之前项目的代码，要么自己 fork 一份，自己维护 项目目录结构 考虑了一下，还是将后端、前端 ...

阅读全文...

2021-08-08 · 阅读 4816 · 字数 94

Ant Design Pro V5 如何去掉全局底部呢？ > grep 蚂蚁集团 -r src/ src/components/Footer/index.tsx: defaultMessage: '蚂蚁集团体验技术部出品', src/locales/zh-CN.ts: 'app.copyright.produced': '蚂蚁集团体验技术部出品', 打开文件 src/components/Footer/index.tsx 进行修改, 修改为 return 空字符串即可。 --- a/member_frontend/src/components/Footer/index.tsx ...

阅读全文...

2021-07-22 · 阅读 8704 · 字数 233

配置其实很简单，奈何 Ant Design Pro 文档写的有点晦涩，且代码不是最新的 Ant Design Pro 5。 整理了一下。 真实场景是，总部管理员与代理商登录后台看到的功能模块不一样，即左侧菜单显示不同。 需要修改三个地方： src/access.ts return 中添加各种权限配置。 currentUser 为调用后台的用户信息查询接口。 export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) { const { currentUser } = ...

阅读全文...

2021-07-20 · 阅读 13602 · 字数 593

需求 我想在 Ant Design Pro 管理后台页面中实现这样一个功能： 统一的系统配置项管理 新增配置项时，需要选择配置项类型：例如字符串、图片、富文本 根据字段类型，分别展示不同的对应 Ant Design 组件：例如 Input 输入框，图片上传组件，富文本编辑组件 这就需要根据类型字段，动态地显示不同的字段。 getFieldValue 搜到需要使用 getFieldValue 来获取依赖字段的当前值，以此为依据来判断该显示不同的组件。 用 github 搜到一段示例代码： https://github.com/SANGET/custom-platform-tool/blob/ ...

阅读全文...