搭建React简单项目

一、项目构建 

目录结构：

安装脚手架

npm install -g create-react-app
// or
yarn add -g create-react-app

一、项目版本

1、react："^18.3.1"；

2、react-router-dom："^6.23.1"；

3、项目创建方式：create-react-app；

 安装路由

npm install react-router-dom -S

二、路由配置

1、路由-对象配置

（1）router.js

        在src/创建一个router.js文件（目录结构可以自定义）

// src/router/index.jsx
import { createBrowserRouter } from "react-router-dom";

// import App from "./App";
import Home from "../views/home/index";
import Login from "../views/Login";
import ErrorPage from "../views/errorPage";
import Content from "../views/Content";
import Abouts from "../views/Abouts";
import Contact from "../views/Contact";
import Users from "../views/users/index";
const router = createBrowserRouter([
    {
        path:'/',
        element: <Home />,
        errorElement:<ErrorPage />,
        children: [
            {
                path: "content",
                element: <Content />,
            },
        ],
    },
    {
        path:'/login/:name?/:age?',
        element: <Login />,
        errorElement:<ErrorPage />,
    },
    {
        path:'/Abouts',
        element: <Abouts />,
        errorElement:<ErrorPage />,
    },
    {
        path:'/Contact',
        element: <Contact />,
        errorElement:<ErrorPage />,
    },
    {
        path:'/users/:name?/:age?',
        element: <Users />,
        errorElement:<ErrorPage />,
    },
    {
        path:'*', // 通配符 代表除上面提到的路径，其他都会直接显示errorPage页面
        element:<ErrorPage />
    }
])
 
export default router

安装axios

 1. 安装 Axios
在项目根目录下打开终端，执行以下命令来安装 Axios： 

npm install axios

 2. 创建 Axios 封装文件
在项目的 src 目录下创建一个名为 utils 的文件夹（如果不存在的话），然后在 utils 文件夹中创建一个名为 http.js 的文件，用于封装 Axios 请求。

import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
    baseURL: 'https://your-api-base-url.com', // 替换为你的 API 基础 URL
    timeout: 10000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么，例如添加请求头
        // const token = localStorage.getItem('token');
        // if (token) {
        //     config.headers.Authorization = `Bearer ${token}`;
        // }
        return config;
    },
    error => {
        // 处理请求错误
        console.error('请求出错:', error);
        return Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data;
    },
    error => {
        // 处理响应错误
        console.error('响应出错:', error);
        return Promise.reject(error);
    }
);

// 封装 GET 请求
const get = (url, params = {}) => {
    return instance.get(url, { params });
};

// 封装 POST 请求
const post = (url, data = {}) => {
    return instance.post(url, data);
};

// 导出封装的请求方法
export { get, post };

请求示例： 

import React, { useState, useEffect,useRef } from "react";
import { useNavigate } from "react-router-dom";
import { post } from '../../utils/http'; // 引入封装的请求
export default function Login() {
    const onCaptchaChange = async () => {
        // 在这里实现获取验证码的逻辑
        console.log("获取验证码");
        try {
            // 发送获取验证码请求
            const response = await post('/login/captcha',{
                company_id: '',
            });
            console.log('验证码响应:', response);
              // 新增：更新 captchaKey 状态
            if (response.data.captchaKey) {
                // setCaptchaData(()=>{
                //     return {
                //         captchaUrl: response.data.captchaUrl,
                //         captchaKey: response.data.captchaKey,
                //     };
                // });
                setCaptchaData((prevData) => {
                    return {
                        ...prevData,
                        captchaUrl: response.data.captchaUrl,
                        captchaKey: response.data.captchaKey,
                    };
                });

                // captchaUrls = response.data.captchaUrl;
                console.log(captchaData,'---{captchaData.captchaUrl}')
            }
            // post('/login/captcha', {
            //     company_id: '',
            // }).then((res) => {
            //     console.log(res, '---res')
            //     // CustomImage({ src: res.data.captchaUrl, alt: '验证码' });
            //     setCaptchaData(() => {
            //         return {
            //             captchaUrl: res.data.captchaUrl,
            //             captchaKey: res.data.captchaKey,
            //         };
            //     });
            // })
        } catch (error) {
            console.error('获取验证码失败:', error);
        }
    };
    // 使用 useEffect 在组件挂载时调用 onCaptchaChange 方法
    useEffect(() => {
        console.log(captchaUrls.current);
        //   onCaptchaChange(); // 调用函数以获取验证码

    }, []);
}

