Ant Design pro 6.0.0 搭建使用以及相关配置

一、背景

在选择一款比较合适的中台的情况下，挑选了有arco design、ant design pro、soybean、vue-pure-admin等中台系统，经过筛选就选择了ant design pro。之前使用过arco design 搭建通过组件库拼装过后台管理界面，官方文档也比较全，但是想着再尝试其他的框架，于是就没继续使用arco design组件库了，而选择尝试ant design pro中台。

二、准备环境

技术栈
前端
Node.js 18.16.1
node版本管理 nvm 1.1.12
框架 Ant Design Pro 6.0.0
组件库 procomponents 5
ant-design 5.12.5
fetch
路由 Router 6

版本查看：

  ⚡keney ❯❯ nvm -v
1.1.12
  ⚡keney ❯❯ nvm list
  * 18.16.1 (Currently using 64-bit executable)
    16.15.0
    
  ⚡keney ❯❯ node -v
v18.16.1

  ⚡keney ❯❯ npm -v
9.5.1

nvm、node安装教程这里就不展示了
nvm安装教程：
https://blog.csdn.net/m0_54345753/article/details/131653960
https://blog.csdn.net/HuangsTing/article/details/113857145
https://blog.csdn.net/qq_22182989/article/details/125387145

node下载地址：
https://nodejs.org/dist/v13.13.0/
node安装教程：
https://blog.csdn.net/WHF__/article/details/129362462

# 配置node镜像：
node_mirror: https://npmmirror.com/mirrors/node/
# 配置npm镜像：
npm_mirror: https://npmmirror.com/mirrors/npm/

三、项目介绍

3.1 项目结构

|-- fun-bill-front
|   |-- public # 静态资源
|   |   |-- favicon.ico # 图标
|   |-- config  # 配置文件
|   |-- routes.ts  #路由
|   |-- proxy.ts  # 本地代理配置
|   |-- oneapi.json  # 类似swagger接口文档
|   |-- defaultSettings.ts # 主题默认配置
|   `-- config.ts # 配置
|   |-- src # 源码
|   |   |-- .umi # umi配置
|   |   |-- components # 组件
|   |   |-- constant # 常量
|   |   |-- locales # 国际化
|   |   |-- pages # 页面
|   |   |-- services # 请求
|   |   |-- utils # 工具
|   |   |-- access.ts # 权限
|   |   |-- app.tsx # 入口
|   |   |-- global.less # 全局样式
|   |   |-- global.tsx # 全局
|   |   |-- manifest.json # pwa
|   |   |-- requestErrorConfig.ts # 请求错误配置
|   |   |-- serviceWorker.ts # pwa
|   |   `-- types.d.ts # 类型
|   |-- tests # 测试
|   |-- types # 类型
|   |-- .editorconfig # 编辑器配置
|   |-- .env # 环境变量
|   |-- .eslintrc # eslint配置
|   |-- .gitignore # git忽略
|   |-- .prettierignore # prettier忽略
|   |-- .prettierrc # prettier配置
|   |-- jest.config.js # jest配置
|   |-- jsconfig.json # js配置
|   |-- LICENSE # 许可证
|   |-- package.json # 包管理   
|   |-- README.md # 说明

四、项目创建和启动

UmiJS文档：
https://umijs.org/docs/guides/getting-started

ant design pro
https://pro.ant.design/zh-CN ant
design pro组件库：
https://procomponents.ant.design/

注意：在阅读这篇教程，建议先通读ant design pro官方文档，跟着官方文档搭建，然后再看这篇教程文档，会更好理解。

创建项目教程可以参考这篇 ant design pro 6.0搭建教程:
https://blog.csdn.net/nxg0916/article/details/139200391

1、安装和启动

1.1 使用 npm安装全局依赖，并创建ant design pro中台模板

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

1.2 选择 umi@4

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

1.3 安装依赖：
进入到刚刚创建的模板文件夹下，并执行npm install命令安装依赖

$ cd myapp && tyarn
// 或
$ cd myapp && npm install

npm 命令的使用需要配置好国内镜像，这一步在安装node就配置好了，这里就不在赘述了。

1.4 项目启动：

npm run start

这个命令是预览mock功能
为什么使用 nmp run dev命令，可以从 package.json中找到
在这里插入图片描述
对接后端接口，就需要配置后端接口地址

这里本地调试就可以使用一下命令启动（开发环境）

npm run start:dev

停止运行就直接按Ctrl+C

本地构建部署详情，请看附件部分

2、访问

http://localhost:8000/

五、功能介绍

对接后台接口服务，也就是前后端分离的项目的时候

列表使用案例：参考另外一篇文章，或者参考：

后台：
https://github.com/imnxg/shixunapp

