用户中心问题答疑 - 用户中心项目教程 - 编程导航教程

请利用好 Ctrl + F 来搜索需要的问题

本项目 Node.js 请使用 v16 版本，JDK 请使用 8 版本，Spring Boot 使用 2.x 版本

⚠️ 注意！急着找工作、或者完全没接触过前端的同学，不要做这个项目的前端（运行都不用），只学习后端即可！

前端

1.1 前端项目启动时报错、无法启动？

请先认真阅读完整的报错信息，然后去百度错误信息。

大概率是本地环境、依赖版本和鱼皮的不一致，或者是文件权限问题。

Node.js 版本最好使用 v16** （鱼皮的是 v16.20.0），如果不是的话建议去 Node.js 官方网站重新下载安装 Node，或者使用 nvm（Node.js 版本管理工具）来切换多个不同的 Node.js 版本。

如果是权限问题，可以使用管理员权限、或者 sudo 命令（Mac 用户）来执行安装依赖、启动项目等命令。

1.2 如何初始化前端项目？为什么初始化命令和鱼皮视频中的不同？为什么没有 umi@3 选项？

因为本项目使用的前端框架 Ant Design Pro 在持续更新，请以官方文档最新的初始化命令为主。

官方文档：https://pro.ant.design/zh-CN/docs/getting-started

知道去看官方文档，你就能少走很多坑。

如果跟着视频做报错了，那么先去看最新官方文档上的命令和用法，或者切换文档版本为和视频一致。如果还有报错，那么就把错误信息贴到百度去查询。如果还有报错，去框架的 Github Issues 区去搜一下（比如：Issues · ant-design/ant-design-pro · GitHub），99% 你遇到的问题别人也遇到过，而且大多数情况下都有对应的解决方案。 希望大家灵活一点，任何教程都有保质期，学会阅读官方文档、通过各种渠道自主解决问题，才能让你之后的编程学习风雨无阻！

24 年 2 月后，官方脚手架不再提供 umi@3 的选项，创建项目运行后也不再会看到 umi ui，这都是正常的，不要慌，完全不影响后续学习。

记住，框架会变化，我们学习的重点是思路和方法，不要默守陈规。

如果你还想用 umi@3 和 umi ui 怎么办呢？

更新后的框架不能满足需求，那我们用更新前的不就好了？？？

执行命令安装老版本的脚手架：

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

然后使用 pro -v 查看版本号，保证是 3.1.0，即可出现 umi@3 的选项：

选择框架版本时， 一定要选 v3 ！！！使用 v4 版本不支持 umi ui 悬浮按钮。

记住，解决问题的方法有很多，要多思考、灵活一点。

刚开始遇到这类问题可能会很懵逼，但一定要尝试自己解决，并且记录自己的解决过程和结果，经过长时间的积累，面对各种 Bug 你都不会虚的。

1.3 前端点击登录按钮后，无法自动跳转？报错 status undefined？

修改登录页面的 handleSubmit 方法，删除 setUserLoginState(user) 函数，否则用户为空时可能也会设置到全局状态里，从空值中取 status 肯定会报错的。

2023-08-06 后的代码，鱼皮已经修复了这个问题

登录后还是无法跳转到欢迎页，

1.4 使用 API.CurrentUser 类型时，为什么出现 API is not defined 未定义？

不要使用 import CurrentUser = API.CurrentUser 的方式，直接在代码里面使用 API.CurrentUser 即可。

1.5 上线后出现跨域？

跨域规则是指：浏览器为了用户的安全，仅允许向 同域名、同端口 的服务器发送请求。

所以最好解决跨域问题的方式就是前端和后端用相同的域名，用 Nginx 把后端请求地址（/api 前缀）转发到服务器的后端端口。

具体解决方案请观看鱼皮项目教程中的 跨域问题解决部分。

1.6 为什么线上请求后端不通，如何修改发送请求的地址？

修改前端的全局请求配置文件（src/plugins/globalRequest.ts），把请求地址（baseUrl）改成自己的真实请求地址，注意区分本地和线上环境。

1.7 前端 umi ui 小工具安装失败？为什么没有 umi ui 小图标？

因为项目前端使用的 umi 框架在持续升级，所以现在不太建议使用 umi ui 了，兼容性不好。 可以忽略，不影响后续的学习。

1.8 为什么打开前端 umi ui 后，所有的组件都是空白的？

图片和代码是需要从 github 加载的，可能因为网络原因无法连通 github，可以忽略，不影响后续的学习。

1.9 为什么打开 F12 网络控制台后，执行一次操作时能够看到 2 个请求？

当一个页面向不同源（跨域）发起请求时，浏览器会先发送一个预检请求（Preflight Request）来询问服务器是否允许跨域访问。预检请求是一种OPTIONS请求，用于在正式的跨域请求之前发送，以便服务器确认是否允许该跨域请求。如果服务器返回允许跨域请求的响应头，浏览器才会发送真正的跨域请求。

因此，跨域请求会有两个请求：

