# react-java

**Repository Path**: asnone0/react-java

## Basic Information

- **Project Name**: react-java
- **Description**: 该项目是用react配java写一个管理系统

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1. 创建react项目

```
npm create vite@latest my-react-app -- --template react-ts
```

```
npm install
```

### 2. 安装 React Router

```
npm install react-router-dom	
```

### 3.创建公共状态仓库（使用 Context API）

````
// src/context/AppContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

// 定义上下文类型
interface AppContextType {
  user: string | null;
  login: (name: string) => void;
  logout: () => void;
}

// 创建 Context
const AppContext = createContext<AppContextType | undefined>(undefined);

// Provider 组件
export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<string | null>(null);

  const login = (name: string) => {
    setUser(name);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AppContext.Provider value={{ user, login, logout }}>
      {children}
    </AppContext.Provider>
  );
};

// 自定义 Hook 用于消费 Context
export const useAppContext = () => {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext must be used within an AppProvider');
  }
  return context;
};
````

### 4.配置路由

> 修改 src/main.tsx

```
// src/main.tsx (Vite)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AppProvider } from './context/AppContext';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <AppProvider>
        <App />
      </AppProvider>
    </BrowserRouter>
  </React.StrictMode>
);
```

> 创建页面组件

* `src/pages/Home.tsx`
* `src/pages/Profile.tsx`
* `src/pages/Login.tsx`

> Home.tsx

```
// src/pages/Home.tsx
import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <nav>
        <Link to="/profile">个人中心</Link> | 
        <Link to="/login">登录</Link>
      </nav>
    </div>
  );
}
```

> Login.tsx

```
// src/pages/Login.tsx
import { useAppContext } from '../context/AppContext';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const { login } = useAppContext();
  const navigate = useNavigate();

  const handleLogin = () => {
    login('张三');
    navigate('/profile');
  };

  return (
    <div>
      <h2>登录页</h2>
      <button onClick={handleLogin}>模拟登录</button>
    </div>
  );
}
```

>  Profile.tsx

```
// src/pages/Profile.tsx
import { useAppContext } from '../context/AppContext';
import { useNavigate } from 'react-router-dom';

export default function Profile() {
  const { user, logout } = useAppContext();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  if (!user) {
    return <div>请先登录！</div>;
  }

  return (
    <div>
      <h2>欢迎，{user}！</h2>
      <button onClick={handleLogout}>退出登录</button>
    </div>
  );
}
```

> 配置app路由

```
// src/App.tsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Login from './pages/Login';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  );
}

export default App;
```

### 项目结构

```
my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── api/                     # API 请求封装
│   │   ├── index.ts             # axios 实例导出
│   │   ├── auth.ts              # 认证相关 API
│   │   └── types.ts             # API 接口类型定义
│   │
│   ├── context/                 # 全局状态（Context）
│   │   └── AppContext.tsx
│   │
│   ├── hooks/                   # 自定义 Hooks（可选）
│   │   └── useAuth.ts           # 封装登录逻辑
│   │
│   ├── pages/                   # 页面组件
│   │   ├── Home.tsx
│   │   ├── Login.tsx
│   │   └── Profile.tsx
│   │
│   ├── components/              # 通用组件（可选）
│   │   └── Loading.tsx
│   │
│   ├── utils/                   # 工具函数
│   │   └── storage.ts           # localStorage 封装
│   │
│   ├── App.tsx
│   └── main.tsx
│
├── index.html
├── tsconfig.json
├── vite.config.ts
└── package.json
```

#### 根据pages的文件生成路由

```
npm install -D vite-plugin-pages
```

```
src/
└── pages/
    ├── index.tsx        → /
    ├── about.tsx        → /about
    ├── user/
    │   ├── index.tsx    → /user
    │   └── profile.tsx  → /user/profile
    └── login.tsx        → /login
```

#### 动态路由

![image-20251216234651758](C:\Users\asnone0\AppData\Roaming\Typora\typora-user-images\image-20251216234651758.png)

### API 层实现

>  src/api/types.ts

```
// 用户接口类型
export interface User {
  id: number;
  name: string;
  email: string;
}

export interface LoginRequest {
  username: string;
  password: string;
}

export interface LoginResponse {
  token: string;
  user: User;
}
```

> src/utils/storage.ts

```
// 封装 localStorage
const TOKEN_KEY = 'auth_token';

export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY);
export const setToken = (token: string): void => localStorage.setItem(TOKEN_KEY, token);
export const removeToken = (): void => localStorage.removeItem(TOKEN_KEY);
```

> src/api/index.ts

```
// axios 实例配置
import axios from 'axios';
import { getToken } from '../utils/storage';

const api = axios.create({
  baseURL: 'https://fake-api.example.com', // 替换为你的后端地址
  timeout: 10000,
});

// 请求拦截器：自动加 token
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器：统一错误处理
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // token 失效，清除本地数据
      localStorage.clear();
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default api;
```

> src/api/auth.ts

```
import api from './index';
import { LoginRequest, LoginResponse, User } from './types';

// 登录
export const login = (data: LoginRequest): Promise<LoginResponse> =>
  api.post('/auth/login', data).then(res => res.data);

// 获取当前用户信息
export const fetchCurrentUser = (): Promise<User> =>
  api.get('/user/me').then(res => res.data);
```

### 全局状态管理（Context）

> src/context/AppContext.tsx

```
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { User } from '../api/types';
import { getToken, removeToken, setToken } from '../utils/storage';
import { login as apiLogin, fetchCurrentUser } from '../api/auth';

interface AppContextType {
  user: User | null;
  loading: boolean;
  login: (username: string, password: string) => Promise<void>;
  logout: () => void;
}

const AppContext = createContext<AppContextType | undefined>(undefined);

export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  // 启动时尝试恢复登录状态
  useEffect(() => {
    const initAuth = async () => {
      const token = getToken();
      if (token) {
        try {
          const userData = await fetchCurrentUser();
          setUser(userData);
        } catch (err) {
          removeToken();
        }
      }
      setLoading(false);
    };
    initAuth();
  }, []);

  const login = async (username: string, password: string) => {
    const res = await apiLogin({ username, password });
    setToken(res.token);
    setUser(res.user);
  };

  const logout = () => {
    removeToken();
    setUser(null);
  };

  return (
    <AppContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext must be used within AppProvider');
  }
  return context;
};
```