后台接口服务：
https://github.com/imnxg/shixunapp-backend

其他案例：
https://github.com/imnxg/RentalManagement

5.1 本地开发代理配置

先修改配置 config\proxy.ts 代理

  // 如果需要自定义本地开发服务器  请取消注释按需调整
  dev: {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/api/': {
      // 要代理的地址，本地后端接口地址
      target: 'http://localhost:8091',
      // 配置了这个可以从 http 代理到 https
      // 依赖 origin 的功能可能需要这个，比如 cookie
      changeOrigin: true,
    },
  },

例如：
后端登录接口：localhost:8091/api/login/account

在src\services\login\loginApi.ts配置接口

/** 登录接口 POST /api/login/account */
export async function login(body: LOGINAPI.LoginParams, options?: { [key: string]: any }) {
  return request<LOGINAPI.LoginResult>('/api/login/account', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

配置了代理后，运行 npm run start:dev 效果如下：

在这里插入图片描述

5.2 菜单权限

src\access.ts

/**
 * @see https://umijs.org/docs/max/access#access
 * */
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canAdmin: currentUser && currentUser.user?.admin,
    canUser: currentUser && currentUser.user?.admin,
  };
}

不同角色访问菜单的权限不同

路由配置：
config\routes.ts

 {
    path: '/admin',
    name: 'admin',
    icon: 'crown',
    access: 'canAdmin', //只有用户有 canAdmin 权限的才能访问该菜单
    routes: [
      {
        path: '/admin',
        redirect: '/admin/sub-page',
      },
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        component: './Admin',
      },
    ],
  },
  {
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './User/UserManager',
  },

5.3. 服务请求

给每个请求地址加上token

/**
 * requestInterceptors 接收一个数组，数组的每一项为一个 request 拦截器。等同于 umi-request 的 request.interceptors.request.use() 。
 */
const authHeaderInterceptor = (url: string, options: RequestConfig) => {
  //console.log('authHeaderInterceptor url, options: ', url, options  );
  //console.log('url.indexOf: ',url.indexOf('/login/') +",", url.indexOf('/login/account'));

  // 如果是登录页面，不需要添加token
  if (url.indexOf('/login/account') !== -1 || url.indexOf('/login/logout') !== -1 || url.indexOf('/register') !== -1) {
    return {
      url: `${url}`,
      options: { ...options, interceptors: true },
    };
  } else {
    const token = getToken();
    // console.log('url, token: ', url, token);
    let authHeader = {};
    // 如果token存在，就添加到请求头
    if (token) {
      authHeader = { Authorization: `Bearer ${token}` };
    }

    return {
      url: `${url}`,
      options: { ...options, interceptors: true, headers: authHeader },
    };
  }
};

/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request: RequestConfig = {
  ...errorConfig,
  // 新增自动添加AccessToken的请求前拦截器
  // requestInterceptors: [demoResponseInterceptors],
  // 新增自动添加AccessToken的请求前拦截器
  requestInterceptors: [authHeaderInterceptor],
  // baseURL: 'https://xxx.xx.top/',
};

注意：使用这token原因：后台接口有token校验，需要在每个请求同时带上Authorization 对应的token，才能校验通过。
否则无法调用后端接口。

附件

项目启动扩展

package.json文件：

	# 启动不使用本地模拟数据
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
    # 开发环境，即配置了后台接口地址
    "start:develop": "cross-env REACT_APP_ENV=dev UMI_ENV=dev max dev",
    # 预生产环境，可配置也不配置
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
    # 生产环境本地调用生产环境接口
    "start:prod": "cross-env REACT_APP_ENV=prod UMI_ENV=prod max dev",
    # 生产环境（正式环境），将配置好的后端接口一同打包
    "build:prod": "cross-env REACT_APP_ENV=prod UMI_ENV=prod max build",

启动和构建命令大致就是这样：

	# 启动不使用本地模拟数据
 	npm run start:no-mock
    # 开发环境，即配置了后台接口地址
    npm run start:develop
    # 预生产环境，可配置也不配置
    npm run start:pre
    # 生产环境本地调用生产环境接口
    npm run start:prod
    # 生产环境（正式环境），将配置好的后端接口一同打包
	npm run build:prod

请求加token和配置生产环境

注意：

本地开发调试时，先注释 /src/app.tsx下

/**
 * @name request 配置，可以配置错误处理
 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
 * @doc https://umijs.org/docs/max/request#配置
 */
export const request: RequestConfig = {
  ...errorConfig,
  // 新增自动添加AccessToken的请求前拦截器
  // requestInterceptors: [demoResponseInterceptors],
  // 新增自动添加AccessToken的请求前拦截器
  requestInterceptors: [authHeaderInterceptor],
  //  baseURL: 'https://in.xxx.top/',
};

