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

news2024/9/21 22:48:09

一、背景

在选择一款比较合适的中台的情况下，挑选了有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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

软件安全复习

软件安全复习

文章目录 第一章 软件安全概述1.1 信息定义1.2 信息的属性1.3 信息安全1.4 软件安全1.5 软件安全威胁及其来源1.5.1 软件缺陷与漏洞1.5.1.1 软件缺陷1.5.1.2 漏洞1.5.1.3 软件漏洞1.5.1.4 软件缺陷和漏洞的威胁 1.5.2 恶意软件1.5.2.1 恶意软件的定义1.5.2.2 恶意软件的威胁 1.…
阅读更多...
《安富莱嵌入式周报》第337期：超高性能信号量测量，协议分析的开源工具且核心算法开源，工业安全应用的双通道数字I/O模组，低成本脑机接口，开源音频合成器

《安富莱嵌入式周报》第337期：超高性能信号量测量，协议分析的开源工具且核心算法开源，工业安全应用的双通道数字I/O模组，低成本脑机接口，开源音频合成器

周报汇总地址&#xff1a;http://www.armbbs.cn/forum.php?modforumdisplay&fid12&filtertypeid&typeid104 视频版&#xff1a; https://link.zhihu.com/?targethttps%3A//www.bilibili.com/video/BV1PT421S7TR/ 《安富莱嵌入式周报》第337期&#xff1a;超高性…
阅读更多...
镜子摆放忌讳多

镜子摆放忌讳多

镜子是我们日常生活中不可或缺的物品。在风水中&#xff0c;镜子的作用非常多&#xff0c;能够起到一定的作用。镜子的摆放位置也是非常有讲究的&#xff0c;摆放不好会直接影响到家人的事业、财运、婚姻乃至健康等诸多方面。 第一个风水忌讳&#xff0c;镜子对大门。大门的正前…
阅读更多...
开发自定义菜单之创建菜单

开发自定义菜单之创建菜单

文章目录 申请测试账号换取Token接口测试提交自定义菜单查看效果校验菜单配置清空菜单配置结束语 申请测试账号 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?actionshowinfo&tsandbox/index 或 得到appid和secret 换取Token 使用appid和secret换取token令牌…
阅读更多...
企业内网开源OA服务器（办公自动化系统），搭建O2OA基于Linux(openEuler、CentOS8)

企业内网开源OA服务器（办公自动化系统），搭建O2OA基于Linux(openEuler、CentOS8)

本实验环境为openEuler系统(以server方式安装)&#xff08;CentOS8基本一致&#xff0c;可参考本文) 目录 知识点实验下载安装O2OA安装mysql配置O2OA 知识点 “O2OA” 是一个开源的、基于Java的办公自动化&#xff08;Office Automation&#xff09;系统。其名称中的“O2OA”…
阅读更多...
Linux操作指令大全

Linux操作指令大全

目录 &#x1f349;引言 &#x1f349; 基础命令 &#x1f348;pwd &#x1f348;cd &#x1f348;ls &#x1f348;mkdir &#x1f348;rmdir &#x1f348;cp &#x1f348;mv &#x1f348;rm &#x1f349; 文件操作命令 &#x1f348;cat &#x1f348;tac …
阅读更多...
Web课外练习9

Web课外练习9

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>邮购商品业务</title><!-- 引入vue.js --><script src"./js/vue.global.js" type"text/javascript"></script><link rel&…
阅读更多...
关于微信小程序低功耗蓝牙ECharts实时刷新

关于微信小程序低功耗蓝牙ECharts实时刷新

最近搞了这方面的东西&#xff0c;是刚刚开始接触微信小程序&#xff0c;因为是刚刚开始接触蓝牙设备&#xff0c;所以这篇文章适合既不熟悉小程序&#xff0c;又不熟悉蓝牙的新手看。 项目要求是获取到蓝牙传输过来的数据&#xff0c;并显示成图表实时显示&#xff1b; 我看了…
阅读更多...
【全开源】招聘求职小程序系统源码（ThinkPHP+原生微信小程序）

【全开源】招聘求职小程序系统源码（ThinkPHP+原生微信小程序）

基于ThinkPHP和原生微信小程序开发的招聘平台系统&#xff0c;包含微信小程序求职者端、微信小程序企业招聘端、PC企业招聘端、PC管理平台端 构建高效人才交流平台 一、引言&#xff1a;招聘求职市场的数字化趋势 在数字化时代&#xff0c;招聘求职市场也迎来了巨大的变革。…
阅读更多...
软件杯 题目： 基于深度学习的疲劳驾驶检测 深度学习

