react_16

主页

import {DownCircleOutlined,MenuFoldOutlined,VerticalAlignTopOutlined,
} from "@ant-design/icons";
import { Button, Layout, Menu } from "antd";
import { ItemType } from "antd/es/menu/hooks/useItems";
import { Link, Navigate, Outlet, useNavigate } from "react-router-dom";
import Icon from "../store/Icon";
import StudentStore from "../store/StudentStore";
import RoutesStore from "../store/RoutesStore";
import { observer } from "mobx-react-lite";
import { useEffect } from "react";function A8Main() {const items: ItemType[] = [{label: <Link to="/student">学生管理</Link>,key: 1,icon: <DownCircleOutlined />,},{label: <Link to="/teacher">教师管理</Link>,key: 2,icon: <VerticalAlignTopOutlined />,},{label: "用户管理",key: 3,icon: <MenuFoldOutlined />,children: [{label: "功能一",key: 31,icon: <Icon name="PicLeftOutlined"></Icon>,},{label: "功能二",key: 32,icon: <Icon name="BorderHorizontalOutlined"></Icon>,},],},];const nav = useNavigate();//点击注销按钮，清空localStorage里面和state数据，跳转到登录页面function onClick() {RoutesStore.reset();nav("/login");}//useEffect()的执行时机是先生成了jsx代码，然后执行了副作用，然后再渲染，正在渲染的时候执行了调转，所以看到//主页一闪而过，/* useEffect(() => {if (RoutesStore.username === "") {nav("/login");}}, []); */if (RoutesStore.username === "") {return <Navigate to={"/login"}></Navigate>;}return (<Layout><Layout.Header><span>欢迎您【{RoutesStore.username}】</span><Button onClick={onClick}>注销</Button></Layout.Header><Layout><Layout.Sider><Menu items={RoutesStore.menus} theme="dark" mode="inline"></Menu></Layout.Sider><Layout.Content><Outlet></Outlet></Layout.Content></Layout></Layout>);
}
export default observer(A8Main);

R.ts文件

export default interface R<T>{code:number,data:T,message?:string}

Student.ts文件

export interface Student {id: number;name: string;sex?: string;age?: number;photo?: string;}export interface PageResp<T>{total: number,list : T[],}export interface StudentQueryForm{name?:string,sex?:string,age?:string}export interface Route{path:string,element:string}// 服务器返回的菜单数据
export interface Menu {key: string,label: string,children?: Menu[],icon: string,routePath: string
}// 路由 + 菜单
export interface MenuAndRoute {routeList: Route[]menuTree: Menu[]
}// 登录请求
export interface LoginReq {username: string,password: string
}// 登录响应
export interface LoginResp {token: string
}