分类下相关文章
2021-05-31 · 阅读 7160 · 字数 730
在 Antd Pro 中使用 React Quill 富文本编辑器，上传图片默认会转换成 Base64，然后上传服务器，保存到数据库中。 但是如果图片过大，就非常不适合在数据库中存储，同时也会占用服务器的带宽。 需要改造成 React Quill 上传图片到服务器，然后转发到七牛云 CDN，将链接返回前端。 工具栏显示上传图片 如何自定义 React Quill 的工具栏功能列表？ const toolbarContainer = [ ['bold', 'italic', 'underline', ], [{ 'color': [] }, { ' ...
2021-05-29 · 阅读 2964 · 字数 1085
上传组件 Antd Pro 中使用 Ant Design 的 Upload 上传组件 https://ant.design/components/upload-cn 图片预览还是有必要的，所以先参考“图片墙”那个示例代码。 封装！解决状态无法重置的问题 简单将示例中的代码复制到了 Ant Design Form 中，但是在 Antd Pro Table List 中切换数据行时，会发现图片预览一直是上一个已上传的图片。即，组件状态没有重置。 看了网上大哥们的实现，我发现都是将 Upload 再封装为一个组件。 然后在 Form Item 中使用该组件。 这样遵循 Form Item 的规范，就 ...
2021-05-28 · 阅读 5948 · 字数 187
今天发现 Antd Pro 的开发服务经常挂掉，浏览器中显示： Disconnected from the devServer, trying to reconnect... 看起来是由于没有处理后台 404 的错误，导致前端 node 服务挂掉。。。 [HPM] Error occurred while trying to proxy request /api/upload-image from localhost:8000 to http://localhost:8088 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_c ...
2021-12-24 · 阅读 11520 · 字数 466
需求 能方便整合入 Ant Design Form 中 能支持，或者方便扩展，将富文本编辑器中的图片上传至七牛云存储中 备选方案列表 Ant Design 官方推荐了两个： https://ant.design/docs/react/recommendation-cn React Quill。首选推荐。测试了一圈，确实这个最靠谱。 Braft Editor。有 Ant Design 的集成说明文档：https://braft.margox.cn/demos/antd-upload 安装 Braft Editor tyarn add braft-editor 参考文档： https:/ ...
2021-05-26 · 阅读 5022 · 字数 107
默认在 Ant Design Pro 中使用 React Quill 富文本组件时，并没有默认高度。 看起来不太舒服。所以想加上高度限制： 最低高度限制 最高高度限制 实现 在自定义的 Form 组件目录下，新建一个 css 文件，例如 CreateForm.css. .ql-editor{ min-height: 200px; max-height: 500px; } 然后在组件中引入 css 文件即可 import './CreateForm.css'; ...
2021-05-25 · 阅读 5453 · 字数 670
这次基本是边修改 Antd Pro 模板，边学习 reactjs 的情况下，摸索新建、更新复用 Modal Form 的使用的。 我觉得能实现 Form 新建、编辑功能，基本上 reactjs 就算是入门了。。。 上手时间成本 看 reactjs tutorial 一个小时 尝试修改 TableList 的代码改成标准 Ant Design 组件，删除 Pro Components 组件，半天 默认新建 Modal 用的 ModalForm 的局限性 ModalForm 是 ProForm 的一种，即 Pro Components 的组件之一，参考 https://procomponent ...
2021-05-25 · 阅读 2126
props 为传入组件的参数，全称 properties state 为内部状态管理 基于 class 的 react 组件：onClick={() => alert('click')} 回调函数用大括号包裹，并且必须使用剪头函数。参考 value={this.state.squares[i]}，可见react jsx语法是用大括号来包裹 html 属性变量，而 vue 则是在属性名前加：，都是为了显式区分属性变量。而在基于函数的组件中，onClick={props.onClick}，就不需要箭头函数的写法了。 浏览器辅助插件 React Devtools extension Lift ...
2021-05-17 · 阅读 8138 · 字数 121
Antd Pro 列表页中报了一条警告信息： devScripts.js:6523 Warning: Each child in a list should have a unique "key" prop. 虽然是 ProTable 组件，但是文档里并没有提到这个属性，需要参考 ant design 的 Table 组件 https://ant.design/components/table-cn/ rowKey：表格行 key 的取值，可以是字符串或一个函数 应该是作为 row 的唯一标识的。 修改成对应的后台数据返回 key 就可以了，例如： <ProT ...
2021-05-17 · 阅读 6528 · 字数 437
由于我用 Antd Pro 开发的管理后台只需要中文，并不需要其他语言的翻译，所以代码里就没有使用翻译组件。 但是在运行时，浏览器一堆警告信息： devScripts.js:6523 [React Intl] Missing message: "menu.知识库" for locale: "zh-CN", using default message as fallback. 消除 i18n 翻译警告的方法 编辑 config/config.ts： 将 layout 配置中的 locale 注释掉： layout: { // https:/ ...
2021-05-14 · 阅读 2999 · 字数 189
golang gin 的报 400 错误 var article models.Article if err := c.ShouldBindJSON(&article); err != nil { log.Println(err) c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } err 显示 EOF。查了一下，当 post 的数据是空时，会报这个错误。 antd pro umi request 的写法 起初是参考示例里的写法： export async fun ...
2021-10-25 · 阅读 2225 · 字数 434
Ant Design Pro 中经常看到这样的代码，例如 table list 中： const AdminUsers: React.FC = () => { /** 新建窗口的弹窗 */ const [createModalVisible, handleModalVisible] = useState<boolean>(false); const [currentRow, setCurrentRow] = useState<API.AdminUser>(); ... } 这里面的 useState 是什么意思呢？ useState 的用法 ht ...
2021-05-12 · 阅读 4762 · 字数 358
管理员用户表 admin_user id username password last_login_at 创建第一个管理员 方案： 命令行工具 （golang 需要编译，提供一个命令行工具麻烦） 网页接口 （不安全） 自动内置一个管理员，服务启动时（或者打开登录页时）判断如果没有管理员，就自动创建一个。登录后修改密码。 综合来看，第三种方案更合适。 管理后台 TODO 清单 done: 登录接口 done: 新增默认管理员 done: 生成 token done: golang gin token 校验 middleware done: currentUser 接口，获取用户信息 d ...
2021-05-11 · 阅读 13818 · 字数 211
想使用 umi request 的拦截器为请求统一加上 jwt token，但是参考 ant design pro V5 的文档，始终不生效。 无效的配置 如果参考官方的文档 https://beta-pro.ant.design/docs/request-cn， 修改 src/app.tsx import type { RequestConfig, RunTimeLayoutConfig } from 'umi'; export const request: RequestConfig = { errorHandler, // 新增自动添加AccessToken的请求前拦截器 ...
2021-08-06 · 阅读 6269 · 字数 978
Antd Design Pro 的登录逻辑在哪里 > grep "其他登录方式" -r src/ src/locales/zh-CN/pages.ts: 'pages.login.loginWith': '其他登录方式 :', src/pages/user/Login/index.tsx: <FormattedMessage id="pages.login.loginWith" defaultMessage="其他登录方式" /> 查看 src/pages/user/Login/index. ...
2021-05-14 · 阅读 10050 · 字数 576
概要 ant-design-pro 关闭 mock 的方法为，修改 config/proxy.ts 的 dev 配置，然后启动服务时使用： tyarn start:dev 替代： tyarn start 详细分析 首先 mock 数据在哪里？通过搜索关键字居然没搜到，原来接口返回的字段内容都是通过 js 动态生成的。 文件：mock/listTableList.ts export default { 'GET /api/rule': getRule, 'POST /api/rule': postRule, }; mock 目录下针对不同的功能有不同的 mock 文件： > ...
| 生活 | 跑步 清单 足球 鲁班 探索 孤独的美食家 驾驶 电视剧 收纳 奶爸 健康 game 电影 周末 |
|---|---|
| Geek | 健身 Laravel Git Vim MySQL Linux UI Windows SVN 纪录片 管理 Shell 游记 工具 手机 BackboneJS 自建博客 Mac DNS Tornado CDN Django Python AngularJS 理财 前端 Nginx 爬虫 Redis Javascript Browser 浏览器 推广 OAuth CSS PHP Social Networks 安全 运维 创业 杂记 VueJS Android Image IDE Java ReactJS 数据分析 SQLite RESTful 读书笔记 家电 ecshop Vagrant wordpress docker SEO GTD magento mongodb nodejs weex 冷知识 ruby iOS 微信小程序 AI CMS 快应用 backpack 广告联盟 OA 短信 UWP Win CSharp Tampermonkey graphviz 钉钉 WPS 数据字典 微信公众号 Fuchsia Adobe XD SQL Server thinkphp 代码规范 商业模式 Flutter 头痛的问题 serverless 视频制作 国际化 golang 服务器 Kotlin 网站建设 5G 笔记本 图片 spark spring 物联网 InfluxDB 图像识别 postgre rust |
| 成长的烦恼 | 闲言碎语 待产 不睡觉 写作 程序员 孙心然语录 原则 大鸿语录 |
| 地球 | 植物 时间 中文 赚钱 国家地理 烟台 一生伏首拜阳明 emoji 弟子规 英文 国际贸易 |