ReactJS

2021-05-17 · 阅读 7731 · 字数 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 · 阅读 3647 · 字数 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 · 阅读 2829 · 字数 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 · 阅读 5342 · 字数 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 · 阅读 15629 · 字数 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 · 阅读 7161 · 字数 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 · 阅读 11091 · 字数 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 文件： > ...

阅读全文...

2021-04-30 · 阅读 12638 · 字数 60

编辑 Antd Design Pro V5 项目根目录下文件 src/app.tsx waterMarkProps: { //content: initialState?.currentUser?.name, }, 注释掉 waterMarkProps 中的 content 配置，即可。 参考 https://procomponents.ant.design/components/water-mark 从文档看，即支持文字水印，也支持图片水印。 ...

阅读全文...

2021-04-01 · 阅读 7190 · 字数 665

Ant Design Pro V5 CRUD 页面的基本结构 src/pages/TableList/index.tsx import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; import type { ProColumns, ActionType } from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; const TableList: React.FC = () => { return ( ...

阅读全文...

2021-05-11 · 阅读 8358 · 字数 313

源码参考 Ant Design Pro V5 框架自带的欢迎页。 路由 config/routes.ts { path: '/welcome', name: 'welcome', icon: 'smile', component: './Welcome', }, 菜单图标设置 上面 icon 的图标，可以从 https://ant.design/components/icon-cn/ 页面中选择，然后复制到 icon 配置。 如果想自定义，可以参考： https://pro.ant.design/docs/biz-icon-cn 页面部分 以欢迎页为例 ...

阅读全文...

2022-03-24 · 阅读 8461 · 字数 393

正在开发一套企业客户的管理后台，但是 Django Admin 的界面太简陋， 虽然简洁清爽，但是看起来不值钱。。。 本想用 vue-element-admin 来替代 Django Admin，但是同事说之前用过 Ant Design， 既然没有沟通成本，我也想尝试一下 Ant Design Pro 做管理后台。毕竟界面看起来非常高大上。 管理工具安装 首先使用 nvm 安装最新的 node LTS 版本。 然后安装 npm, yarn 等工具。 sudo apt install npm // node 自带了 npm，实际上不需要单独安装 npm install yarn tyarn ...

阅读全文...

2015-12-12 · 阅读 8981

主要功能，点击右下角的“返回页首”按钮，自动回到当前网页的头部。 组件源码地址 back2top on Github 实际效果参考本页的右下角 链接 更方便的复用 目标： 只需要引入 react.js. (当前版本 0.12.2) 如何做到版本兼容性测试? 为了减少引用依赖，将 JSXTransformer.js 剔除，就需要将 React JSX code 转换成标准的 js 代码。 首先安装工具 sudo npm install -g react-tools 当 JSX 发生修改时，做实时转换 jsx --watch src/ build/ 可以缩写成 jsx -w src/ buil ...

阅读全文...

2015-12-12 · 阅读 13013

为何学习 React 实在无法忍受 BackboneJS View 的 “原始”，于是决定学习一下 Facebook 出品的 React， 然后用 React 替换掉 BackboneJS 的 View。 React 的目标是创建可复用的 UI 组件，类似于 AngularJS 的 directive 的概念。 这点非常好，我对 BackboneJS 最大的不满来自于 View 过于自由，团队合作的时候容易写出无法维护的 View, 且不可单元测试。 因为这点，我对 React 一见钟情；React 的文档放在 github 上，避免了被墙，好感再次增加。 读完 颠覆式前端UI开发框架：Rea ...

阅读全文...