本地开发的时候注释掉 baseURL，这里默认的模版没有，我们需要添加才会有。

当你需要打包到生产环境，即上线，那就需要配置你的后台接口地址，并取消注释：

baseURL: 'https://in.xxx.top/',

生产环境

npm run build
# 或者 包括本地配置的生产地址也一同打包
npm run build:prod

使用echar图

在package.json中增加

"@ant-design/charts": "^2.0.3",

或者去官方文档查看相关的添加命令

参考资料

测试文档ant design pro v6
https://beta-pro.ant.design/docs/request-cn#%E8%AF%B7%E6%B1%82%E5%89%8D%E6%8B%A6%E6%88%AA%EF%BC%9Arequestinterceptors

参考：https://zhuanlan.zhihu.com/p/648178323

Ant Design Pro v5
https://www.zhihu.com/people/song-bo-73-14/zvideos?page=7

ant design pro v6设置 token学习：
https://www.bilibili.com/video/BV1bK41197eX/?vd_source=83e20cd531608ce070908ea29997e648
参考：https://www.5axxw.com/questions/simple/yqzki6

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据库SQL语言实战（十）（最后一篇）

数据库SQL语言实战（十）（最后一篇）

目录 前言 练习题 实验八 实验九 题目一 题目二 总结 前言 本篇练习题的重点有两个&#xff1a; 一、测试提交commit和回滚rollback的作用,了解锁等待、授权等知识。 二、学会复制表结构、学会插入数据&#xff0c;特别是学会如何避免重复插入&#xff0c;也就是如何避…
阅读更多...
I2C SPI UART TCP/UDP AD/DA PWM大总结

I2C SPI UART TCP/UDP AD/DA PWM大总结

I2C SPI UART TCP/UDP AD/DA PWM大总结 1. I2C总线描述1.1 基础协议内容1.1.1 通信时序1.1.2 一般通讯时序1.1.3 Burst模式 2. SPI总线2.1 基础协议内容 3. UART4. TCP/UDP5. AD/DA5.1 AD的原理5.2 DA的原理 6. PWM 1. I2C总线描述 I2C的特点&#xff1a;半双工&#xff0c;同步…
阅读更多...
起保停电路工作原理

起保停电路工作原理

一、电路组成 起保停电路由电源保护设备&#xff08;空气开关&#xff09;、交流接触器、启动按钮、停止按钮和用电设备组成。 起保停电路的组成部分通常可分为四个部分&#xff1a; 保护部分&#xff1a;&#xff08;空气开关&#xff09;在电流或电压超出一定范围时自动切断…
阅读更多...
计网期末复习指南：物理层（物理层的任务、香农公式、常用信道复用技术）

计网期末复习指南：物理层（物理层的任务、香农公式、常用信道复用技术）

前言&#xff1a;本系列文章旨在通过TCP/IP协议簇自下而上的梳理大致的知识点&#xff0c;从计算机网络体系结构出发到应用层&#xff0c;每一个协议层通过一篇文章进行总结&#xff0c;本系列正在持续更新中... 计网期末复习指南&#xff08;一&#xff09;&#xff1a;计算机…
阅读更多...
SpringBoot学习小结之RocketMQ

SpringBoot学习小结之RocketMQ

文章目录 前言一、架构设计1.1 架构图1.2 消息1.3 工作流程 二、部署2.1 单机2.2 集群 三、Springboot Producter3.1 准备3.2 pom依赖、yml 配置3.3 普通消息3.4 顺序、批量、延迟消息3.5 事务消息 四、Springboot Consumer4.1 配置4.2 普通Push消费4.3 回复4.4 集群和广播4.5 …
阅读更多...
兆原数通基于Apache SeaTunnel的探索实践

兆原数通基于Apache SeaTunnel的探索实践

随着大数据技术的不断发展&#xff0c;数据同步工具在企业中的应用变得愈发重要。为了满足复杂多样的业务需求&#xff0c;找到一款高效、灵活的数据同步工具变得尤为关键。 在这篇文章中&#xff0c;我们将分享兆原数通研发经理李洪军对Apache SeaTunnel的选择、应用及经验。这…
阅读更多...
蓝桥杯物联网竞赛_STM32L071KBU6_关于size of函数产生的BUG

蓝桥杯物联网竞赛_STM32L071KBU6_关于size of函数产生的BUG

首先现象是我在用LORA发送信息的时候&#xff0c;左边显示长度是8而右边接收到的数据长度却是4 我以为是OLED显示屏坏了&#xff0c;又或者是我想搞创新用了const char* 类型强制转换数据的原因&#xff0c;结果发现都不是 void Function_SendMsg( unsigned char* data){unsi…
阅读更多...
【代码随想录】动态规划经典题

