用户中心--前后端联调
前端
前端代码简洁
登录默认显示无法更改
问题：
修改登录界面，去掉不需要的信息，比如图标及无用链接（也可以换成你自己的）
在账号密码的默认值那里出了问题，上图中输入框中的值一直无法更改，原代码如下：
▼tsx复制代码{type === 'account' && ( <> <ProFormText name="username" fieldProps={{ size: 'large', prefix: <UserOutlined />, }} placeholder={intl.formatMessage({ id: 'pages.login.username.placeholder', defaultMessage: '用户名: admin or user', })} rules={[ { required: true, message: ( <FormattedMessage id="pages.login.username.required" defaultMessage="请输入用户名!" /> ), }, ]} /> <ProFormText.Password name="password" fieldProps={{ size: 'large', prefix: <LockOutlined />, }} placeholder={intl.formatMessage({ id: 'pages.login.password.placeholder', defaultMessage: '密码: ant.design', })} rules={[ { required: true, message: ( <FormattedMessage id="pages.login.password.required" defaultMessage="请输入密码！" /> ), }, ]} /> </> )}
更改 defaultMessage 无效，不会跟着变。
解决
原因：去国际化失败，只需要重新运行去掉国际化的代码即可。
▼text复制代码{intl.formatMessage({ id: 'pages.login.password.placeholder', defaultMessage: '密码: ant.design', })}
intl.formatMessage({...})：
- 这是一个 国际化函数，通常来自
react-intl库。intl.formatMessage()用于根据语言环境获取相应的文本信息。id: 'pages.login.username.placeholder'：id是占位符的国际化标识符，表示在语言文件中对应的文本键。例如，可能在en.json文件中对应的值是"Username: admin or user"，而在zh.json文件中对应的值可能是"用户名: admin 或 user"。defaultMessage: '用户名: admin or user'：这是一个默认值。如果当前用户的语言环境没有找到相应的翻译文本，则使用这个默认消息作为占位符。
运行去国际化脚本后，代码自动变为下面：
▼tsx复制代码{type === 'account' && ( <> <ProFormText name="username" fieldProps={{ size: 'large', prefix: <UserOutlined />, }} placeholder={'用户名: admin or user'} rules={[ { required: true, message: '用户名是必填项！', }, ]} /> <ProFormText.Password name="password" fieldProps={{ size: 'large', prefix: <LockOutlined />, }} placeholder={'密码: ant.design'} rules={[ { required: true, message: '密码是必填项！', }, ]} /> </> )}
此时直接修改 placeholder 即可。
【更新】：修改账号密码表单里的 name ，更换传递参数的名称，与后端参数对应
运行报错
问题
▼shell复制代码error - ./src/components/index.ts Module build failed (from ./node_modules/@umijs/bundler-webpack/compiled/babel-loader/index.js): SyntaxError: D:\IDEA\code\项目\鱼皮\用户中心\项目\前端\test03\src\components\index.ts: Export 'SelectLang' is not defined. (11:55) 9 | import { Question } from './RightContent'; 10 | import { AvatarDropdown, AvatarName } from './RightContent/AvatarDropdown'; > 11 | export { AvatarDropdown, AvatarName, Footer, Question, SelectLang };
解决
将export { AvatarDropdown, AvatarName, Footer, Question, SelectLang };最后的 SelectLang 去掉即可。
修改登录url
修改接口
请求接口：http://localhost:8000/api/login/account?token%20=%20123
1、【可不改】修改 token 等号两边的 %20，即去掉空格。
这里也可以不改，不影响，我改主要是看起来 url 会舒服很多
全局查看可知文件为：test03\src\requestErrorConfig.ts，代码如下：
▼tsx复制代码// 请求拦截器 requestInterceptors: [ (config: RequestOptions) => { // 拦截请求配置，进行个性化处理。 const url = config?.url?.concat('?token = 123'); return { ...config, url }; }, ],
2、【可不改】修改端口号，改为后端的端口号。
这里可以不改，因为后续要用上代理，就不需要跨域了，也就是说后面还得改回来
全局搜索 request ，进入test03\src\app.tsx配置文件：
▼tsx复制代码/** * @name request 配置，可以配置错误处理 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。 * @doc https://umijs.org/docs/max/request#配置 */ export const request = { ...errorConfig, };
进入umi参考配置后发现参考的是 axios，继续跳转，可知需要配置的是**baseURL**（注意大小写）：
▼tsx复制代码export const request = { ...errorConfig, baseURL: 'http://localhost:8800', };
修改参数
请求参数：{"username":"1","password":"1","autoLogin":true,"type":"account"}
1、修改参数为userAccount、userPassword
登录接口的路径在：test03\src\services\ant-design-pro\api.ts
▼tsx复制代码/** 登录接口 POST /api/login/account */ export async function login(body: API.LoginParams, options?: { [key: string]: any }) { return request<API.LoginResult>('/api/login/account', { method: 'POST', headers: { 'Content-Type': 'application/json', }, data: body, ...(options || {}), }); }
函数如上所示，可以进入 API.LoginParams（test03\src\services\ant-design-pro\typings.d.ts）：
▼tsx复制代码type LoginParams = { userAccount?: string; userPassword?: string; autoLogin?: boolean; type?: string; };
但是修改上述参数名称并未修改请求中的参数，继续寻找原因。
我知道了，我只修改了传递的类，并没有改前端表单的名字，我应该修改表单的 name ，即上述 ProFormText 中的 name。
正向代理
简介：
反向代理（Reverse Proxy）和正向代理（Forward Proxy）是两种用于优化网络性能和安全性的技术。反向代理服务器位于客户端和实际服务器之间，而正向代理服务器则位于实际服务器和客户端之间。
-
反向代理：反向代理服务器接收客户端的请求，并将其转发到实际的服务器。一旦从实际服务器收到响应，反向代理服务器将其返回给客户端。这种机制使得客户端与实际服务器之间的通信对客户端来说是透明的。
-
正向代理：正向代理服务器位于实际服务器和客户端之间，它会接收客户端的请求，并将其转发到实际的服务器。一旦从实际服务器收到响应，正向代理服务器将其返回给客户端。与反向代理不同的是，客户端需要明确地知道正向代理的存在。
配置
1、修改前端代理路径
进入代理文件 test03\config\proxy.ts ：
▼tsx复制代码/** * @name 代理的配置 * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置 * ------------------------------- * The agent cannot take effect in the production environment * so there is no configuration of the production environment * For details, please see * https://pro.ant.design/docs/deploy * * @doc https://umijs.org/docs/guides/proxy */ export default { // 如果需要自定义本地开发服务器 请取消注释按需调整 dev: { // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/': { // 要代理的地址 // target: 'https://preview.pro.ant.design', target: 'http://localhost:8800', // 配置了这个可以从 http 代理到 https // 依赖 origin 的功能可能需要这个，比如 cookie changeOrigin: true, }, }, /** * @name 详细的代理配置 * @doc https://github.com/chimurai/http-proxy-middleware */ test: { // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/': { target: 'https://proapi.azurewebsites.net', changeOrigin: true, pathRewrite: { '^': '' }, }, }, pre: { '/api/': { target: 'your pre url', changeOrigin: true, pathRewrite: { '^': '' }, }, }, };
点击上述 docs 进入官方文档查看用法，如下：
上述配置表示，将
/api前缀的请求，代理到http://jsonplaceholder.typicode.com/，替换请求地址中的/api为''，并且将请求来源修改为目标url。如请求/api/a，实际上是请求http://jsonplaceholder.typicode.com/a。一般我们使用这个能力来解决开发中的跨域访问问题。由于浏览器（或者 webview）存在同源策略，之前我们会让服务端配合使用 Cross-Origin Resource Sharing (CORS) 策略来绕过跨域访问问题。现在有了本地的 node 服务，我们就可以使用代理来解决这个问题。
【注意】：之前修改 request 的 url 的时候如果修改过端口需要改回来，因为这里代理是用前端的端口的代理，如果说修改过 request 的 url，那么请求的将不再是前端端口下的路径。
修改后端前缀路径
修改配置文件 application.properties，加前缀：
▼properties复制代码server.servlet.context-path=/api
server.servlet.context-path：这是 Spring Boot 的一个配置属性，定义了应用程序的 上下文路径。它用于指定应用中所有请求路径的前缀。
