react 5 实现学生管理系统

效果图

全景图效果一

学生列表效果图

学生列表详情效果图

具体代码实现

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <App />,

  document.getElementById("root")
);

APP.js

// 后台管理系统模板
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Login from "./Pages/Login";
import Admin from "./Pages/Admin";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" exact component={Login} />
        <Route path="/" component={Admin} />
      </Switch>
    </Router>
  );
}

login.js

page/Login

import React from 'react'

export default function Login() {
    return (
        <div>
            <h1>登录页面</h1>
        </div>
    )
}

Admin.js

pages/Admin

import React from "react";
import Layout from "../../compoments/Layout";
import Header from "../../compoments/Header";
import Menu from "../../compoments/Menu";
import Welcome from "../../compoments/WelCome";
import { Route, Switch } from "react-router-dom";
import StudentList from "../Student/StudentList";
import StudentLAdd from "../Student/studentAdd";
import StudentDetail from "../Student/StudentDetail";
import CoursesAdd from "../Courses/CoursesAdd";
import CoursesList from "../Courses/CoursesList";

export default function Admin() {
  return (
    <Layout header={<Header />} aside={<Menu />}>
      <Switch>
        <Route path="/" exact component={Welcome} />
        <Route path="/student" exact component={StudentList} />
        <Route path="/student/add" exact component={StudentLAdd} />
        <Route path="/student/:sno" exact component={StudentDetail} />
        <Route path="/courses" exact component={CoursesList} />
        <Route path="/courses/add" exact component={CoursesAdd} />
      </Switch>
    </Layout>
  );
}

Welcome.js

compoments/Welcome

import React from 'react'

export default function WelCome() {
    return (
        <div>
            <h1>欢迎使用学生管理系统</h1>
            <div>作者——吴志春</div>
        </div>
    )
}

StudentList.js

import React, { useState, useEffect } from "react";
import StudentSearchBar from "../../compoments/StudentSearchBar";
import StudentTable from "../../compoments/StudentTable";
import { searchStudents } from "../../services/student";
import qs from "query-string";
import Pager from "../../compoments/common/Page/Pager";

/**
 * 该函数用于获取地址栏参数中提供的查询条件，返回一个对象
 * 如果某些条件在地址中缺失，该函数会使用默认值
 */

function getQuery(search) {
  const queryDefault = {
    page: 1,
    limit: 10,
    key: "",
    sex: -1
  };

  let query = qs.parse(search);
  query = Object.assign({}, queryDefault, query);
  query.page = +query.page;
  query.limit = +query.limit;
  query.sex = +query.sex;
  return query;
}

/**
 * 获取服务器的相应结果
 * @param {*} query 查询条件
 */
function useResp(query) {
  const [resp, setResp] = useState({
    total: 0,
    datas: []
  });

  useEffect(() => {
    searchStudents({
      key: query.key,
      limit: query.limit,
      sex: query.sex,
      page: query.page
    }).then(r => {
      setResp(r);
    });
  }, [query.key, query.limit, query.page, query.sex]);

  return resp;
}

/**
 *
 * @param {*} query
 */
function changeLocation(query, history) {
  //根据查询对象改变地址
  const search = qs.stringify(query);
  history.push("?" + search);
}

export default function StudentList(props) {
  const query = getQuery(props.location.search);

  const resp = useResp(query);

  return (
    <div>
      <StudentSearchBar
        defaultValue={{
          key: query.key,
          sex: query.sex
        }}
        onSearch={cod => {
          const newQuery = {
            ...query,
            key: cod.key,
            sex: cod.sex,
            page: 1
          };
          changeLocation(newQuery, props.history);
        }}
      ></StudentSearchBar>
      <StudentTable stus={resp.datas} />
      <div>
        <Pager
          current={query.page}
          total={resp.cont}
          limit={query.limit}
          panelNumber={5}
          onPageChanger={newPage => {
            const newQuery = {
              ...query,
              page: newPage
            };
            changeLocation(newQuery, props.history);
          }}
        />
      </div>
    </div>
  );
}

