Java知识点整理 12 — 前端 Ant Design Pro 初始化模板使用

一. 项目初始化

Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端设计框架,致力于在设计规范和基本组件的基础上,继续向上构建,提炼出典型模板或配套设计资源,进一步提升企业级中后台产品设计研发过程中的用户体验。

Ant Design Pro 力求于开箱即用,提供了完整的脚手架,包括国际化、权限、mock、网络请求等各方面,大幅提升开发效率,减少学习成本。下图为整体架构:

官方地址:开始使用 - Ant Design Pro

初始化命令:

npm i @ant-design/pro-cli -g
pro create myapp

在项目源目录中使用 cmd 或 Powershell 打开终端。

版本选择:

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simplecomplete

simple 版本提供了框架运行的基本内容,complete 版本包含所有区块,不适合当作基础模板进行二次开发。

此处选择 simple 版本,后续可进行二次开发。下载完成后在源目录中能看到模板代码文件夹。

安装依赖包:

1. yarn / yarn install
2. npm install

打开项目后在终端使用 yarn 或 npm 包管理器均可。二者的区别可参考该文章。

下载完成后,可以看到生成的依赖包。

启动项目:

初始化模板中提供了 mock 模拟数据供开发者测试,选择 start 方式启动,包管理器此处选择了npm,可根据自己下载的依赖包调整。

 启动后,访问 http://localhost:8000,即可打开前端初始化项目。

由于选择了 start 启动方式,因此可以使用模板自带的 mock 模拟数据测试。

用户名: admin
密码: ant.design

开发规范设置:

勾选 Prettier 格式化工具,用于统一代码格式。

勾选 Eslint 保持代码风格,减少代码出错。

二. 模板瘦身 

1. 移除冗余模块

每次移除后重启项目,以检查能否正常运行,如果无法正常运行直接回滚,防止模板出错。

(1)移除 husky

用来在提交前检查代码的规范,保证代码一致性,通常用于团队协作,个人项目可移除。删除文件夹后也将 husky 对应的启动命令删除。

(2)移除 mock

mock 是模板自带的模拟数据,但我们自己的项目有真实的后端接口要对接,因此可以移除。

(3)移除 icons 和 manifest.json

图标和适配移动端所需要的 Json,直接删除即可。

 (4)移除 CNAME

官方提供的域名映射,与自己项目的域名无关,可移除。

(5)移除国际化

国际化包中集成了多种语言,如中文、英文、日语等。通常情况下,自己的上线项目仅对本国用户开放,并且如果访问量较少,也无需国际化配置,为了减轻项目体积,提升加载速度,可以选择移除。

模板的 package.json 命令执行中自带移除国际化的脚本 i18n-remove,直接执行即可。

执行后手动删除  locales 目录即可。

如果出现报错,大概率是国际化中对应的某些参数或方法被删除,导致文件找不到所需参数。此处,报错 ./src/components/index.ts 中 export 的 selectLang 参数找不到,删除后即可正常运行。

打开页面后发现,右上角处的语言切换功能消失。国际化移除成功。 

(6)移除单元测试

删除 tests 目录和对应的测试命令即可。

 (7)移除 types

我们自己的项目会用 OpenAPI 规范去生成接口和类型。

(8)移除 swagger

 (9)移除 openapi.json

我们有自己的后端接口地址,不用模板自带的。

2. 生成请求代码

修改 config.ts 中 OpenAPI 部分的代码,执行后即可查看生成结果:

  openAPI: [{requestLibPath: "import { request } from '@umijs/max'",schemaPath: 'https://localhost:8081/api/v2/api-docs',projectName: 'khr-backend',},],

3. 全局请求处理

修改 requestErrorConfig.ts 文件名称为 requestConfig.ts。

修改后将 app.tsx 中 errorConfig 替换为 requestConfig。

创建 index.ts,区别开发环境和部署环境。

引入环境变量,根据环境变量区分不同环境请求地址。

删除模板自带的错误处理,过于复杂。

修改请求拦截器部分的代码:

 删除了拼接 Token 的部分,一般如果要使用 Token,可以直接在 Authorization 请求头中添加。

  // 请求拦截器requestInterceptors: [(config: RequestOptions) => {// 拦截请求配置,进行个性化处理。return config;},],

