ReactJS

分类下相关文章

修改 Antd Pro V5 加载时的 title 及 logo

虽然修改了 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 ...

阅读全文...

Antd Pro V5 使用 Nginx 部署到线上生产服务器

执行 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 ...

阅读全文...

搭建 Golang Gin + Ant Design Pro V5 管理系统后台

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

阅读全文...

Antd Pro V5 去掉底部蚂蚁集团的页脚

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 ...

阅读全文...

ant design pro 前端权限管理,显示不同的菜单

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

阅读全文...

Ant Design Form 表单一个字段是否展示取决于另一个字段的值

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

阅读全文...

antd pro 通过后台接口异步加载 select 数据

想在 Ant Design Pro 后台中,通过后台接口异步加载 Select 的选项,例如文章的作者。 思路 react effect hook 拉取数据,但是如何保证只在加载时运行一次,而不是结束时还运行一次。实际上用中括号就没有这个烦恼,不指定返回的匿名函数就可以。 获取的数据,如何传递给 select 组件。使用 useState Show me the code: 以 Antd Pro 代码为例 例如下拉选择文章的作者: 引入依赖 import React, {useState, useEffect} from 'react'; import {getAuthors} fro ...

阅读全文...

修改 Antd Pro V5 登录页面

Ant Design Pro V5 默认的登录页面功能繁多,而实际项目需要精简一下。 修改项 去掉手机号登录。因为不想加短信验证功能。 去掉底部的其他登录方式 去掉忘记密码 修改标题 修改文件 src/pages/user/Login/index.tsx 去掉手机登录 删除 Tab 选项卡 - <Tabs.TabPane - key="mobile" - tab={intl.formatMessage({ - id: 'pages.login.p ...

阅读全文...

Antd Pro 中嵌入多折线图表

安装 Ant Design Charts 依赖 参考 https://charts.ant.design/zh-CN/guide/start tyarn add @ant-design/charts 多数据曲线 Ant Design Charts 并没有给出同一图表多条曲线的配置方法。 查了一下,Ant Design Charts 是基于 G2Plot 的,所以看一下 G2Plot 的文档。 Ant Design Charts 是 G2Plot 的 React 版本,基于 React、TypeScript 封装了所有的 G2Plot 图表,继承了 G2Plot 的所有配置,对 React ...

阅读全文...

React 中的 Effect Hook

我想在 Antd Pro 中为数据图表拉取数据,查实现方法时,发现了 React Effect Hook 这个概念。 参考 https://reactjs.org/docs/hooks-effect.html The Effect Hook lets you perform side effects in function components。 什么是 side effect 呢? 之前在 Android Jetpack Compose 中也看到过 side effect 这个词,但是并不知道这是什么意思? 官方文档中给出的解释是,side effect 包含: 数据拉取 (正是我所涉 ...

阅读全文...

Ant Design Form.Item 中使用 Select 组件默认值总是显示数字

现象 在 Antd Pro 中使用了 Antd Form 来编辑报修单的进度状态。 但是在选中一条记录,在使用 Select 组件进行编辑时,总是显示状态码,而非状态描述。 看起来是之前遇到过的,select value 的整型与字符串的转换问题。 Warning: children should be Select.Option or Select.OptGroup instead of Option 原始代码: <Form.Item name="status" label="状态"> <Select> <Optio ...

阅读全文...

Antd Form 一行多个 Form.Item 组件

在使用 Antd Form 时,当 Form 的宽度很宽,一行只显示一个 input 时,感觉空间有点浪费。 一行能同时显示两个 input 输入框就好了,例如,同时显示: 姓名 电话 Form 中的示例 <Row gutter={24}>{getFields()}</Row> <Row> <Col span={24} style={{ textAlign: 'right' }}> <Button type="primary" htmlType="submit ...

阅读全文...

Antd Pro 列表页 ProTable 自定义搜索字段

例如,我想在 Antd Pro 列表页的查询区域去掉一些字段,不希望这些字段参与搜索。 参考 ProTable 组件的文档: https://procomponents.ant.design/components/table 实际上在设置 columns 时,就可以通过 column 配置来设置一个字段是否可以被搜索。 代码示例 const columns: ProColumns<API.Article>[] = [ { title: "标题", dataIndex: "title", valu ...

阅读全文...

React Quill 富文本编辑器中图片上传服务端

在 Antd Pro 中使用 React Quill 富文本编辑器,上传图片默认会转换成 Base64,然后上传服务器,保存到数据库中。 但是如果图片过大,就非常不适合在数据库中存储,同时也会占用服务器的带宽。 需要改造成 React Quill 上传图片到服务器,然后转发到七牛云 CDN,将链接返回前端。 工具栏显示上传图片 如何自定义 React Quill 的工具栏功能列表? const toolbarContainer = [ ['bold', 'italic', 'underline', ], [{ 'color': [] }, { ' ...

阅读全文...

Ant Design Upload 组件上传图片到 Golang 服务端

上传组件 Antd Pro 中使用 Ant Design 的 Upload 上传组件 https://ant.design/components/upload-cn 图片预览还是有必要的,所以先参考“图片墙”那个示例代码。 封装!解决状态无法重置的问题 简单将示例中的代码复制到了 Ant Design Form 中,但是在 Antd Pro Table List 中切换数据行时,会发现图片预览一直是上一个已上传的图片。即,组件状态没有重置。 看了网上大哥们的实现,我发现都是将 Upload 再封装为一个组件。 然后在 Form Item 中使用该组件。 这样遵循 Form Item 的规范,就 ...

阅读全文...