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: 学生管理,
      key: 1,
      icon: ,
    },
    {
      label: 教师管理,
      key: 2,
      icon: ,
    },
    {
      label: "用户管理",
      key: 3,
      icon: ,
      children: [
        {
          label: "功能一",
          key: 31,
          icon: ,
        },
        {
          label: "功能二",
          key: 32,
          icon: ,
        },
      ],
    },
  ];
  const nav = useNavigate();
  //点击注销按钮，清空localStorage里面和state数据，跳转到登录页面
  function onClick() {
    RoutesStore.reset();
    nav("/login");
  }
  //useEffect()的执行时机是先生成了jsx代码，然后执行了副作用，然后再渲染，正在渲染的时候执行了调转，所以看到
  //主页一闪而过，
  /* useEffect(() => {
    if (RoutesStore.username === "") {
      nav("/login");
    }
  }, []); */
  if (RoutesStore.username === "") {
    return ;
  }
  return (
    
      
        欢迎您【{RoutesStore.username}】
        注销
      
      
        
          
        
        
          
        
      
    
  );
}
export default observer(A8Main);

R.ts文件

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

Student.ts文件

export interface Student {
    id: number;
    name: string;
    sex?: string;
    age?: number;
    photo?: string;
  }
  export interface PageResp{
    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
}