项目搭建

• 创建项目

  # 使用npx创建项目
  npx create-react-app my-react-app
  # 进入项目目录
  cd my-react-app
  # 创建项目目录结构
  mkdir -p src/{apis,assets,components,pages,store,utils}
  touch src/{App.js,index.css,index.js}

  • 使用npx create-react-app创建项目，进入项目目录后通过npm start启动。
  • 调整项目目录结构，包括apis、assets、components、pages等多个文件夹。

• 使用技术

  • 接入scss预处理器，安装sass工具，创建全局样式文件index.scss。

    # 安装sass工具
    npm i sass -D

    // 在src/index.scss中设置全局样式
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

  • 引入组件库antd，安装后在Login页面测试Button组件。

    # 安装antd组件库
    npm i antd

    // 在src/pages/Login/index.jsx中使用Button组件
    import React from 'react';
    import { Button } from 'antd';
    
    const Login = () => {
      return (
        <div>
          <Button type='primary'>登录</Button>
        </div>
      );
    };
    
    export default Login;

  • 使用react-router-dom配置基础路由，创建Layout和Login组件并配置路由规则。

    # 安装react-router-dom
    npm i react-router-dom

    // 在src/router/index.js中配置路由
    import { createBrowserRouter } from 'react-router-dom';
    import Login from '../pages/Login';
    import Layout from '../pages/Layout';
    
    const router = createBrowserRouter([
      {
        path: '/',
        element: <Layout />,
      },
      {
        path: '/login',
        element: <Login />,
      },
    ]);
    
    export default router;

  • 通过craco工具包配置别名路径，在craco.config.js中设置webpack别名，并在jsconfig.json中配置VsCode提示。

    # 安装craco工具包
    npm i @craco/craco -D

    // 在craco.config.js中配置别名
    const path = require('path');
    module.exports = {
      webpack: {
        alias: {
          '@': path.resolve(__dirname,'src')
        }
      }
    };

    // 在package.json中修改scripts命令
    "scripts": {
      "start": "craco start",
      "build": "craco build",
      "test": "craco test",
      "eject": "react-scripts eject"
    }

    // 在src/router/index.js中使用别名
    import { createBrowserRouter } from 'react-router-dom';
    import Login from '@/pages/Login';
    import Layout from '@/pages/Layout';
    
    const router = createBrowserRouter([
      {
        path: '/',
        element: <Layout />,
      },
      {
        path: '/login',
        element: <Login />,
      },
    ]);
    
    export default router;

    // 在jsconfig.json中配置VsCode提示
    {
      "compilerOptions": {
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
      }
    }

• 功能模块实现

  • 登录模块

    • 基本结构搭建

•         在Login/index.js创建登录页面结构，引入antd组件，使用@/assets路径引入图片，在Login/index.scss中设置样式。

• import React from 'react';
  import { Card, Form, Input, Button } from 'antd';
  import logo from '@/assets/logo.png';
  import './index.scss';
  
  const Login = () => {
    return (
      <div className="login">
        <Card className="login-container">
          <img className="login-logo" src={logo} alt="" />
          <Form>
            <Form.Item>
              <Input size="large" placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item>
              <Input size="large" placeholder="请输入验证码" />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" size="large" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  };
  
  export default Login;

• 表单校验实现

  • 为Form组件设置validateTrigger，为Form.Item组件设置name和rules属性进行表单校验。

    import React from 'react';
    import { Form, Input, Button } from 'antd';
    
    const Login = () => {
      return (
        <Form validateTrigger={['onBlur']}>
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号码格式不对'
              }
            ]}
          >
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              { required: true, message: '请输入验证码' },
            ]}
          >
            <Input size="large" placeholder="请输入验证码" maxLength={6} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      );
    };
    
    export default Login;

• 获取登录表单数据

  • 为Form组件设置onFinish属性，在点击登录按钮时触发获取表单数据的函数。

    import React from 'react';
    import { Form, Input, Button } from 'antd';
    
    const Login = () => {
      const onFinish = formValue => {
        console.log(formValue);
      };
    
      return (
        <Form onFinish={onFinish}>
          <Form.Item>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      );
    };
    
    export default Login;

• 封装 request 工具模块

  • 安装axios，在utils/request.js中创建axios实例，配置baseURL、请求拦截器和响应拦截器。

    # 安装axios
    npm i axios

    import axios from 'axios';
    
    const http = axios.create({
      baseURL: 'http://example.com/api',
      timeout: 5000
    });
    
    // 请求拦截器
    http.interceptors.request.use(config => {
      return config;
    }, error => {
      return Promise.reject(error);
    });
    
    // 响应拦截器
    http.interceptors.response.use(response => {
      return response.data;
    }, error => {
      return Promise.reject(error);
    });
    
    export { http };