1. 预检请求（OPTIONS请求）：这是一个预检请求，用于向服务器确认是否允许跨域访问。预检请求只包含请求头信息，不包含请求体。服务器根据预检请求的头部信息来判断是否允许跨域访问，并在响应头中返回相应的信息。
2. 真正的跨域请求：如果服务器返回允许跨域请求的响应头，浏览器才会发送真正的跨域请求。真正的跨域请求包含了请求头和请求体，用于实际向服务器获取数据或提交数据。

需要注意的是，预检请求只在一些特定的情况下才会发生，例如：

• 使用了非简单请求（例如包含自定义的请求头或使用了PUT或DELETE方法）。
• 发送了带有credentials（如cookies或HTTP认证）的请求。

对于简单请求，浏览器会直接发送真正的跨域请求，而不会先发起预检请求。

1.10 右上角的用户头像位置一直转圈，无法加载？

因为在 src/components/RightContent/AvatarDropdown.tsx 用户头像下拉组件中进行了判断，如果没有全局的用户登录状态或者 没有用户名 ，那么该组件就会只展示 Loading 效果。

const loading = (

 <span className={`${styles.action} ${styles.account}`}>

   <Spin

     size="small"

     style={{

       marginLeft: 8,

       marginRight: 8,

     }}

     />

 </span>

);

if (!initialState) {

 return loading;

}

const { currentUser } = initialState;

if (!currentUser || !currentUser.username) {

 return loading;

}

在前端移除必须有用户名的判断，并且设置一个默认用户名，即可解决问题：

{currentUser.username ?? '无名'}

如果未展示用户头像，说明数据库里该用户没有头像，随便找个头像 url 设置到数据库内即可，比如 https://himg.bdimg.com/sys/portraitn/item/public.1.e137c1ac.yS1WqOXfSWEasOYJ2-0pvQ 。

2023-08-06 后的代码，鱼皮已经修复了这个问题

1.11 用户管理页面的表格无法渲染头像？

对应代码位置在：src/pages/Admin/UserManage/index.tsx

Ant Design Procomponents 的 ProTable 表格组件是通过定义列数组来渲染数据的，鱼皮的代码中使用了自定义 Render 来渲染表格，代码如下：

render: (_, record) => (

 <div>

   <Image src={record.avatarUrl} width={100} />

 </div>

),

如果你的项目无法渲染头像，可以尝试使用 Ant Design Procomponents 的 ProTable 表格组件提供的自定义 valueType 方法，将 valueType 指定为 image 类型即可。

官方文档：https://procomponents.ant.design/components/schema#valuetype-列表

1.12 前端项目启动报错：ERROR in ./src/components/index.md？

框架更新导致该文件不再可读，删除该文件即可

2023-08-06 后的代码，鱼皮已经删除了这个文件

1.13 点击查询表格后，为什么提示错误、不加载数据？

正常现象，因为项目中并未使用该表格，该页面请求的接口我们实际项目的后端并没有，可以删除该页面或者忽略。

1.14 为什么登录后无法在菜单中查看到用户管理页面？

因为数据库内没有管理员身份的用户，自己插入一条即可。

2023-08-06 后的代码，鱼皮在 create_table.sql 建表语句中，默认插入了一条管理员身份的数据

1.15 进入用户管理页面后，无法加载表格数据？

按 F12 查看控制台网络请求，发现 /api/user/search 用户搜索接口返回 40000 请求参数错误，查看后台发现是用户未登录、或者未具有管理员权限。可能是你在更新用户信息后，后端还是从之前的 session 中获取到了之前的老用户信息，导致判断错误。

解决方法：建议先重启项目，如果获取到的用户信息还是老的，在前端界面或后端执行一次用户注销逻辑再重新登陆，即可获取到最新的用户信息。

2023-08-06 后的代码，鱼皮修改了后端无权限时的报错信息，更明确

1.16 为什么前端代码能运行，却有很多莫名其妙的错误提示？

大概率是 ESLint + TypeScript 的类型校验，提示你的代码写法不够规范，虽然不影响运行，但是建议学前端的同学修改一下。

1.17 前端执行命令移除国际化文件报错？

这是框架官方的 bug，建议去 Ant Design Pro 官方的 github issues 区搜索最新的解决方案。

示例解决方案：

1. 执行 yarn add eslint-config-prettier --dev yarn add eslint-plugin-unicorn --dev
2. 修改node_modules/@umijs/lint/dist/config/eslint/index.js 文件注释 // es2022: true可以解决

后端

2.1 后端 Mapper.xml 文件报红？

注意修改 mapper 的 namespace 为你自己项目实际的 mapper 路径。

2.2 后端添加某个依赖文件时报错？

后端使用 Maven 来下载管理依赖，如果添加依赖报错，大概率是网络原因或者 Maven 版本问题，建议通过 IDEA 右侧 Maven 的刷新按钮、或者执行 mvn clean 命令重新安装依赖。

2.3 为什么配置 mybatis-plus 的时候，一直报错？

版本问题，java用 8、springboot 一定要用 2。

---

项目分区导航：⬅️ 19-用户中心项目面试题 | 20-用户中心问题答疑 - 用户中心项目教程 - 编程导航教程 | ➡️ 01-项目介绍