React API集成与路由的最佳实践

import { useState, useEffect } from 'react';
function ApiWithFetch() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  // GET请求
  const fetchUsers = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer your-token-here' // 如果有的话
        }
      });
      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  // POST请求
  const createUser = async (userData) => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData)
      });
      if (!response.ok) {
        throw new Error('创建失败');
      }
      const newUser = await response.json();
      return newUser;
    } catch (err) {
      console.error('创建用户失败:', err);
      throw err;
    }
  };
  // PUT/PATCH请求
  const updateUser = async (id, updates) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
        method: 'PUT', // 或 'PATCH'
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updates)
      });
      if (!response.ok) {
        throw new Error('更新失败');
      }
      return await response.json();
    } catch (err) {
      console.error('更新用户失败:', err);
      throw err;
    }
  };
  // DELETE请求
  const deleteUser = async (id) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
        method: 'DELETE',
      });
      if (!response.ok) {
        throw new Error('删除失败');
      }
      return true;
    } catch (err) {
      console.error('删除用户失败:', err);
      throw err;
    }
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;
  return (
    <div>
      <h1>用户列表</h1>
      {data && (
        <ul>
          {data.map(user => (
            <li key={user.id}>
              {user.name} - {user.email}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

# 安装axios
npm install axios

import { useState, useEffect } from 'react';
import axios from 'axios';
// 创建axios实例
const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  }
});
// 请求拦截器
api.interceptors.request.use(
  (config) => {
    // 添加token等
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 响应拦截器
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response) {
      // 服务器返回错误状态码
      switch (error.response.status) {
        case 401:
          // 未授权，跳转登录
          window.location.href = '/login';
          break;
        case 403:
          // 权限不足
          console.error('权限不足');
          break;
        case 404:
          console.error('资源不存在');
          break;
        case 500:
          console.error('服务器错误');
          break;
        default:
          console.error('请求失败');
      }
    } else if (error.request) {
      // 请求已发出但没有响应
      console.error('网络错误，请检查网络连接');
    } else {
      // 请求配置错误
      console.error('请求配置错误:', error.message);
    }
    return Promise.reject(error);
  }
);
function ApiWithAxios() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  // GET请求
  const fetchUsers = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await api.get('/users');
      setUsers(response);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  // POST请求
  const createUser = async (userData) => {
    try {
      const response = await api.post('/users', userData);
      return response;
    } catch (err) {
      console.error('创建失败:', err);
      throw err;
    }
  };
  // 并发请求
  const fetchMultipleData = async () => {
    try {
      const [users, posts] = await Promise.all([
        api.get('/users'),
        api.get('/posts')
      ]);
      return { users: users.data, posts: posts.data };
    } catch (err) {
      console.error('并发请求失败:', err);
      throw err;
    }
  };
  // 带取消请求
  const fetchWithCancel = async () => {
    const source = axios.CancelToken.source();
    try {
      const response = await api.get('/users', {
        cancelToken: source.token
      });
      return response.data;
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log('请求被取消:', err.message);
      } else {
        throw err;
      }
    }
    // 取消请求
    return () => {
      source.cancel('组件卸载，取消请求');
    };
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;
  return (
    <div>
      <h1>用户列表 (Axios)</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

# 安装React Query
npm install @tanstack/react-query

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from './api'; // 你的axios实例
function UsersWithReactQuery() {
  const queryClient = useQueryClient();
  // 获取用户列表
  const { 
    data: users, 
    isLoading, 
    error, 
    refetch 
  } = useQuery({
    queryKey: ['users'], // 查询键
    queryFn: () => api.get('/users'),
    staleTime: 5 * 60 * 1000, // 5分钟内数据不过期
    cacheTime: 10 * 60 * 1000, // 10分钟后清除缓存
    retry: 3, // 失败重试3次
    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
  });
  // 创建用户
  const createUserMutation = useMutation({
    mutationFn: (userData) => api.post('/users', userData),
    onSuccess: () => {
      // 用户创建成功后，使users查询无效，触发重新获取
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
    onError: (error) => {
      console.error('创建用户失败:', error);
    }
  });
  // 更新用户
  const updateUserMutation = useMutation({
    mutationFn: ({ id, ...updates }) => api.put(`/users/${id}`, updates),
    onSuccess: (updatedUser) => {
      // 乐观更新：立即更新UI，不用等重新获取
      queryClient.setQueryData(['users'], (oldUsers) =>
        oldUsers.map(user =>
          user.id === updatedUser.id ? updatedUser : user
        )
      );
    }
  });
  // 删除用户
  const deleteUserMutation = useMutation({
    mutationFn: (id) => api.delete(`/users/${id}`),
    onMutate: async (id) => {
      // 取消正在进行的查询
      await queryClient.cancelQueries({ queryKey: ['users'] });
      // 保存之前的用户列表
      const previousUsers = queryClient.getQueryData(['users']);
      // 乐观更新
      queryClient.setQueryData(['users'], (oldUsers) =>
        oldUsers.filter(user => user.id !== id)
      );
      return { previousUsers };
    },
    onError: (err, id, context) => {
      // 出错时回滚
      queryClient.setQueryData(['users'], context.previousUsers);
    },
    onSettled: () => {
      // 完成后重新获取
      queryClient.invalidateQueries({ queryKey: ['users'] });
    }
  });
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误: {error.message}</div>;
  return (
    <div>
      <h1>用户列表 (React Query)</h1>
      <button onClick={() => refetch()}>刷新</button>
      <button onClick={() => 
        createUserMutation.mutate({ 
          name: '新用户', 
          email: 'new@example.com' 
        })
      }>
        添加用户
      </button>
      {users?.map(user => (
        <div key={user.id} style={{ margin: '10px 0', padding: '10px', border: '1px solid #ddd' }}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <button onClick={() => 
            updateUserMutation.mutate({ 
              id: user.id, 
              name: `${user.name} (已更新)` 
            })
          }>
            更新
          </button>
          <button onClick={() => deleteUserMutation.mutate(user.id)}>
            删除
          </button>
        </div>
      ))}
    </div>
  );
}

// hooks/useApi.js
import { useState, useCallback } from 'react';
import { api } from '../services/api';
export function useApi() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  const request = useCallback(async (config) => {
    setLoading(true);
    setError(null);
    try {
      const response = await api({
        method: config.method || 'GET',
        url: config.url,
        data: config.data,
        params: config.params
      });
      setData(response);
      return response;
    } catch (err) {
      setError(err.response?.data?.message || err.message);
      throw err;
    } finally {
      setLoading(false);
    }
  }, []);
  const get = useCallback((url, params) => 
    request({ method: 'GET', url, params }), [request]);
  const post = useCallback((url, data) => 
    request({ method: 'POST', url, data }), [request]);
  const put = useCallback((url, data) => 
    request({ method: 'PUT', url, data }), [request]);
  const del = useCallback((url) => 
    request({ method: 'DELETE', url }), [request]);
  return {
    loading,
    error,
    data,
    request,
    get,
    post,
    put,
    delete: del,
    setData,
    setError,
    clear: () => {
      setError(null);
      setData(null);
    }
  };
}
// 使用示例
function ApiHookExample() {
  const { 
    loading, 
    error, 
    data: users, 
    get: fetchUsers,
    post: createUser,
    put: updateUser,
    delete: deleteUser
  } = useApi();
  const handleFetch = async () => {
    await fetchUsers('/users');
  };
  const handleCreate = async () => {
    await createUser('/users', {
      name: '新用户',
      email: 'new@example.com'
    });
    handleFetch(); // 重新获取
  };
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;
  return (
    <div>
      <button onClick={handleFetch}>获取用户</button>
      <button onClick={handleCreate}>创建用户</button>
      {users && (
        <ul>
          {users.map(user => (
            <li key={user.id}>
              {user.name}
              <button onClick={() => deleteUser(`/users/${user.id}`)}>删除</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

# 安装React Router
npm install react-router-dom

// App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { Home, About, Users, UserDetail, Dashboard, Settings, NotFound } from './pages';
function App() {
  return (
    <BrowserRouter>
      <div className="app">
        {/* 导航栏 */}
        <nav>
          <ul>
            <li><Link to="/">首页</Link></li>
            <li><Link to="/about">关于</Link></li>
            <li><Link to="/users">用户</Link></li>
            <li><Link to="/dashboard">仪表盘</Link></li>
          </ul>
        </nav>
        {/* 路由配置 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
          <Route path="/users/:id" element={<UserDetail />} />
          <Route path="/dashboard/*" element={<DashboardLayout />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}
// 嵌套路由布局组件
function DashboardLayout() {
  return (
    <div className="dashboard-layout">
      <aside>
        <h3>仪表盘菜单</h3>
        <ul>
          <li><Link to="/dashboard">概览</Link></li>
          <li><Link to="/dashboard/settings">设置</Link></li>
          <li><Link to="/dashboard/analytics">分析</Link></li>
        </ul>
      </aside>
      <main>
        <Routes>
          <Route index element={<Dashboard />} />
          <Route path="settings" element={<Settings />} />
          <Route path="analytics" element={<Analytics />} />
        </Routes>
      </main>
    </div>
  );
}

// pages/UserDetail.jsx
import { useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
function UserDetail() {
  // 获取路由参数
  const { id } = useParams();
  // 编程式导航
  const navigate = useNavigate();
  // 获取location对象
  const location = useLocation();
  // 获取查询参数
  const [searchParams, setSearchParams] = useSearchParams();
  const tab = searchParams.get('tab') || 'info';
  const page = searchParams.get('page') || '1';
  const handleEdit = () => {
    // 导航到编辑页面
    navigate(`/users/${id}/edit`, { 
      state: { from: location.pathname }, // 传递状态
      replace: false // 替换当前记录
    });
  };
  const handleGoBack = () => {
    // 返回上一页
    navigate(-1);
  };
  const changeTab = (tabName) => {
    // 更新查询参数
    setSearchParams({ tab: tabName, page });
  };
  return (
    <div>
      <h1>用户详情 ID: {id}</h1>
      <div>
        <button onClick={handleEdit}>编辑用户</button>
        <button onClick={handleGoBack}>返回</button>
      </div>
      {/* Tab切换 */}
      <div>
        <button onClick={() => changeTab('info')}>基本信息</button>
        <button onClick={() => changeTab('posts')}>帖子</button>
        <button onClick={() => changeTab('comments')}>评论</button>
      </div>
      {/* 根据tab显示不同内容 */}
      {tab === 'info' && <UserInfo userId={id} />}
      {tab === 'posts' && <UserPosts userId={id} />}
      {tab === 'comments' && <UserComments userId={id} />}
    </div>
  );
}

// components/PrivateRoute.jsx
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
function PrivateRoute({ children, roles = [] }) {
  const { isAuthenticated, user, loading } = useAuth();
  const location = useLocation();
  if (loading) {
    return <div>检查权限...</div>;
  }
  if (!isAuthenticated) {
    // 未登录，重定向到登录页
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  if (roles.length > 0 && !roles.includes(user.role)) {
    // 无权限，重定向到无权限页面
    return <Navigate to="/unauthorized" replace />;
  }
  return children;
}
// 使用示例
function AppRoutes() {
  return (
    <Routes>
      {/* 公开路由 */}
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      {/* 需要登录的路由 */}
      <Route path="/dashboard" element={
        <PrivateRoute>
          <Dashboard />
        </PrivateRoute>
      } />
      {/* 需要管理员权限的路由 */}
      <Route path="/admin" element={
        <PrivateRoute roles={['admin', 'superadmin']}>
          <AdminPanel />
        </PrivateRoute>
      } />
      {/* 404页面 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';
// 懒加载组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Users = lazy(() => import('./pages/Users'));
const UserDetail = lazy(() => import('./pages/UserDetail'));
// 加载中组件
const Loading = () => <div>加载中...</div>;
function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<Loading />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
          <Route path="/users/:id" element={<UserDetail />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// routes/index.js
import { lazy } from 'react';
// 懒加载页面组件
const Home = lazy(() => import('../pages/Home'));
const About = lazy(() => import('../pages/About'));
const Users = lazy(() => import('../pages/Users'));
const UserDetail = lazy(() => import('../pages/UserDetail'));
const Login = lazy(() => import('../pages/Login'));
const Dashboard = lazy(() => import('../pages/Dashboard'));
const Admin = lazy(() => import('../pages/Admin'));
const NotFound = lazy(() => import('../pages/NotFound'));
// 路由配置
export const routes = [
  {
    path: '/',
    element: <Home />,
    meta: {
      title: '首页',
      requiresAuth: false
    }
  },
  {
    path: '/about',
    element: <About />,
    meta: {
      title: '关于我们',
      requiresAuth: false
    }
  },
  {
    path: '/login',
    element: <Login />,
    meta: {
      title: '登录',
      requiresAuth: false
    }
  },
  {
    path: '/users',
    element: <Users />,
    meta: {
      title: '用户列表',
      requiresAuth: true
    }
  },
  {
    path: '/users/:id',
    element: <UserDetail />,
    meta: {
      title: '用户详情',
      requiresAuth: true
    }
  },
  {
    path: '/dashboard',
    element: <Dashboard />,
    meta: {
      title: '仪表盘',
      requiresAuth: true,
      roles: ['user', 'admin']
    }
  },
  {
    path: '/admin',
    element: <Admin />,
    meta: {
      title: '管理后台',
      requiresAuth: true,
      roles: ['admin']
    }
  },
  {
    path: '*',
    element: <NotFound />,
    meta: {
      title: '页面不存在',
      requiresAuth: false
    }
  }
];
// 路由渲染组件
export function renderRoutes(routes) {
  return (
    <Routes>
      {routes.map((route, index) => (
        <Route
          key={index}
          path={route.path}
          element={
            <RouteGuard
              element={route.element}
              requiresAuth={route.meta?.requiresAuth}
              roles={route.meta?.roles}
            />
          }
        />
      ))}
    </Routes>
  );
}

// App.jsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import Layout from './components/Layout';
import Home from './pages/Home';
import Posts from './pages/Posts';
import PostDetail from './pages/PostDetail';
import CreatePost from './pages/CreatePost';
import EditPost from './pages/EditPost';
import Login from './pages/Login';
import Register from './pages/Register';
import Profile from './pages/Profile';
import Admin from './pages/Admin';
import NotFound from './pages/NotFound';
import { AuthProvider } from './contexts/AuthContext';
import PrivateRoute from './components/PrivateRoute';
// 创建React Query客户端
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5分钟
      cacheTime: 10 * 60 * 1000, // 10分钟
      retry: 2,
      refetchOnWindowFocus: false,
    },
  },
});
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <BrowserRouter>
          <Routes>
            {/* 公开路由 */}
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
            {/* 需要布局的受保护路由 */}
            <Route element={<PrivateRoute><Layout /></PrivateRoute>}>
              <Route path="/" element={<Home />} />
              <Route path="/posts" element={<Posts />} />
              <Route path="/posts/:id" element={<PostDetail />} />
              <Route path="/posts/create" element={
                <PrivateRoute roles={['admin', 'author']}>
                  <CreatePost />
                </PrivateRoute>
              } />
              <Route path="/posts/:id/edit" element={
                <PrivateRoute roles={['admin', 'author']}>
                  <EditPost />
                </PrivateRoute>
              } />
              <Route path="/profile" element={<Profile />} />
              <Route path="/admin" element={
                <PrivateRoute roles={['admin']}>
                  <Admin />
                </PrivateRoute>
              } />
            </Route>
            {/* 404 */}
            <Route path="*" element={<NotFound />} />
          </Routes>
        </BrowserRouter>
      </AuthProvider>
      {/* 开发工具 */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

// pages/Posts.jsx
import { useQuery } from '@tanstack/react-query';
import { Link, useSearchParams } from 'react-router-dom';
import { api } from '../services/api';
import Pagination from '../components/Pagination';
import Loading from '../components/Loading';
import Error from '../components/Error';
function Posts() {
  const [searchParams, setSearchParams] = useSearchParams();
  const page = parseInt(searchParams.get('page') || '1');
  const limit = parseInt(searchParams.get('limit') || '10');
  const search = searchParams.get('search') || '';
  const { data, isLoading, error, isError } = useQuery({
    queryKey: ['posts', { page, limit, search }],
    queryFn: () => 
      api.get('/posts', {
        params: { 
          _page: page, 
          _limit: limit,
          q: search
        }
      }),
  });
  const handleSearch = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const searchValue = formData.get('search');
    setSearchParams({ page: '1', search: searchValue });
  };
  if (isLoading) return <Loading />;
  if (isError) return <Error message={error.message} />;
  return (
    <div className="posts-page">
      <div className="page-header">
        <h1>文章列表</h1>
        <Link to="/posts/create" className="btn btn-primary">
          新建文章
        </Link>
      </div>
      {/* 搜索 */}
      <form onSubmit={handleSearch} className="search-form">
        <input
          type="text"
          name="search"
          defaultValue={search}
          placeholder="搜索文章..."
        />
        <button type="submit">搜索</button>
      </form>
      {/* 文章列表 */}
      <div className="posts-list">
        {data?.map(post => (
          <div key={post.id} className="post-card">
            <h3>
              <Link to={`/posts/${post.id}`}>{post.title}</Link>
            </h3>
            <p>{post.body.substring(0, 100)}...</p>
            <div className="post-meta">
              <span>作者: {post.author?.name || '未知'}</span>
              <span>日期: {new Date(post.createdAt).toLocaleDateString()}</span>
              <span>阅读: {post.views || 0}</span>
            </div>
            <div className="post-actions">
              <Link to={`/posts/${post.id}`} className="btn btn-sm btn-info">
                查看
              </Link>
              <Link to={`/posts/${post.id}/edit`} className="btn btn-sm btn-warning">
                编辑
              </Link>
            </div>
          </div>
        ))}
      </div>
      {/* 分页 */}
      {data?.length > 0 && (
        <Pagination
          currentPage={page}
          totalPages={Math.ceil(data.total / limit)}
          onPageChange={(newPage) => 
            setSearchParams({ page: newPage.toString(), search })
          }
        />
      )}
    </div>
  );
}

// pages/PostDetail.jsx
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../services/api';
import { useAuth } from '../contexts/AuthContext';
import Loading from '../components/Loading';
import Error from '../components/Error';
function PostDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { user } = useAuth();
  // 获取文章详情
  const { data: post, isLoading, isError, error } = useQuery({
    queryKey: ['post', id],
    queryFn: () => api.get(`/posts/${id}`),
  });
  // 获取评论
  const { data: comments } = useQuery({
    queryKey: ['comments', id],
    queryFn: () => api.get(`/posts/${id}/comments`),
  });
  // 删除文章
  const deleteMutation = useMutation({
    mutationFn: () => api.delete(`/posts/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['posts'] });
      navigate('/posts');
    }
  });
  // 添加评论
  const addCommentMutation = useMutation({
    mutationFn: (comment) => api.post(`/posts/${id}/comments`, comment),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['comments', id] });
    }
  });
  const handleAddComment = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const content = formData.get('content');
    if (!content.trim()) return;
    await addCommentMutation.mutate({
      content,
      authorId: user.id,
      createdAt: new Date().toISOString()
    });
    e.target.reset();
  };
  if (isLoading) return <Loading />;
  if (isError) return <Error message={error.message} />;
  if (!post) return <div>文章不存在</div>;
  const canEdit = user && (user.role === 'admin' || post.authorId === user.id);
  return (
    <div className="post-detail">
      <article>
        <h1>{post.title}</h1>
        <div className="post-meta">
          <span>作者: {post.author?.name}</span>
          <span>发布日期: {new Date(post.createdAt).toLocaleDateString()}</span>
          <span>阅读量: {post.views}</span>
        </div>
        <div className="post-content">
          {post.content}
        </div>
        {/* 操作按钮 */}
        <div className="post-actions">
          {canEdit && (
            <>
              <button 
                className="btn btn-primary"
                onClick={() => navigate(`/posts/${id}/edit`)}
              >
                编辑
              </button>
              <button 
                className="btn btn-danger"
                onClick={() => {
                  if (window.confirm('确定要删除这篇文章吗？')) {
                    deleteMutation.mutate();
                  }
                }}
                disabled={deleteMutation.isLoading}
              >
                {deleteMutation.isLoading ? '删除中...' : '删除'}
              </button>
            </>
          )}
          <button 
            className="btn btn-secondary"
            onClick={() => navigate(-1)}
          >
            返回
          </button>
        </div>
      </article>
      {/* 评论区域 */}
      <section className="comments">
        <h3>评论 ({comments?.length || 0})</h3>
        {/* 添加评论表单 */}
        {user && (
          <form onSubmit={handleAddComment} className="add-comment-form">
            <textarea
              name="content"
              placeholder="写下你的评论..."
              rows="3"
              required
            />
            <button 
              type="submit" 
              disabled={addCommentMutation.isLoading}
            >
              {addCommentMutation.isLoading ? '提交中...' : '提交评论'}
            </button>
          </form>
        )}
        {/* 评论列表 */}
        <div className="comments-list">
          {comments?.map(comment => (
            <div key={comment.id} className="comment">
              <div className="comment-header">
                <strong>{comment.author?.name}</strong>
                <span>{new Date(comment.createdAt).toLocaleString()}</span>
              </div>
              <div className="comment-content">
                {comment.content}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

src/
├── services/
│   ├── api.js          # axios实例和配置
│   ├── auth.js         # 认证相关API
│   ├── posts.js        # 文章相关API
│   └── users.js        # 用户相关API
├── hooks/
│   ├── useApi.js       # API自定义Hook
│   ├── useAuth.js      # 认证Hook
│   └── useQuery.js     # 查询Hook
├── contexts/
│   └── AuthContext.js  # 认证Context
├── pages/
│   ├── Home.jsx
│   ├── Posts.jsx
│   └── Profile.jsx
├── components/
│   ├── Layout/
│   ├── Loading/
│   └── Error/
├── routes/
│   └── index.js       # 路由配置
└── utils/
    └── constants.js

// services/api.js
import axios from 'axios';
// 创建axios实例
const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});
// 请求拦截器
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 响应拦截器
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      // token过期，清除本地存储
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      // 跳转到登录页
      window.location.href = '/login';
    }
    return Promise.reject(error.response?.data || error.message);
  }
);
// 封装常用方法
export const get = (url, params) => api.get(url, { params });
export const post = (url, data) => api.post(url, data);
export const put = (url, data) => api.put(url, data);
export const del = (url) => api.delete(url);
export const patch = (url, data) => api.patch(url, data);
export default api;

// 开发环境代理配置 (vite.config.js)
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

// 在组件卸载时取消请求
useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    try {
      const response = await api.get('/data', {
        signal: controller.signal
      });
      // 处理响应
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('请求被取消');
      } else {
        // 处理其他错误
      }
    }
  };
  fetchData();
  return () => {
    controller.abort();
  };
}, []);

// 基于角色的权限控制
export const checkPermission = (userRole, allowedRoles) => {
  if (!allowedRoles || allowedRoles.length === 0) return true;
  if (!userRole) return false;
  return allowedRoles.includes(userRole);
};