Mock16-项目前端框架Antd升级

MegaQi

发布于 2024-02-27 08:36:14

1150

发布于 2024-02-27 08:36:14

说来惭愧此实战教程拖拖拉拉好长时间，回过头来再重新看前端github代码库最近一次更新记录竟然是两年前了，另外加上mac本换window本环境也需搭建，nodejs和antd都有N个版本迭代了，本着前端框架使新不用旧的原则，正好来一次升级。这里可想而知的一定会遇到各种问题，那我们就一起闯关打怪搞定它。

语言的学习唯有实战出真知，唯有更上脚步才能进度，唯有遇到问题解决它才能成长。

QMockWeb重启

从 https://github.com/QiCodeCN 代码项目中重新下载 QMockWeb 前端配置项目代码，用WebStorm打开加载它。然后打开执行终端执行初始化和运行命令，还能否正常运行。

QMockWeb> npm -version
9.1.5
npm install  # 会有些警告先忽略
npm run start # 编译启动项目

不出所料，编译运行失败，报了如下错误：

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    ...
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.0

看英文错误大概落在了node js 不支持什么，具体code码为 ERR_OSSL_EVP_UNSUPPORTED，利用搜索引擎（推荐bing，有条件直接stackoverflow找）查下解决办法。

得到的答案就是nodejs V17版本之后受相关OpenSSL3.0的影响，从上边报错信息可以看出，我本地的最新版本已经是V18了，解决办法开在IDE的中断输入如下设置命令后，重新执行环境初始化。或者降低到合适的nodejs版本。

$env:NODE_OPTIONS="--openssl-legacy-provider" # 每次项目重启要执行下，或者自行按照网上说配置到ide的启动环境变量里
npm install
npm run start 

√ Webpack                                                                                                
App running at:
Local:   http://localhost:8000 (copied to clipboard)

如果你没有上边报错那更好，如果还有别的不一样的错误，请用网络的力量解决它，nodejs这块的环境问题总是不断，但却很好找到答案。因为遇到的人很多。我这解决上述问题后见到了当初的界面。

从欢迎界面来看，再次说明确实是好久没更新了，公众号的名字还停留在大奇测试开发，这里也告知下大家，现在我的公众号改叫《非典型性程序员》了，记得持续关注哈！

antd pro升级 V4升V5

https://ant.design/docs/react/migration-v5-cn

通过参考上边的官方文档，也经过各类搜索引擎排查，经过两个晚上的尝试，由于涉及到太多依赖大跨度升级，最终失败告终。及时止损不浪费太多时间，鉴于本项目前端功能就一个登录和项目管理，所以决定重建web前端项目，你也可以这样做或者直接更新到最新库代码即可。

https://pro.ant.design/zh-CN/docs/getting-started

进入到项目中按照上边的官方初始化文档，利用pro-cli创建脚手架

# 使用 npm
npm i @ant-design/pro-cli -g
pro create qmock-web-antdpro

特别说明：此处创建脚手架项目已经没有最早的选项了，默认都是最新的了，尤其是语言默认成了 typescritp 了。

WebStorm 打开加载项目并安装依赖

cd qmock-service-api
npm install

启动全新的antd pro V5

npm run start

项目初始化

虽然全新的V5版本，但项目的简化和一些初始化内容，还是可以参考《Mock04-前后端项目初始化》一篇来操作，这里我只说逻辑要点，详细的说明如果忘了请自行翻看对照历史文章。

国际化多语言简化，只留zh-CN
标题修改QMockService，Footer底部链接替换
登录页面和菜单不使用内容注释简化

代码功能迁移

前后端登录

同样参考实战04篇，为了实现真正的前后端打通，需要进行逐项修改。

配置dev本地调试环境的 config/proxy.js 代理
去掉mock/user.js下/api/login/account 模拟接口
修改/account 请求，适配后端服务真实接口返回
注意同时要去掉 if (!getAccess()) { ...省略... } 代码确保鉴权通过

以上一些顺利，欢迎来到全新的欢迎页面

项目管理

这部分代码的详细过程，请直接回看Mock05-09篇的整个项目的管理的开发，这里其中页面代码，我直接将对应的文件拷贝到同样的位置下：

src/pages/Project/index.jsx
src/pages/Project/components/UpsertProject.tsx

另外一个接口服务js文件，将service.js重命名为project.js 放在新的目录结构 src/services/ant-design-pro/project.js 下。对应上边两个接口方法引用也需要同时变更：

import { saveProduct } from "@/services/ant-design-pro/project.js"; import { getProductList, searchProducts, removeProduct } from "@/services/ant-design-pro/project.js";

最后还要根据升级后的语法调整文档对涉及到的变更处进行修改，比如：

https://ant.design/docs/react/migration-v5-cn

组件弹框的受控可见 API 统一为visible 变为 open

重启启动项目，查看项目管理业务是否正常工作，不出意外的出意外了，有个接口请求错误导致项目列表请求失败，检查下具体为后端代码的字段缺失错误

另外在回归测试编辑和修改操作的时候也遇到一些问题，两处小修复代码如下：

因请求自动带了token所以params的传递要从自定义remove?id=x改成标准形式

export async function removeProduct(id) {
    return request('/api/mock/project/remove', {
        method: 'POST',
        params: {id: id}
    });
}

增删改后会再次调用查询，更新后必须显示的指定查询参数，否则会引起参数缺失错误

# prject.js
<UpsertProject
    upsertName={name}
    upsertCurrent={current}
    upsertPageSize={pageSize}
/>

# UpsertProject.tsx
if (resp.success) {
    form.resetFields(); // 表单清除历史
    props.setUpsertVisible(false);
    props.reloadProjectList(props.upsertName, props.upsertCurrent, props.upsertPageSize);
}

最后整体回归测试下项目管理的基本功能