react学生管理系统案例

一、效果图（实现基本的增删改查功能以及页面跳转）

二、依赖技术
json：server服务器
bootstrap布局样式
useState, useEffect, useRef
react-router
axios
三、代码篇
3.1：服务器的搭建
（这篇博文写的很清楚，照着撸就行json：server服务器的搭建）
3.2项目结构（使用react脚手架搭建的项目）
3.2.1脚手架说明

react 为我们提供了官方的脚手架工具，可以帮助我们快速搭建项目。
安装命令如下：
npx create-react-app <项目名>


目录说明：

.gitignore：忽略文件的配置文件
node_modules：依赖包
package.json：依赖配置以及启动脚本
public：静态文件，入口 html
src：源码目录
App.js ：App 组件
index.js：入口 js 文件

代码篇-index.js文件

//引入相关配置依赖，以及入口组件（app.js）
import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter } from 'react-router-dom'
import App from './components/App';


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

代码篇-app.js文件

//引入需要展示的其他组件以及配置跳转路由
import React from 'react';
import {
    Route, Switch, Redirect, NavLink } from 'react-router-dom'
// 引入相关组件
import About from './About'
import Home from './Home'
import Add from './Add'
import Detail from './Detail'
import Edit from './Edit'

import '../css/App.css';

function App() {
   
  return (
    <div id="app" className="container">
      {
   /* 上面的导航 */}
      <nav className="navbar navbar-default">
        <div className="navbar-header">
          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span className="sr-only">Toggle navigation</span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
            <span className="icon-bar"></span>
          </button>
          <div className="navbar-brand">用户管理系统</div>
        </div>
        <div id="navbar" className="collapse navbar-collapse">
          <ul className="nav navbar-nav">
            <NavLink to='/home' className='navigation'>主页</NavLink>
            <NavLink to='/about' className='navigation'>关于我们</NavLink>
          </ul>
          <ul className="nav navbar-nav navbar-right">
            <NavLink to='/add' className='navigation'>添加用户</NavLink>
          </ul>
        </div>
      </nav>
      <Switch>
        <Route path='/home' component={
   Home} />
        <Route path='/about' component={
   About} />
        <Route path='/add' component={
   Add} />
        <Route path='/detail/:id' component={
   Detail} />
        <Route path='/edit/:id' component={
   Edit} />
        <Redirect to='/home' />
      </Switch>
    </div>
  );
}

export default App;

代码篇-具体业务逻辑组件（About、Add、Detail、Edit、Home）
[①About组件]

import React from 'react'

export default function About() {
   
    return (
        <div className="about container">
            <h1 className="page-header">React 用户管理系统</h1>
            <p>这是关于页面</p>
        </div>
    );
}

[②Add组件]

import React, {
    useState } from 'react'
import axios from 'axios'

export default function Add(props) {
   

    // 存储各种信息，可以直接使用对象
    const [username, setUsername] = useState("");
    const [userage, setUserage] = useState("");
    const [usertel, setUsertel] = useState("");
    const [useremail, setUseremail] = useState("");
    const [usereducation, setUsereducation] = useState("");
    const [usergraduate, setUsergraduate] = useState("");
    const [userprofession, setUserprofession] = useState("");
    const [userintro, setUserintro] = useState("");

    // 对应的事件处理器
    const handleUsername = (e) => {
   
        setUsername(e.target.value);
    }

    const handleUserage = (e) => {
   
        setUserage(e.target.value);
    }

    const handleUsertel = (e) => {
   
        setUsertel(e.target.value)