2024年最新JAVA项目-智能BI-用户中心 - 前后端代码统一.zip

# 项目流程图  # Ant Design Pro 官方文档：https://ant-design-pro.gitee.io/zh-CN/docs/getting-started ## 前端项目安装启动 ```js yarn install yarn start ``` ## 移除国际化 - i18n-remove 报错 - 执行 yarn add eslint-config-prettier --dev - 执行 yarn add eslint-plugin-unicorn --dev - 修改node_modules/@umijs/lint/dist/config/eslint/index.js文件：注释 // es2022: true ## open api生成前端接口调用 - package.json ```js "openapi": "max openapi", ``` - 配置 config/config.ts ```tsx export default defineConfig({ openAPI: [ { requestLibPath: "import { request } from '@umijs/max'", // 后端openapi 地址 schemaPath: 'http://localhost:8081/v3/api-docs', projectName: 'api-backend', }, ], }) ``` ## 请求配置 - src/requestConfig.ts ```tsx export const requestConfig: RequestConfig = { // 方式1：跨域访问方式，需要添加配置withCredentials: true, 才能携带cookie // baseURL: 'http://localhost:8081', // 方式2：公共前缀 + proxy 代理方式 config/proxy.ts baseURL: '/api', } ``` - 完整配置 ```tsx export const requestConfig: RequestConfig = { // 方式1：跨域访问方式，需要添加配置withCredentials: true, 才能携带cookie // baseURL: 'http://localhost:8081', // 方式2：公共前缀 + proxy 代理方式 config/proxy.ts baseURL: '/api', // 请求拦截器 requestInterceptors: [ (config: RequestOptions) => { // 拦截请求配置，进行个性化处理。 const url = config?.url; return { ...config, url }; }, ], // 响应拦截器 responseInterceptors: [ (response) => { // 拦截响应数据，进行个性化处理 // data: res 重新分配参数 const { data: res } = response as unknown as ResponseStructure; if (res?.success === false) { notification.error({ description: '请求错误', message: '提示', }); throw Error('请求错误'); } const { code, message, data } = res; if (code !== 0) { notification.error({ description: message, message: '提示', }); throw Error(message); } /** * TODO 这里返回response，实际后面调用获取的是response.data，也就是{ code, message, data } * 官方说通过配置 request.dataField = '' 可以获取原始数据，实际上未生效 */ return response; }, ], // 携带cookie 跨域请求 // withCredentials: true, }; ``` ## 登录 - src/pages/user/Login/index.tsx - 核心方法handleSubmit - 获取用户信息fetchUserInfo，调用src/app.tsx getInitialState() 获取 ```tsx const Login: React.FC = () => { const [userLoginState, setUserLoginState] = useState<API.LoginResult>({}); const [type, setType] = useState<string>('account'); const { initialState, setInitialState } = useModel('@@initialState'); const fetchUserInfo = async () => { // 获取userinfo信息，这里调用的fetchUserInfo是个Promisee函数 const userInfo = await initialState?.fetchUserInfo?.(); if (userInfo) { flushSync(() => { setInitialState((s) => ({ ...s, currentUser: userInfo, })); }); } }; const handleSubmit = async (values: API.UserLoginRequest) => { // 登录 try { // 判断能否正常登录 const res = await userLoginUsingPOST({ ...values, }); if (res) { const defaultLoginSuccessMessage = '登录成功！'; notification.success({ description: defaultLoginSuccessMessage, message: '提示', }); // 可以登录，获取用户信息并设置到全局状态 await fetchUserInfo(); console.log('fetchUserInfo initialState', initialState); const urlParams = new URL(window.location.href).searchParams; // setInitialState(res.data); console.log('routes', urlParams.get('redirect') || '/'); history.push(urlParams.get('redirect') || '/'); return; } } catch (e) { // 如果失败去设置用户错误信息 const state: API.LoginResult = { status: 'error', type: 'account' }; setUserLoginState(state); } }; }; ``` ## 全局用户状态 - src/app.tsx ```tsx /** * @see https://umijs.org/zh-CN/plugins/plugin-initial-state * 全局状态管理，通过useModel('@@initialState') 获取 * */ export async function getInitialState(): Promise<{ settings?: Partial<LayoutSettings>; currentUser?: API.LoginUserVO; loading?: boolean; fetchUserInfo?: () => Promise<API.LoginUserVO | undefined>; }> { // 获取用户信息 const fetchUserInfo = async () => { try { const res = await getLoginUserUsingGET(); console.log('fetchUserInfo res', res); return res.data; } catch (error) { history.push(loginPath); } return undefined; }; // 如果不是登录页面，执行 const { location } = history; if (location.pathname !== loginPath) { const currentUser = await fetchUserInfo(); return { fetchUserInfo, currentUser, settings: defaultSettings as Partial<LayoutSettings>, }; } return { fetchUserInfo, settings: defaultSettings as Partial<LayoutSettings>, }; } export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => { return { // 页面路由改变时回调 onPageChange: () => { const { location } = history; // 如果没有登录，重定向到 login if (!initialState?.currentUser && location.pathname !== loginPath) { history.push(loginPath); } }, }; }; ``` ## 登出 - src/components/RightContent/AvatarDropdown.tsx - userLogoutUsingPOST ```tsx export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, children }) => { /** * 退出登录，并且将当前的 url 保存 */ const loginOut = async () => { await userLogoutUsingPOST(); } ... ``` ## 路由权限 - src/access.ts ```tsx /** * @see https://umijs.org/zh-CN/plugins/plugin-access * */ export default function access(initialState: { currentUser?: API.LoginUserVO } | undefined) { const { currentUser } = initialState ?? {}; return { canAdmin: currentUser && currentUser.userRole === 'admin', }; } ``` ## User注册 - Mybatis-Plus默认的主键策略是：ASSIGN_ID(使用雪花算法） ```java @TableName(value = "user") @Data public class User implements Serializable { /** * id 如果没有配置策略，则默认为ASSIGN_ID */ @TableId(type = IdType.ASSIGN_ID) private Long id; } ``` ## ProTable 表单 - protable通常用来做查询+ 列表的高级组件，但是也可以用来crud，官方文档提供参数type={'form'}，来转换为表单，目前使用有bug - 方式一：request提交：重置表单会重复调用请求，解决方式，onReset函数会先于request调用，onReset设置标志区分是否reset - 方式二：onSubmit提交（建议使用这种）form 表单init数据 - ``` form={{ initialValues: !isAdd ? currentRow : {}, }} ``` - status Integer类型数据回显问题，valueEnum枚举类型，如果key是数字，回显会直接显示数字 - 暂时解决方式 ，提前赋值为字符串，record.status += ''; - Add/Update Form表单组件 - 封装单独组件 ```tsx {/* add or update form */} <EditForm isAdd={isAdd} open={open} onCancel={cancel} onSubmit={submit} currentRow={currentRow} columns={columns} /> ``` - modal表单中传入值的问题：ProTable中会初始化一次属性，再次打开时候，组件已经赋值，所以有两种解决方式，要么监听外层属性变化，然后重新为表单赋值，要么销毁modal，