一、项目构建
目录结构：
安装脚手架
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 基础 URLtimeout: 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.jsxconst navigate = useNavigate()const goLogin = () => {// params传参navigate('/login/csq/100')}const clickfun = () => {console.log('点击了内容区域')}function menufun() {console.log('点击了菜单')// this.setState({// msg: '我是菜单'// })}// home.jsxreturn (<><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></>);}
}页面仅仅展示一下效果