修改封装好的响应拦截器:

// 响应拦截器
responseInterceptors: [(response) => {// 请求地址const requestPath: string = response.config.url ?? '';// 响应const { data } = response as unknown as ResponseStructure;if (!data) {throw new Error('服务异常');}// 错误码处理const code: number = data.code// 未登录,且不为获取用户登录信息接口if (code === 40100 &&!requestPath.includes('user/get/login') &&!location.pathname.includes('user/login')) {// 跳转至登录页window.location.href = ` /user/login?redirect=${window.location.href}`;throw new Error('请先登录');}if(code !== 0){throw new Error(data.message ?? '服务器错误')}return response;},
],

4. 临时登录

修改 app.txs 中的 getInitialState,获取用户初始化状态,先利用 Mock 模拟数据,替换后将报错的 username、avatar等全局替换即可。

export async function getInitialState(): Promise<InitialState> {const initialState: InitialState = {currentUser: undefined,};// 如果不是登录页面,执行const { location } = history;if (!location.pathname.startsWith(loginPath)) {// 获取当前登录用户const res = await getLoginUser();initialState.currentUser = res.data;const mockUser:API.LoginUserVO = {userAvatar: '提供一个图片地址',userName: 'khr',userRole: 'admin',};initialState.currentUser = mockUser;}return initialState;
}

先用 @ts-ignore 忽略 ts 类型提示错误。

移除无用配置,如 setting drawers。

注释请求后端的代码,访问主页面不会再重定向到登录页。

5. 基础布局

修改 src/components/Footer/index.tsx 中的内容,可以替换页面底部信息,如个人博客、GitHub地址等。

6. 用户登录

移除手机号登录方式,验证码错误也一并删除。

移除其它登录方式和无用模块,清除不需要导入的模块和包,按 ctrl + alt + o。 

修改 logo.svg 自己替换图片,标题与副标题也是。

移除错误提示,修改模板的用户名 username 和密码 password 为 userAccount 和 userPassword。

移除其它不必要代码。

修改登录后触发的事件。

  const handleSubmit = async (values: API.LoginParams) => {try {// 登录const msg = await login({...values,type,});if (msg.status === 'ok') {const defaultLoginSuccessMessage = '登录成功!';// 保存已登录用户信息setInitialState({...initialState,currentUser:res.data)}const urlParams = new URL(window.location.href).searchParams;history.push(urlParams.get('redirect') || '/');return;}// 如果失败去设置用户错误信息} catch (error) {const defaultLoginFailureMessage = '登录失败,请重试!';console.log(error);message.error(defaultLoginFailureMessage);}};

之前由于初始化的时候获取的还是模拟的状态,因此刷新后,用户状态会失效。修改 app.tsx 的代码 。

export async function getInitialState(): Promise<InitialState> {const initialState: InitialState = {currentUser: undefined,};// 如果不是登录页面,执行const { location } = history;if (!location.pathname.startsWith(loginPath)) {// 获取当前登录用户try{const res = await getLoginUser();initialState.currentUser = res.data;} catch (error:any){}//const mockUser:API.LoginUserVO = {//   userAvatar: '提供一个图片地址',//   userName: 'khr',//   userRole: 'admin',//};// initialState.currentUser = mockUser;}return initialState;
}

修改模板的退出登录接口,改为自己后端的退出登录方法。

给登录按钮添加跳转链接。

根据后端的接口返回相对应的错误信息,再次修改 index.tsx 的 handleSubmit 方法。

  const handleSubmit = async (values: API.LoginParams) => {try {// 登录const msg = await login({...values,type,});if (msg.status === 'ok') {const defaultLoginSuccessMessage = '登录成功!';// 保存已登录用户信息setInitialState({...initialState,currentUser:res.data)}const urlParams = new URL(window.location.href).searchParams;history.push(urlParams.get('redirect') || '/');return;// 如果失败去设置用户错误信息} catch (error: any) {const defaultLoginFailureMessage = `登录失败,请重试!${error.message}`;console.log(error);message.error(defaultLoginFailureMessage);}};

 7. 其它

修改网页 title 和 logo。

除此之外,还有其它一些修改模板内容的操作,不一一列举,可以在具体开发时根据业务后端内容实时修改。 当找不到想要修改的内容时,可以使用 Ctrl + Shift + F 进行全局搜索。

可以从资源目录中直接下载 Ant Design Pro 前端初始化模板(仅移除了国际化),也可以从官网中下载初始版本然后按照上述步骤完成初始化与瘦身等。

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

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

相关文章

用MySQL和navicatpremium做一个项目—(财务管理系统)。

1 ER图缩小的话怕你们看不清&#xff0c;所以截了两张图 2 vsdx绘图结果 3DDL和DML,都有点长分了好多次上传&#xff0c;慢慢看 DDL -- 用户表 CREATE TABLE users (user_id INT AUTO_INCREMENT PRIMARY KEY COMMENT 用户ID,username VARCHAR(50) NOT NULL UNIQUE COMMENT 用…

SpringCloud分布式微服务链路追踪方案:Skywalking

一、引言 随着微服务架构的广泛应用&#xff0c;系统的复杂性也随之增加。在这种复杂的系统中&#xff0c;应用通常由多个相互独立的服务组成&#xff0c;每个服务可能分布在不同的主机上。微服务架构虽然提高了系统的灵活性和可扩展性&#xff0c;但也带来了新的挑战&#xf…

vue的学习--day2

如有错误&#xff0c;烦请指正~ 目录 一、什么是单页面应用程序 二、使用工具&#xff1a;node.js 三、工具链 易错点 一、什么是单页面应用程序 多个组件&#xff08;例如登录、注册等以vue结尾的都叫做组件&#xff09;在一个页面显示&#xff0c;叫单页面应用…

【软件测试】白盒测试与接口测试详解

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、什么是白盒测试 白盒测试是一种测试策略&#xff0c;这种策略允许我们检查程序的内部结构&a…

Vite: Esbuild的使用与其插件开发

概述 作为 Vite 的双引擎之一&#xff0c;Esbuild 在很多关键的构建阶段(如 依赖预编译 、 TS 语法转译 、 代码压缩 ) 让 Vite 获得了相当优异的性能&#xff0c;是 Vite 高性能的得力助手无论是在 Vite 的配置项还是源码实现中&#xff0c;都包含了不少 Esbuild 本身的基本概…

你知道大数据信用分低需要如何改善吗?

在当今社会&#xff0c;大数据信用分已经成为个人信用评估的重要指标之一。然而&#xff0c;有时候我们会发现自己的大数据信用分较低&#xff0c;这可能会对我们的信用状况产生负面影响。那么&#xff0c;如何改善自己的大数据信用分呢?本文将从信用分低的原因进行分析&#…

【Micro-ROS学习】

Micro-ROS 是专为 ROS 2 设计的&#xff0c;它允许在微控制器&#xff08;microcontrollers&#xff09;上实现ROS 2的功能。Micro-ROS 从 ROS 2 架构优化而来&#xff0c;目的是让那些资源有限的嵌入式设备也能够接入ROS 2生态系统&#xff0c;享受ROS 2带来的标准化通信、模块…

java简易计算器(多种方法)

parseDouble() 方法属于 java.lang.Double 类。它接收一个字符串参数&#xff0c;其中包含要转换的数字表示。如果字符串表示一个有效的 double&#xff0c;它将返回一个 double 值。 应用场景 parseDouble() 方法在以下场景中非常有用&#xff1a; 从用户输入中获取数字&a…

国内AI行业对GPU算力的需求有多大?

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;算力作为支撑其持续进步的核心动力&#xff0c;在国内的重要性日益凸显&#xff0c;无论是海外还是国内&#xff0c;AI算力行业都呈现出蓬勃发展的态势&#xff0c;而国内对于AI算力的需求更是呈现出爆发式的…

离散傅里叶变化

傅里叶变换 对傅里叶变换了解不是很清楚的朋友推荐一下这个帖子&#xff0c;讲得很详细 傅里叶变换 源码 先看源码链接 #include "opencv2/core.hpp" #include "opencv2/imgproc.hpp" #include "opencv2/imgcodecs.hpp" #include "open…

从零开始了解GPT-4o模型:它是如何工作的?

人工智能&#xff08;AI&#xff09;技术正以惊人的速度发展&#xff0c;其中最引人注目的是OpenAI发布的GPT-4o模型。作为GPT系列的新成员&#xff0c;GPT-4o在多模态输入处理和响应速度上取得了重大进展。本文将深入探讨GPT-4o的工作原理&#xff0c;帮助您全面了解这一尖端A…

MySQL实训

项目名称与项目简介 股票交易系统是一个综合性的金融服务平台&#xff0c;它提供了股票买卖、交易查询、用户管理、股票信息管理以及资金账户管理等功能。系统旨在为用户提供一个安全、高效、便捷的股票交易环境&#xff0c;让用户能够实时掌握市场动态&#xff0c;做出合理的…

模拟物理弧线轨道运动(模拟飞盘,子弹运动)

模拟物理弧线运动&#xff08;模拟飞盘&#xff09; 介绍实现代码总结 介绍 模拟弧线的运动&#xff0c;并且对象始终朝向运动的方向&#xff0c;模拟飞盘子弹的运动轨迹。这里我是没有加重力这么一个概念的&#xff0c;当然了重力其实比较简单可以参考我之前写的模拟抛物线运动…

ubuntu 挂载新硬盘 记录

Ref 安全自动挂载硬盘&#xff0c; https://berylbot.com/archives/mount-disks-ubuntu 挂载新硬盘, https://berylbot.com/archives/mount-disks-ubuntu 1. 检查新硬盘是否被系统识别 lsblk -f 查看所有硬盘的UUID, 其中 mount point 为空则表示尚未挂载的硬盘。 列出所有可用…

ET9中ETTask传递新的Context原理

ET9中ETTask传递新的Context原理 前言 每一个异步函数都会创建两个对象&#xff0c; 第1个是当前异步函数返回值&#xff08;ETTASK&#xff09;对应的ETAsyncTaskMethodBuilder&#xff0c;通过这个类的静态方法Create创建返回&#xff0c;这个builder类中会有一个Task对象&…

idea 自动生成序列化数字

目标&#xff1a;当类继承Serializable后自动生成序列化Uid 网上查了很多说勾选class without ‘serialVersionUID’ 但是我勾选没用 最后发现&#xff0c;我勾选的是Serialization issues里面的配置&#xff0c;要勾选的是JVM languages下的 如下图所示&#xff0c;记录一下…

技术干货|SimLab 电子产品热流体仿真

电子产品热仿真特点有哪些&#xff1f; 结构复杂&#xff0c;电子设备包含几十~上千个元器件 体积小&#xff0c;功率密度高、关注热敏感元器件 多种冷却方式&#xff0c;自然冷却、风扇冷却、液冷、热管等 多维度&#xff0c;芯片级&#xff0c;板级&#xff0c;系统级 单…

昇思25天学习打卡营第03天|张量Tensor

何为张量&#xff1f; 张量&#xff08;Tensor&#xff09;是一个可用来表示在一些矢量、标量和其他张量之间的线性关系的多线性函数&#xff0c;这些线性关系的基本例子有内积、外积、线性映射以及笛卡儿积。其坐标在 &#x1d45b;维空间内&#xff0c;有  &#x1d45b;&a…

ppt模版免费下载网站大全

PPT是我们传达信息、分享知识、展示项目和进行商务沟通的重要工具。一个设计精美、布局合理的PPT不仅能吸引观众的注意力&#xff0c;还能有效提升演讲者的专业形象。PPT模版可以帮助我们高效制作出精美的PPT&#xff0c;下面小编就来和大家分享一些免费无需注册登录就可以直接…

Mysql进阶-索引-使用规则-索引失效情况二(or连接的条件、数据分布影响)

文章目录 1、or连接的条件1.1、展示 tb_user 索引1.2、查询 id10 or age231.3、执行计划 id10 or age231.4、给 age 创建 索引1.4、执行计划 phone17799990004 or age23 2、数据分布影响2.1、查询 tb_user2.2、查询 phone >177999900202.3、执行计划 phone >177999900202…