StudentSearchBar.js

import React, { Component } from "react";

export default class StudentSearchBar extends Component {
  constructor(props) {
    super(props);
    const def = {
      key: "",
      sex: -1
    };
    this.state = Object.assign({}, def, this.props.defaultValue);
  }

  handleRadiChange = e => {
    this.setState({
      sex: +e.target.value
    });
  };

  handleSearch = () =>{
    //抛出事件
    if(this.props.onSearch)
    this.props.onSearch(this.state);
  }

  render() {
    return (
      <div>
        关键字：
        <input
          type="text"
          value={this.state.key}
          onChange={e => this.setState({ key: e.target.value })}
        />
        性别
        <label>
          <input
            checked={this.state.sex === -1}
            type="radio"
            name="sex"
            value={-1}
            onChange={this.handleRadiChange}
          />
          不限
        </label>
        <label>
          <input
            checked={this.state.sex === 0}
            type="radio"
            name="sex"
            value={0}
            onChange={this.handleRadiChange}
          />
          男
        </label>
        <label>
          <input
            checked={this.state.sex === 1}
            type="radio"
            name="sex"
            value={1}
            onChange={this.handleRadiChange}
          />
          女
        </label>
        <button onClick={this.handleSearch}>查询</button>
      </div>
    );
  }
}

StudentTable.js

import React from "react";
import "./index.css";

export default function StudentTable(props) {
  const trs = props.stus.map(s => (
    <tr key={s.id}>
      <td>{s.sNo}</td>
      <td>{s.name}</td>
      <td>{s.sex === 1 ? "女" : "男"}</td>
      <td>{s.birth}</td>
      <td>{s.email}</td>
      <td>
          <a href={`/student/${s.sNo}`}>详情</a>
      </td>
    </tr>
  ));
  return (
    <babel className="tab">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>出生年份</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>{trs}</tbody>
    </babel>
  );
}

Pager.js

请看raect 2 制作分页组件
https://blog.csdn.net/CSDNWuZhiChun/article/details/108519327
点击跳转到raect 2 制作分页组件

StudentDetail.js

import React from 'react'

export default function StudentDetail(props) {
    return (
        <div>
            <h1>学号详情页</h1>
            <h2>学号：{props.match.params.sno}</h2>
        </div>
    )
}

> 以下为功能不完善

studentAdd.js

import React from 'react'

export default function studentAdd() {
    return (
        <div>
            <h1>添加学生</h1>
        </div>
    )
}

CoursesList.js

import React from 'react'

export default function StudentList() {
    return (
        <div>
            <h1>课程列表</h1>
        </div>
    )
}

CoursesAdd.js

import React from 'react'

export default function studentAdd() {
    return (
        <div>
            <h1>添加课程</h1>
        </div>
    )
}

外部接口数据引入

services/student.js

const appkey = "应设计个人利益，想要APPKEY，私聊 博主，谢谢";

/**
 * 获取所有学生
 *
 *
 */
export async function getStudents(page = 1, limit = 10) {
  return await fetch(
    `/api/student/findByPage?appkey=${appkey}&page=${page}&size=${limit}`
  )
    .then(resp => resp.json())
    .then(resp => resp.data);
}

/**
 * 如果传递key属性（key有值），则按照关键字和性别进行查询
 * 如果key没有值，则对所有学生进行分页
 * @param {*} param0
 */
export async function searchStudents({
  page = 1,
  limit = 10,
  key = "",
  sex = -1
} = {}) {
  if (key) {
    // 搜索
    const resp = await fetch(
      `/api/student/searchStudent?appkey=${appkey}&page=${page}&size=${limit}&search=${key}&sex=${sex}`
    )
      .then(resp => resp.json())
      .then(resp => resp.data);
    resp.datas = resp.searchList;
    delete resp.searchList;
    return resp;
  } else {
    //查询全部
    const resp = await getStudents(page, limit);
    resp.datas = resp.findByPage;
    delete resp.findByPage;
    return resp;
  }
}