【代码随想录】动态规划经典题

前言 更详细的在大佬的代码随想录 (programmercarl.com) 本系列仅是简洁版笔记&#xff0c;为了之后方便观看 做题步骤 含义公式初始化顺序检查 确定dp数组以及下标的含义递推公式dp数组如何初始化遍历顺序打印dp数组&#xff08;看哪里有问题&#xff09; 斐波那契数 c…
阅读更多...
高性能推理框架漫谈

高性能推理框架漫谈

传统模型分布式推理框架 Tensorflow servingPytorch ServingTriton Server 大语言模型的推理框架 其中&#xff0c; VLLM 后端接入了Ray 框架&#xff0c; 作为调度请求的分发处理&#xff1b;除此之外&#xff0c;还包括Nvidia 最新推出的TensorRT-LLM&#xff0c; 增加了对…
阅读更多...
若依 ruoyi-vue 用户账号前后端参数校验密码 手机号 邮箱

若依 ruoyi-vue 用户账号前后端参数校验密码 手机号 邮箱

前端 <el-dialog :title"title" :visible.sync"open" width"800px" append-to-body><el-form ref"form" :model"form" :rules"rules" label-width"120px"><el-row><el-col :span…
阅读更多...
IOT技术怎么落地?以宝马,施耐德为例

IOT技术怎么落地?以宝马,施耐德为例

物联网技术 物联网&#xff08;IoT&#xff09;技术正逐渐成为数字化工厂转型的核心驱动力。本文将通过实际案例&#xff0c;探讨IoT技术如何促进制造业的数字化转型&#xff0c;提高生产效率&#xff0c;降低成本&#xff0c;并提升产品质量。 1. 物联网技术简介 物联网技术通…
阅读更多...
记录一次Netty的WSS异常

记录一次Netty的WSS异常

概述 业务场景 应用通过 WSS 客户端连接三方接口。在高并发压测时&#xff0c;出现了请求服务器写入失败的异常&#xff0c;该异常是偶发&#xff0c;出现的概率不到千分之一&#xff0c;异常如下图所示。 问题概述 注意&#xff1a; 因为握手是通过 http 协议进行的。所以…
阅读更多...
SpringBoot整合WebSocket实现聊天室

SpringBoot整合WebSocket实现聊天室

1.简单的实现了聊天室功能&#xff0c;注意页面刷新后聊天记录不会保存&#xff0c;后端没有做消息的持久化 2.后端用户的识别只简单使用Session用户的身份 0.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-…
阅读更多...
firewalld 防火墙

firewalld 防火墙

firewalld概述 Linux系统防火墙从CentOS7开始的默认防火墙工作在网络层&#xff0c;属于包过滤防火墙 Firewalld和iptables的关系 netfilter 位于Linux内核中的包过滤功能体系称为Linux防火墙的“内核态” firewalld Centos默认的管理防火墙规则的工具称为防火墙的“用…
阅读更多...
高中数学：平面向量-题型总结及解题思路梳理

高中数学：平面向量-题型总结及解题思路梳理

一、知识点及解题思路梳理 高中&#xff0c;2/3的向量题目是坐标向量题&#xff0c;1/3是几何向量题。但是&#xff0c;这1/3的几何向量题可以转换成坐标向量题。 二、练习 例题1 几何型向量题 例题2
阅读更多...
QML的Image 路径问题（source）

QML的Image 路径问题（source）

四种路径格式 在 QML 中&#xff0c;当你使用 Image 元素的 source 属性来指定一个图片的路径时&#xff0c;有几种不同的方式可以指定这个路径&#xff0c;每种方式都有其特定的用途和上下文。 相对路径&#xff1a; QML 文件和一个名为 close.png 的图片在同一目录下&#x…
阅读更多...
比较两列数据

比较两列数据

点其中一个数据 删掉S&#xff0c;回车 大的标红
阅读更多...
基于SpringBoot+Vue+Mysql的实验室低值易耗品管理系统

基于SpringBoot+Vue+Mysql的实验室低值易耗品管理系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…
阅读更多...
基于springboot的毕业设计系统的开发源码

基于springboot的毕业设计系统的开发源码

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的毕业设计系统的开发。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 毕业设计系统能够实现…
阅读更多...
Git Core Lecture

Git Core Lecture

1、Git 简介 官方介绍&#xff1a;Git is a fast distributed revision control system (Git 是一个快速的分布式版本控制系统) 2、Git Core Command 2.1 git init git 工程初始化&#xff0c;会在工作区 (working directory) 根目录中创建.git 目录 # 创建目录 $ mkdir git-i…
阅读更多...
最新文章

Copyright @ 2022~2023