零、Ant Design Pro 开始

JimmyTsai75

已于 2023-01-20 11:57:04 修改

阅读量2.4k

点赞数 8

分类专栏： Ant Design Pro+Amis构建后台管理系统文章标签： vscode ide 编辑器

于 2023-01-01 17:13:55 首次发布

本文链接：https://blog.csdn.net/JimmyTsai75/article/details/128510939

版权

Ant Design Pro+Amis构建后台管理系统专栏收录该内容

4 篇文章 5 订阅

订阅专栏

本文详细介绍了如何使用npm安装和创建AntDesignPro项目，包括解决执行脚本时遇到的问题，如sortPackage错误和高版本Node.js的兼容性问题。此外，还涵盖了修改Logo、Title、登录页面以及布局设置等自定义配置。

摘要由CSDN通过智能技术生成

使用脚手架构建Ant Design Pro

1、使用npm 安装脚手架
在电脑上面创建一个目录:myproject，用Visual Code 打开创建的目录，按Ctrl+`进入Nodejs终端，使用npm安装Ant Design Pro脚手架，在VSCode的终端界面输入并执行以下命令：

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

2、使用脚手架创建
等脚手架安装完成之后，就可以开始用脚手架创建一个Ant Design Pro系统，执行：

pro create myapp

在出来的界面里面，选择选择 umi 的版本，因为官方说道umi4版本暂时还不支持全量区块，所以选择umi3版本

umi@4
❯  umi@3

接下来选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，功能更加丰富，因为第一次学习，想多见识更多功能，选择complete版本

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

3、安装依赖库
使用脚手架创建成功之后，在电脑上的myproject里面，多出了一个myapp子目录，进入里面后可以看到一套我们需要的前端管理后台的react源代码已经创建好了，主要目录和功能如下：

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

我们可以从VsCode终端进入子目录，执行命令

cd myapp

进入myapp目录之后，就可以开始安装本套源代码所有的所有依赖库，执行：

npm install

部分机器如果npm版本太高，会出现unable to resolve dependency tree While resolving: ant-design-pro@5.2.0 Found: react@17.0.2等提示，这个时候可以采用npm install --legacy-peer-deps 跳过对等依赖项试试

关于peerDependencies的问题解释：npm 从版本v7开始，install就默认以peerDependencies的方式去下载了。如果库里面有app_A和app_B共同依赖了packageA，当使用peerDependencies（对等依赖关系）方式去下载的时候会被整合成一个packageA并且只有一个版本。这个时候会爆出如上所述的错误，npm i --legacy-peer-deps 的方式安装的时候，app_A和app_B分别安装其对应依赖的packageA，从而解决包冲突问题。

4、运行Ant Design Pro
静等安装成功之后，执行开始运行的命令：

npm run start

如果都顺利的话，VsCode终端呈现如下：（如果有一些警告信息，也可以忽略，警告信息不影响使用）
在这里插入图片描述
在VsCode里面，Ctrl+单击 http://localhost:8000 （或是在浏览器地址栏中直接粘贴），打开的浏览器里面出现如下画面：

至此我们的第一步已经成功迈出了。输入用户名:admin，密码：ant.design就可以进入管理系统，成功界面如下：
在这里插入图片描述

安装问题解决办法汇总

执行pro create 的时候，显示禁止运行脚本的解决办法

执行脚本的时候显示：
在这里插入图片描述
解决办法：
1、在左下角搜索框里面找到powershell ，右单机以管理员身份运行
2、执行 set-ExecutionPolicy RemoteSigned
3、输入A之后按回车

执行pro create myapp 的时候 sortPackage require错误解决办法

执行pro create的时候出现如下错误：

const sortPackage = require('sort-package-json');
                    ^

Error [ERR_REQUIRE_ESM]:.......

1、 npm config get prefix 获取本机全局依赖库地址
2、用vscode里面打开文件夹命令打开全局依赖库里面的@ant-design\pro-cli
3、在pro-cli执行npm i sort-package-json@1.55.0 -D 指定sortPackage的依赖库版本
4、在vscode中切换回原来执行pro create myapp的项目，重新执行pro create myapp

node V17以上版本问题

如果你是node v17以上，运行本代码会出现：digital envelope routimes::unsupported。错误代码是： ERR_OSSL_EVP_UNSUPPORTED 如下图
在这里插入图片描述
这个是因为v17以上版本包含了近期发布的 OpenSSL 3.0，根据 OpenSSL 的发布策略，OpenSSL 1.1.1 将在 2023-09-11 结束支持，这个日期也在 Node.js v18 LTS 结束日期之前。因为 OpenSSL 3.0 对允许的算法和密钥大小增加了严格的限制，有用到hash加密的地方后产生错误。
简单的解决办法是运行的时候设置node选项为–openssl-legacy-provider

set NODE_OPTIONS=--openssl-legacy-provider

为此，需要修改package.json，原来

"start": "cross-env UMI_ENV=dev umi dev",
//改为如下：
"start": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env UMI_ENV=dev umi dev",

修改Logo和Title

考虑到我们创建的管理后台是需要交付给我们的用户使用的，直接用Ant Design Pro的Title和Logo显然不合适，所以我们需要把它们改造成我们自己的。

这个动作是非常方便的，Ant 提供一个defaultSetting.ts文档，里面是系统的默认设置，直接修改就可以。

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: 'Ant Design Pro',
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
};

1、修改Title是非常方便的，我们可以直接把第13行的title改成：“Admin System”。
2、为了修改logo图标，我们自己先做一个图标命名为logo.svg并复制到public里面
3、修改defaultSetting.ts第17行为“/logo.svg”
修改后的defaultSetting.ts如下：

import { Settings as LayoutSettings } from '@ant-design/pro-layout';

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: 'Admin System',
  pwa: false,
  logo: '/logo.svg',
  iconfontUrl: '',
};

export default Settings;

修改前后的呈现效果对比如下：在这里插入图片描述

修改Loading

因为Ant Design Pro在页面未加载完Javascript代码的时候，会有一个Loading的呈现效果如下：
在这里插入图片描述
作为要交付给客户使用的项目，我们希望这个界面也是我们自己的内容。
那么这个界面要怎么修改呢，Ant Design Pro设计采用umi替代webpack，而document.ejs模板是umi.js项目配置最为基本的配置之一，可以理解为index.html的入口。它实际上是一个html模版，里面
有一个div就是react的挂载点：

<body>
    <div id="root"></div>
 </body>

可以简单的理解成React 会重写这个id为"root"的div

（这个和Vue框架public文件夹里面的index.html是一样的），在本项目里面，document.ejs位于/src/pages/里面，打开之后，可以看到代码最后是这样的：

  <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          min-height: 420px;
        "
      >
        <img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin"
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
            ></span>
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: center">
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            width="32"
            style="margin-right: 8px"
          />
          Ant Design
        </div>
      </div>

其中第11行src="<%= context.config.publicPath +‘pro_icon.svg’%>"表示该图片是加载public文件夹里面的pro_icon.svg文件，我们可以把这段html模版改成我们的图片和内容如下（主要是修改源代码中216行和227行）

<img src="<%= context.config.publicPath +'logo.svg'%>" alt="logo" width="256" />
        <div class="page-loading-warp">
          <div class="ant-spin ant-spin-lg ant-spin-spinning">
            <span class="ant-spin-dot ant-spin-dot-spin"
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
            ></span>
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: center">
          <img
            src="<%= context.config.publicPath +'logo.svg'%>"
            width="32"
            style="margin-right: 8px"
          />
          Jimmy Design
        </div>

修改后js加载前的loading效果如下：
在这里插入图片描述

修改登录页面Login

Ant Design Pro的前端路由都在config/config.ts里面，因为系统布局采用ProComponents中的ProLayout,ProLayout 与 umi 配合使用，umi 会把 config.ts 中的路由帮我们自动注入到配置的 layout 中,所有要修改Login页面，需要到config.ts里面去查找login页面所在位置，观察代码发现登录页面组件的文件位置是src/page/user/Login里面。

LoginForm

打开login/index.tsx，发现登录页面直接采用ProComponents的pro-form,登录表单也不是自己写的，直接采用LoginFrom,关于LoginForm的详细使用文档可以进入ProCcomponents 网站查看

修改登录页面

我们只是需要去除一些暂时不用的功能，修改页面的title和subTitle,这个步骤比较简单，直接修改LoginForm组件的title和subTitle就可以。
在这里插入图片描述
1、intl.formatMessage：是umi集成的多语言模块，如果VsCode有安装umi pro扩展，可以把输入焦点放到’pages.layouts.userLayout.title’ 上面，按下Ctrl+F12就可以跳转到对应语言id上面，然后就可以修改了。
2、注释其它登录方式：因为暂时不需要采用第三方登录，我们需要注释其它登录方式，主要注释掉上图红色方框里面的代码。另外有一个<FormattedMessage>里面的“其它登录方式这几个字”，跟踪发现它是umi多语言里面的，修改或注释需要把defaultMessage=“其它登录方式"改成defaultMessage=” "，并且还有找到src/locales/zh-CN/pages.ts里面对应id的内容，注释如下：
//‘pages.login.loginWith’: ‘其他登录方式 :’,
3、修改页脚：页脚是由一个Footer组件提供的，整个项目的页脚都是整个。找到src/components/Footer/index.ts文件，把里面<DefaultFooter>组件的links代码注释掉即可。另外通过修改多语言配置文件src/locales/zh-CN.ts里面的id为"app.copyright.produced"对应内容，就可以实现版权信息的修改。
4、修改<ProFormText>组件里面关于用户账号密码等信息提示，包括placeholder等。这些都可以通过修改多语言文件实现。

修改Mock

本项目采用Mock模拟数据，默认的用名和密码分别是admin和ant.design，登录的时候模拟api的是项目根目录下面mock里面的user.ts文件，在第120行可以看到模拟api/login/account里面直接根据输入的用户名密码是否amdin和ant.design进行登录判断，如图所示
在这里插入图片描述
这里我们可以把默认登录密码修改成我们认为合适的，当然修改后，记得把登录页面上面的placeholder（需要修改要用到的所有语言表里面pages.login.password.placeholder的值）进行相应的修改。

最终修改后的呈现效果如下：
在这里插入图片描述

ProLayout 布局

ProLayout - 高级布局

Ant design pro 采用ProLayout高级布局组件，不需要自己写Layout页面。ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。与 PageContainer 配合使用可以自动生成面包屑，页面标题，并且提供低成本方案接入页脚工具栏。
大部分布局选项可以通过config/config.ts里面的配置信息进行配置，也可以通过开发环境里面才有的配置栏进行配置
在这里插入图片描述

可以通过配置栏进行配置，然后拷贝配置去覆盖config/config.ts里面的内容。

自定义布局

第一次采用ProLayout的时候也担心会不会不够灵活，比如我需要修改折叠按钮（collapsed）的位置能不能实现，带着这种猜疑，我进入 ProComponents 官网，我的担心立刻解除，他们竟然直接就有了类似的demo: （可以进入以下网址，查看具体示例代码）https://procomponents.ant.design/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-collapsed
在这里插入图片描述

右上角内容

在这里插入图片描述
Ant design pro 默认支持好多语言，右上角最靠右边就是语言却换，如果不需要，非常简单，直接删除src/locales文件夹里面对应内容就可以，删除后在VsCode终端里面ctrl+c 退出调试，然后重新运行npm run start 重新编译后就可以看到支持语言只保留我们要的。
在这里插入图片描述