• 使用 Redux 管理 token

  • 安装react-redux和@reduxjs/toolkit，在store中创建userStore切片，设置token初始状态和setUserInfo等reducers，封装fetchLogin异步方法。

    # 安装react-redux和@reduxjs/toolkit
    npm i react-redux @reduxjs/toolkit

    import { createSlice } from '@reduxjs/toolkit';
    import { http } from '@/utils';
    
    const userStore = createSlice({
      name: 'user',
      initialState: {
        token: ''
      },
      reducers: {
        setUserInfo(state, action) {
          state.token = action.payload;
        }
      }
    });
    
    const { setUserInfo } = userStore.actions;
    const userReducer = userStore.reducer;
    
    const fetchLogin = loginForm => {
      return async dispatch => {
        const res = await http.post('/authorizations', loginForm);
        dispatch(setUserInfo(res.data.token));
      };
    };
    
    export { fetchLogin };
    export default userReducer;

• 实现登录逻辑

  • 在Login组件中调用fetchLogin方法，登录成功后跳转到首页并提示。

    import React from 'react';
    import { message } from 'antd';
    import { useDispatch } from 'react-redux';
    import { fetchLogin } from '@/store/modules/user';
    
    const Login = () => {
      const dispatch = useDispatch();
    
      const onFinish = async formValue => {
        await dispatch(fetchLogin(formValue));
        message.success('登录成功');
      };
    
      return (
        <div>
          <form onSubmit={onFinish}>
            {/* 登录表单字段 */}
          </form>
        </div>
      );
    };
    
    export default Login;

• token 持久化

  • 封装setToken、getToken和clearToken方法，在userStore中setUserInfo时将token存入本地。

    // 在@/utils/token.js中封装存取方法
    const TOKENKEY = 'token_key';
    
    function setToken(token) {
      return localStorage.setItem(TOKENKEY, token);
    }
    
    function getToken() {
      return localStorage.getItem(TOKENKEY);
    }
    
    function clearToken() {
      return localStorage.removeItem(TOKENKEY);
    }
    
    export {
      setToken,
      getToken,
      clearToken
    };

    // 在userStore中使用token持久化方法
    import { createSlice } from '@reduxjs/toolkit';
    import { http } from '@/utils';
    import { getToken, setToken } from '@/utils/token';
    
    const userStore = createSlice({
      name: 'user',
      initialState: {
        token: getToken() || ''
      },
      reducers: {
        setUserInfo(state, action) {
          state.token = action.payload;
          setToken(state.token);
        }
      }
    });
    
    export default userStore;

• 请求拦截器注入 token

  • 在request.js的请求拦截器中，判断是否有token，有则添加到请求头Authorization中。

    // 在utils/request.js中注入token
    import axios from 'axios';
    
    const http = axios.create({
      baseURL: 'http://example.com/api',
      timeout: 5000
    });
    
    http.interceptors.request.use(config => {
      const token = getToken();
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    }, error => {
      return Promise.reject(error);
    });
    
    http.interceptors.response.use(response => {
      return response.data;
    }, error => {
      return Promise.reject(error);
    });
    
    export { http };

• 路由鉴权实现

  • 在components/AuthRoute/index.jsx中创建路由鉴权高阶组件，判断本地是否有token，决定是否重定向到登录页面。

    import React from 'react';
    import { Navigate } from 'react-router-dom';
    import { getToken } from '@/utils';
    
    const AuthRoute = ({ children }) => {
      const isToken = getToken();
      if (isToken) {
        return <>{children}</>;
      } else {
        return <Navigate to="/login" replace />;
      }
    };
    
    export default AuthRoute;

    // 在src/router/index.js中使用AuthRoute组件
    import { createBrowserRouter } from 'react-router-dom';
    import Login from '@/pages/Login';
    import Layout from '@/pages/Layout';
    import AuthRoute from '@/components/AuthRoute';
    
    const router = createBrowserRouter([
      {
        path: '/',
        element: <AuthRoute><Layout /></AuthRoute>,
      },
      {
        path: '/login',
        element: <Login />,
      },
    ]);
    
    export default router;

