React实现学生信息管理系统前端（附带源码）

2301_81295389

1023人浏览 · 2025-06-19 20:04:05

2301_81295389 · 2025-06-19 20:04:05 发布

前言

本前端项目是我的一个课程设计，一个学生信息管理系统的前端，使用React+Ant design进行页面的展示，连接后端则使用的是比较通用的axios。前端框架、axios方面知识暂时就不在这讲解了，想了解的可以去其他文章学习了解一下。由于前端方面我很少写，其中可能会有很多问题，希望大家可以提出来，我可以尝试解决一下。用户信息这一块的存储我没有做，涉及到redux和token的使用，如果想要实现的可以搜索一些相关知识进行学习。

一、关键代码

1、 axios封装

这是我比较喜欢的对于axios的封装，可以响应我后端的封装返回类，但是其中并没有包含token的部分，比如token的验证和过期。

（1）下载

如果没有下载axios可以使用下面的命令行命令去下载

npm install axios

（2）导入

import axios from "axios";

（3）完整代码

import axios from "axios";
import { message } from "antd";

const request = axios.create({
    baseURL: "/api", // 开发环境可代理到后端
    timeout: 10000,
});

// 请求拦截器（这里没有Token 相关逻辑）
request.interceptors.request.use(
    (config) => {
        // 可以在这里统一设置 Content-Type 等
        config.headers["Content-Type"] = "application/json;charset=utf-8";
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 响应拦截器（保留了通用错误处理，但是没有Token 过期逻辑）
request.interceptors.response.use(
    (response) => {
        const res = response.data;

        const code = res.code || 200;
        const msg = res.message || "请求失败";

        if (code !== 200) {
            message.error(msg);
            return Promise.reject(new Error(msg));
        }

        return res; // 成功时返回 data 层内容
    },
    (error) => {
        console.error("请求异常:", error);
        message.error("网络异常，请检查网络连接");
        return Promise.reject(error);
    }
);

export { request };

2、vite配置文件

在刚写React+vite前端时这一块花费了不少时间，要去对后端的接口的地址小小封装一下，显得不那么肿大。如果端口号等不一致记得修改一下。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
// vite.config.js
// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/student_java_web_backend_war_exploded')
      }
    }
  }
});

二、项目结构

外层是public、src等，这里主要介绍src，下面如果没后缀名的皆是以一个包（文件夹）一个包（文件夹）来介绍的，标题名及是包名。

1、api

这是我前端连接所有后端的API的封装，在里面的api可以重复利用，且比较简洁明了。下面以student.js文件中的一个api为例进行说明。

import {request} from "../utils/index.js";

export function addStudent(data) {
    return request({
        url: "/addStudent",
        method: "post",
        data
    })
}

这里导入了axios封装成的request方法，data就是数据项，url就是后端的路径，前面axios封装中我们是对url前面相同部分进行封装了的，所以这里只是接口的路径，method则是HTTP 方法（如 GET, POST, PUT, DELETE, OPTIONS）。

2、pages

这些部分就是页面的包，里面装的全是各个页面的jsx文件以及样式文件，用路由进行跳转。

3、static

这里面装一些静态资源，例如图片等。

4、util

这里面放着一些工具的封装，例如对于axios的封装axios.js就在这里面。

5、App.jsx、main.jsx

在现代的 React 项目中，这两个文件在项目的结构和功能上扮演着不同的角色。

App.jsx 文件通常是整个应用程序的起点，它作为根组件，负责组合其他组件以构建用户界面。这个文件是你应用的核心部分，所有页面、组件和逻辑都会在这里被引入或定义。作用：App.jsx 是一个容器组件，用于组织你的应用中的其他组件。你可以把它看作是你的应用的“主视图”。

main.jsx 文件则是用来启动 React 应用程序的地方。它负责创建 React 根节点并将 App 组件挂载到 DOM 中。这是你应用的入口点，通常与 Webpack 或 Vite 的配置一起工作来加载你的 JavaScript 模块。作用：main.jsx 主要用于调用 ReactDOM.createRoot() 方法（在 React 18 及以上版本）或者 ReactDOM.render() 方法（在 React 17 及以下版本），以此来渲染 App 组件到 HTML 文档中的特定位置。