软件杯 题目： 基于深度学习的疲劳驾驶检测 深度学习

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…
阅读更多...
RT-DRET在实时目标检测上超越YOLO8

RT-DRET在实时目标检测上超越YOLO8

导读 目标检测作为计算机视觉的核心任务之一&#xff0c;其研究已经从基于CNN的架构发展到基于Transformer的架构&#xff0c;如DETR&#xff0c;后者通过简化流程实现端到端检测&#xff0c;消除了手工设计的组件。尽管如此&#xff0c;DETR的高计算成本限制了其在实时目标检测…
阅读更多...
一文了解 - GPS/DR组合定位技术

一文了解 - GPS/DR组合定位技术

GPS Global Position System 全球定位系统这个大家都很熟悉&#xff0c; 不做太多介绍。 DR Dead Reckoning 车辆推算定位法&#xff0c; 一种常用的辅助的车辆定位技术。 DR系统的优点&#xff1a; 不需要发射和接收信号&#xff1b; 不受电磁波干扰。 DR系统的缺点&#x…
阅读更多...
Leetcode 剑指 Offer II 079.子集

Leetcode 剑指 Offer II 079.子集

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 给定一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返…
阅读更多...
Java——接口后续

Java——接口后续

1.Comparable 接口 在Java中&#xff0c;我们对一个元素是数字的数组可以使用sort方法进行排序&#xff0c;如果要对一个元素是对象的数组按某种规则排序&#xff0c;就会用到Comparable接口 当实现Comparable接口后&#xff0c;sort会自动调用Comparable接口里的compareTo 方法…
阅读更多...
【Shell】sed编辑器实例

【Shell】sed编辑器实例

sed是用来解析和转换文本的工具&#xff0c;它使用简单&#xff0c;是简洁的程序设计语言。 sed编辑器 &#xff08;一&#xff09; sed编辑器基础1. 简介2. sed的模式空间 &#xff08;二&#xff09;基本的sed编辑命令&#xff08;三&#xff09;sed命令实例1. 向文件中添加或…
阅读更多...
leetcode-189. 旋转数组 原地递归算法（非官方的三种方法）

leetcode-189. 旋转数组 原地递归算法（非官方的三种方法）

Problem: 189. 轮转数组 思路 首先&#xff0c;很明显&#xff0c;题目要求的操作等同于将数组的后k%n个元素移动到前面来。 然后我们思考原地操作的方法&#xff1a; &#xff08;为了方便讲解&#xff0c;我们先假设k<n/2&#xff09; 1.我们将数组划分为 [A&#xff0c;B…
阅读更多...
MCU最小系统电路设计

MCU最小系统电路设计

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 何为最小系统 最小系统板就是一个最精简的电路&#xff0c;精简到只能维持MCU最基本的正常工作 最小系统包括哪些模块 电源模块 MircoUSB接口 在这个图片当中&#xff0c;我…
阅读更多...
ubuntu22.04 vsc命令行复制粘贴时下划线消失

ubuntu22.04 vsc命令行复制粘贴时下划线消失

vscode 在ubuntu的terminal中下划线不显示解决方案 CtrlShiftP&#xff0c;打开搜索&#xff0c;Perferences:Open User Settings 设置Editor:Font Family 为 ‘Ubuntu Mono’, monospace 保存&#xff0c;效果如图&#xff1a;
阅读更多...
SpringBoot使用rsa-encrypt-body-spring-boot实现接口加解密

SpringBoot使用rsa-encrypt-body-spring-boot实现接口加解密

废话不多说&#xff0c;直接上代码 引入依赖 <dependency><groupId>cn.shuibo</groupId><artifactId>rsa-encrypt-body-spring-boot</artifactId><version>1.0.1.RELEASE</version> </dependency>配置文件 rsa:encrypt:# 是…
阅读更多...
JAVA -- ＞ 初识JAVA

JAVA -- ＞ 初识JAVA

初始JAVA 第一个JAVA程序详解 public class Main {public static void main(String[] args) {System.out.println("Hello world");} }1.public class Main: 类型,作为被public修饰的类,必须与文件名一致 2.public static 是JAVA中main函数准写法,记住该格式即可 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023