• Layout 模块

  • 基本结构和样式 reset

    • 在pages/Layout/index.js中使用antd/Layout组件创建页面结构，引入antd的Menu和Popconfirm等组件，设置样式并安装normalize.css进行样式 reset。

      import React from 'react';
      import { Layout, Menu, Popconfirm } from 'antd';
      import { HomeOutlined, DiffOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';
      import './index.scss';
      import 'normalize.css';
      
      const { Header, Sider } = Layout;
      
      const items = [
        {
          label: '首页',
          key: '1',
          icon: <HomeOutlined />,
        },
        {
          label: '文章管理',
          key: '2',
          icon: <DiffOutlined />,
        },
        {
          label: '创建文章',
          key: '3',
          icon: <EditOutlined />,
        },
      ];
      
      const GeekLayout = () => {
        return (
          <Layout>
            <Header className="header">
              <div className="logo" />
              <div className="user-info">
                <span className="user-name">用户名</span>
                <span className="user-logout">
                  <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
                    <LogoutOutlined /> 退出
                  </Popconfirm>
                </span>
              </div>
            </Header>
            <Layout>
              <Sider width={200} className="site-layout-background">
                <Menu
                  mode="inline"
                  theme="dark"
                  defaultSelectedKeys={['1']}
                  items={items}
                  style={{ height: '100%', borderRight: 0 }}
                ></Menu>
              </Sider>
              <Layout className="layout-content" style={{ padding: 20 }}>
                内容
              </Layout>
            </Layout>
          </Layout>
        );
      };
      
      export default GeekLayout;

  • 二级路由配置

    • 在pages目录创建Home、Article、Publish页面文件夹，在router/index.js中配置嵌套子路由，在Layout中配置二级路由出口，使用Link修改左侧菜单内容实现路由切换。

      // 在pages目录创建Home.jsx
      import React from 'react';
      
      const Home = () => {
        return <div>首页内容</div>;
      };
      
      export default Home;

      // 在pages目录创建Article.jsx
      import React from 'react';
      
      const Article = () => {
        return <div>文章管理内容</div>;
      };
      
      export default Article;

      // 在pages目录创建Publish.jsx
      import React from 'react';
      
      const Publish = () => {
        return <div>发布文章内容</div>;
      };
      
      export default Publish;

      // 在src/router/index.js中配置二级路由
      import { createBrowserRouter } from 'react-router-dom';
      import Login from '@/pages/Login';
      import Layout from '@/pages/Layout';
      import Publish from '@/pages/Publish';
      import Article from '@/pages/Article';
      import Home from '@/pages/Home';
      import { AuthRoute } from '@/components/AuthRoute';
      
      const router = createBrowserRouter([
        {
          path: '/',
          element: (
            <AuthRoute>
              <Layout />
            </AuthRoute>
          ),
          children: [
            {
              index: true,
              element: <Home />,
            },
            {
              path: 'article',
              element: <Article />,
            },
            {
              path: 'publish',
              element: <Publish />,
            },
          ],
        },
        {
          path: '/login',
          element: <Login />,
        },
      ]);
      
      export default router;

      // 在Layout组件中配置二级路由出口
      import React from 'react';
      import { Outlet } from 'react-router-dom';
      
      const GeekLayout = () => {
        return (
          <Layout className="layout-content" style={{ padding: 20 }}>
            <Outlet />
          </Layout>
        );
      };
      
      export default GeekLayout;

  • 路由菜单点击交互实现

    • 为Menu组件设置onClick属性实现点击菜单跳转路由，通过useLocation获取当前路由路径实现菜单反向高亮。

      import React from 'react';
      import { Outlet, useNavigate } from 'react-router-dom';
      import { HomeOutlined, DiffOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';
      
      const items = [
        {
          label: '首页',
          key: '/',
          icon: <HomeOutlined />,
        },
        {
          label: '文章管理',
          key: '/article',
          icon: <DiffOutlined />,
        },
        {
          label: '创建文章',
          key: '/publish',
          icon: <EditOutlined />,
        },
      ];
      
      const GeekLayout = () => {
        const navigate = useNavigate();
      
        const menuClick = route => {
          navigate(route.key);
        };
      
        return (
          <Layout>
            <Header className="main-header">
              <div className="logo" />
              <div className="user-info">
                <span className="user-name">用户名</span>
                <span className="user-logout">
                  <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
                    <LogoutOutlined /> 退出
                  </Popconfirm>
                </span>
              </div>
            </Header>
            <Layout>
              <Sider width={200} className="site-layout-background">
                <Menu
                  mode="inline"
                  theme="dark"
                  selectedKeys={['1']}
                  items={items}
                  style={{ height: '100%', borderRight: 0 }}
                  onClick={menuClick}
                ></Menu>
              </Sider>
              <Layout className="layout-content" style={{ padding: 20 }}>
                <Outlet />
              </Layout>
            </Layout>
          );
      };
      
      export default GeekLayout;

      // 菜单反向高亮实现
      import React from 'react';
      import { Outlet, useLocation } from 'react-router-dom';
      import { HomeOutlined, DiffOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';
      
      const items = [
        {
          label: '首页',
          key: '/',
          icon: <HomeOutlined />,
        },
        {
          label: '文章管理',
          key: '/article',
          icon: <DiffOutlined />,
        },
        {
          label: '创建文章',
          key: '/publish',
          icon: <EditOutlined />,
        },
      ];
      
      const GeekLayout = () => {
        const location = useLocation();
        const selectedKey = location.pathname;
      
        return (
          <Layout>
            <Header className="main-header">
              <div className

  • 展示个人信息

    • 在store/userStore.js中编写获取用户信息的逻辑，在Layout组件中触发fetchUserInfo方法获取信息并渲染用户名。

      // store/userStore.js
      import { createSlice } from '@reduxjs/toolkit';
      import { http } from '@/utils';
      import { getToken, setToken } from '@/utils';
      
      const userStore = createSlice({
        name: 'user',
        initialState: {
          token: getToken() || '',
          userInfo: {}
        },
        reducers: {
          setUserToken(state, action) {
            state.token = action.payload;
            setToken(state.token);
          },
          setUserInfo(state, action) {
            state.userInfo = action.payload;
          },
          clearUserInfo(state) {
            state.token = '';
            state.userInfo = {};
            clearToken();
          }
        }
      });
      
      // 解构出actionCreater
      const { setUserToken, setUserInfo, clearUserInfo } = userStore.actions;
      // 获取reducer函数
      const userReducer = userStore.reducer;
      
      const fetchLogin = (loginForm) => {
        return async (dispatch) => {
          const res = await http.post('/authorizations', loginForm);
          dispatch(setUserToken(res.data.token));
        };
      };
      
      const fetchUserInfo = () => {
        return async (dispatch) => {
          const res = await http.get('/user/profile');
          dispatch(setUserInfo(res.data));
        };
      };
      
      export { fetchLogin, fetchUserInfo, clearUserInfo };
      export default userReducer;

  • 退出登录实现

    • 为Popconfirm添加确认回调事件，在store/userStore.js中新增clearUserInfo方法删除token和用户信息，在回调事件中调用该方法并返回登录页面。

      // pages/Layout/index.js
      import React, { useEffect } from 'react';
      import { Layout, Menu, Popconfirm } from 'antd';
      import {
        HomeOutlined,
        DiffOutlined,
        EditOutlined,
        LogoutOutlined,
      } from '@ant-design/icons';
      import { useDispatch, useSelector } from 'react-redux';
      import { fetchUserInfo } from '@/store/modules/user';
      
      const { Header, Sider } = Layout;
      
      const items = [
        // 菜单配置项
      ];
      
      const GeekLayout = () => {
        const dispatch = useDispatch();
        const name = useSelector(state => state.user.userInfo.name);
      
        useEffect(() => {
          dispatch(fetchUserInfo());
        }, [dispatch]);
      
        const loginOut = () => {
          dispatch(clearUserInfo());
          // 假设这里有合适的导航函数，替换为实际的导航逻辑
          // navigate('/login'); 
        };
      
        return (
          <Layout>
            <Header className="header">
              <div className="logo" />
              <div className="user-info">
                <span className="user-name">{name}</span>
                <span className="user-logout">
                  <Popconfirm
                    title="是否确认退出？"
                    okText="退出"
                    cancelText="取消"
                    onConfirm={loginOut}
                  >
                    <LogoutOutlined /> 退出
                  </Popconfirm>
                </span>
              </div>
            </Header>
            <Layout>
              <Sider width={200} className="site-layout-background">
                <Menu
                  mode="inline"
                  theme="dark"
                  defaultSelectedKeys={['1']}
                  items={items}
                  style={{ height: '100%', borderRight: 0 }}
                ></Menu>
              </Sider>
              <Layout className="layout-content" style={{ padding: 20 }}>
                {/* 页面内容 */}
              </Layout>
            </Layout>
          </Layout>
        );
      };
      
      export default GeekLayout;

  • 处理 Token 失效

    • 在http.interceptors.response中判断响应状态码为401时，清除token，跳转到登录页面并刷新页面。

      // 在http.js（假设是配置axios请求相关的文件）中处理Token失效
      import axios from 'axios';
      
      const http = axios.create({
        baseURL: 'http://example.com/api',
        timeout: 5000
      });
      
      http.interceptors.response.use((response) => {
        return response.data;
      }, (error) => {
        if (error.response && error.response.status === 401) {
          // 假设这里有合适的获取和清除token的函数，替换为实际的逻辑
          const token = getToken();
          if (token) {
            clearToken();
          }
          // 假设这里有合适的导航函数，替换为实际的导航逻辑
          // navigate('/login'); 
          window.location.reload();
        }
        return Promise.reject(error);
      });
      
      export { http };