【Ant Design Pro】快速上手

初始化

初始化脚手架:快速开始

官方默认使用 umi4,这里文档还没有及时更新(不能像文档一样选择 umi 的版本),之后我选择 simple。

然后安装依赖。

在 package.json 中:

    "start": "cross-env UMI_ENV=dev max dev","start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",

这里 start 模式使用了前端项目内的 mock 数据,而 start:dev 没有使用mock 数据,需要真实的后端接口。

Pro 的底座是 umi,umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力,同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。

以前 umi/plugins 里的插件已经内置到 @umijs/plugins 了,可以通过 plugins: [‘@umijs/plugins/dist/*’] 用。插件都需要兼容 umi4 才能用,插件 api 有变化,没兼容的是用不了的。比如 umi-ui 在 umi4 中并不支持 issues。

umi-ui 还是很好用的,不知道什么时候可以支持 umi4.

项目瘦身

移除国际化

在这里插入图片描述

然后也可以把 src/locale 文件夹删掉了。

在这里插入图片描述

  • config 配置
  • defaultConfig 默认配置
  • routes 路由
  • proxy 代理配置
  • oneapi 也是和 api 相关的,可以删掉

然后可以删除页面和对应的路由。

在这里插入图片描述

这里的 swagger 接口文档工具也可以删掉。

前后端联调

antd pro 请求 或者是 umi 请求

查看 antdpro 官网,发现请求相关配置在 app.tsx 中。

或者也可以打开 antd pro 的 github 源码,发现 app.tsx 中关于请求的配置:

/*** @name request 配置,可以配置错误处理* 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。* @doc https://umijs.org/docs/max/request#配置*/
export const request = {...errorConfig,
};

我们可以在 app.tsx 中写自己请求的相关配置。

import { RequestConfig } from 'umi';export const request: RequestConfig = {timeout: 1000,errorConfig: {},middlewares: [],requestInterceptors: [],responseInterceptors: [],errorHandler,// ...
};

但是他这里的配置明显是不全的,所以我们需要逐层进入源码进行查找。然后就可以发现很多配置(比如 prefix,timeout等)。

或者也可以看官方文档(但是直接看源码会更快更准一些):

在这里插入图片描述

这是最新版的 umi,不同于上个版本,上一个版本应该是 透传的 umi-request 。

直接在 github 中看 umi-request,发现更新也已经是三年前了。

配置代理

直接使用 antdpro 提供的 config\proxy.ts 即可。

然后前端统一在 api.ts 中加上 api:

在这里插入图片描述

同时后端也都加上 /api 前缀:

在这里插入图片描述

(虽然前后端同时都不加 /api 应该也可以😂)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/875992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卷积的意义及其派生(一)

1.卷积的意义 1.1从LTI的角度看 卷积最开始其实是信号处理中用来描述线性移不变系统Linear time-invariant systems的。线性,表明可以叠加,信号可以拆分成脉冲的响应;时不变,指信号不随着时间的迁移改变,意味着能量守…

【时间数据预处理】利用pandas对缺失的时间日期值进行补全

resample函数 需求: unique_id ds y BE 2024/5/15 1:10 64.792 BE 2024/5/15 1:11 65.092 BE 2024/5/15 1:12 69.166 BE 2024/5/15 1:13 61.688 BE 2024/5/15 1:14 15984.668 BE 2024/5/15 1:15 7946.808 BE 2024/5/15 1:20 85.256 BE 2024/5/15 1:22 87.256 BE 2…

【iOS】——通知机制及底层原理

通知传值概要 通知传值可以跨越多个界面进行传值,一般用于后一个界面向前一个界面传值。 通知传值支持多个接收者,多个对象可以同时接收同一个通知并进行处理。这样可以实现一对多的通信,方便跨多个对象进行值传递。 使用步骤 1.在发送者中…

ExcelJS:轻松实现Excel文件的读取、操作与写入

文章目录 发现宝藏1. 简介2. 安装3. 创建工作簿4. 设置工作簿属性5. 添加工作表6.删除工作表7.访问工作表8. 列操作9. 行操作10. 单元格操作 发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝…

Latent Factor Analysis via Dynamical Systems:LFADS (Nature methods 2018)

Nature Methods:https://www.nature.com/articles/s41592-018-0109-9 LFADS Run Manager for Matlab:https://lfads.github.io/lfads-run-manager/ 目录 Single session:假设:方法:结果: Multi-sessions:假设&#xff…

【C++】位运算:两整数之和

1.题目 2.算法思路 本题不能只用 -,那大概率用到位运算符。 异或的作用是无进位相加,所以需要通过异或运算(^)来替代加法运算,但是我们无法确定进位的信息。所以需要与运算(&)来得到进位的…

【Android】Activity生命周期与五种启动模式

文章目录 生命周期返回栈Activity状态生命周期方法 启动模式standard模式singleTask模式singleTop模式singleInstance模式singleInstancePerTask模式配置方式 生命周期 返回栈 每个Activity的状态由它在Activity栈(又叫“回退栈back stack”)中的位置决…

docker容器与宿主机时间同步

问题描述&#xff1a;容器时间与宿主机时间不同步 # 查看主机时间 [rootlocalhost ~]# date 2020年07月27日 星期三 22:42:44 CST# 查看容器时间 # docker exec -it <containerid> /bin/bash rootb43340ecf5ef:/# date Wed Jul 27 14:43:31 UTC 2020 解决方法&#xf…

filebeat把日志文件上传到Es中配置(ES8版本)

默认的filebeat配置会把所有的索引都放到一个文件中&#xff0c;通过摸索发现可以自定义索引的名字、模板、生命周期 &#xff08;重点注意&#xff09;该配置文件只适应于ES版本是8&#xff0c;不适应于其他版本 /app/logs/info.log日志文件为JSON格式自定义索引生命周期名为…

MySQL高性能读写分离实战

介绍 我的上一篇文章实现了mysql的主从复制结构&#xff0c;今天这篇继续将如何实现读写分离。 读写分离是指&#xff1a;针对数据库的写操作&#xff08;插入、更新、删除等&#xff09;访问主数据库&#xff0c;读操作访问从数据库。 因为一般网站的读请求的数量是远远大于…

QLabel 添加滚动条

方式1 直接创建label QLabel *label new QLabel;// 加载图片QPixmap pixmap("path_to_your_image.jpg"); // 替换为你的图片路径label->setPixmap(pixmap);// 创建一个QScrollArea&#xff0c;并设置其为垂直滚动QScrollArea *scrollArea new QScrollArea;scro…

《数据结构:顺序实现二叉树》

文章目录 一、树1、树的结构与概念2、树相关术语 二、二叉树1、概念与结构2、满二叉树3、完全二叉树 三、顺序二叉树存储结构四、实现顺序结构二叉树1、堆的概念与结构2、堆的实现3、堆的排序 一、树 1、树的结构与概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff…

【Python机器学习】决策树的构造——划分数据集

分类算法除了需要测量信息熵&#xff0c;还需要划分数据集&#xff0c;度量划分数据集的熵&#xff0c;以便判断当前是否正确划分了数据集。 我们将对每个特征划分数据集的结果计算一次信息熵&#xff0c;然后判断按照哪个特征划分数据集是最好的划分方式。 想象一个分部在二…

4-4 数值稳定性 + 模型初始化和激活函数

数值稳定性 这里的 t t t表示层&#xff0c;假设 h t − 1 h^{t-1} ht−1是第 t − 1 t-1 t−1层隐藏层的输出&#xff0c;经过一个 f t f_{t} ft​得到第 t t t层隐藏层的输出 h t h^{t} ht。 y y y表示 x x x进来&#xff0c;第一层一直到第 d d d层&#xff0c;最后到一个损…

域名解析流程:从浏览器输入URL到网页加载的全过程

本文概括了用户从在浏览器中输入一个网址到最终浏览器加载并显示网页的整个流程&#xff0c;特别强调了DNS解析的关键作用。 当用户在浏览器中输入一个网址&#xff08;HTTP请求&#xff09;并寻找对应的IP地址时&#xff0c;会经历以下流程&#xff1a; 1. **输入URL**&…

研究生选择学习Android开发的利与弊?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Android的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;产品经理可以学学Axure快…

vscode远程免密登入

1、windows (1) 点击左下角 ->将当前窗口连接到主机…->&#xff08;配置ssh文件&#xff0c;点击或者指定&#xff09;->按这个格式添加 (2) 在cmd命令窗口&#xff1a;ssh-keygen -t rsa (-C “name”) #这个name是远程linux的用户名&#xff0c;这里也可以不加-C…

H264编码器实现-帧内预测之像素值预测

前言 本文所介绍的像素值预测&#xff0c;是指在帧内预测总体流程中的预测块每个像素值的推导过程。当我们已知向量像素的重建值的时候&#xff0c;我们就可以对当前预测块进行像素值预测。该过程得到的结果将与源像素值相减得到残差&#xff0c;为后续变换量化提供数据来源。…

Godot入门 04平台设计

新建创景&#xff0c;添加AnimatableBody2D节点。 添加Sprite2D节点 拖动图片 剪裁图片&#xff0c;吸附模式&#xff1a;像素吸附 添加CollisionShape2D&#xff0c;设置实际形状为矩形 重命名AnimatableBody2D节点为Platform&#xff0c;保存场景&#xff0c;拖动platform场景…

C#初级——条件判断语句、循环语句和运算符

条件判断语句 简单的条件判断语句&#xff0c;if()里面进行条件判断&#xff0c;如果条件判断正确就执行语句块1&#xff0c;如果不符合就执行语句块2。 if (条件判断) { 语句块1 } else { 语句块2 } int age 18;if (age < 18){Console.WriteLine("未…