eact如何导入md5 

在 React 项目里对密码进行 MD5 加密，你可以借助 crypto-js 库，它提供了 MD5 加密功能。以下是详细步骤：

npm install crypto-js

// ... existing code ...
import CryptoJS from 'crypto-js'; // 导入 crypto-js 库

export default function Login() {
    // ... existing code ...

    const onFinish = async (values) => {
        console.log("用户名:", values.username);
        // 对密码进行 MD5 加密
        const encryptedPassword = CryptoJS.MD5(values.password).toString(); 
        console.log("加密后的密码:", encryptedPassword);
        console.log("验证码:", values.captcha);
        console.log("所选角色:", values.selectedRole);

        try {
            // 发送登录请求，使用加密后的密码
            const response = await post('/login/validate', {
                account: values.username,
                password: encryptedPassword, // 使用加密后的密码
                captcha: values.captcha,
                company_id: values.selectedRole,
                captchaKey: captchaData.captchaKey,
            });

            console.log('登录响应:', response);
            // 模拟登录成功后跳转到主页
            navigate("/home");
        } catch (error) {
            console.error('登录失败:', error);
        }
    };

    // ... existing code ...
}

 代码解释
- 导入 crypto-js ：运用 import CryptoJS from 'crypto-js' 导入 crypto-js 库。
- 加密密码 ：在 onFinish 函数里，借助 CryptoJS.MD5(values.password).toString() 对密码进行 MD5 加密，然后把加密后的密码传递给登录请求。
通过上述步骤，你就能在 React 项目里使用 MD5 对密码进行加密了。

栏目展示

首页

// home.jsx
import { Outlet,useNavigate } from "react-router-dom"
import Header from "../../components/Header"
import Footer from "../../components/Footer"
// src/views/Home.jsx
export default function Home(){

  // home.jsx
  const navigate = useNavigate()
  const goLogin = () => {
      // params传参
      navigate('/login/csq/100')
  }
  const clickfun = () => {
    console.log('点击了内容区域')
  }
  function menufun() {
    console.log('点击了菜单')
    // this.setState({
    //   msg: '我是菜单'
    // })
  }
  // home.jsx

  return (
      <>
          <div className="main">
            <Header></Header>
            <div className="layout">
              <div className="menu" onClick={goLogin}>去登录</div>
              <div className="content" onClick={clickfun}>内容</div>
              <div className="menu" onClick={menufun}>菜单3</div>
              {/* <div className="menu">{msg}</div> */}
            </div>
            <div className="content">
                <Outlet />
            </div>
            <Footer></Footer>
        </div>
      </>
  )
}

 关于我们

//关于我们页面。tsx文件
import React from 'react'; //引入react 依赖
import Header from '../../components/Header';
import Footer from '../../components/Footer'; //引入底部组件

const Abouts = () => {
    return(
        <>
          <Header />
                <div>
                
                    <h1>关于我们</h1>
                    <p>我们是一个专注于提供优质服务的团队。</p>
                    <p>我们的团队成员都是经验丰富的专业人士。</p>
                
                </div>
            <Footer />
        </>
    );
};
export default Abouts;

联系我们 

//联系我们
import React from'react';
import { Layout } from 'antd';
import 'antd/dist/antd.css';
import Header from '../../components/Header';
// import './index.css';
const { Footer } = Layout;
export default class FooterPage extends React.Component {
    render() {
        return (
           <>
                <Header />
                <Footer style={{ textAlign: 'center' }}>
                    <div className="footer-container">
                        <div className="footer-content">
                            <h3>联系我们</h3>
                            <p>地址：北京市朝阳区</p>
                            <p>电话：010-12345678</p>
                            <p>邮箱：12345678@qq.com</p>
                            <p>工作时间：周一至周五 9:00-18:00</p>
                            <p>QQ：123456789</p>
                        </div>
                    </div>
                </Footer>
           </>
        );
    }
}

页面仅仅展示一下效果