点名系统的设计与实现

发布时间：2023-05-21

一、需求分析

点名系统是一款简单的学生点名工具，需求主要有以下几个方面：

  1. 学生名单管理。系统需要有学生名单管理页面，可以添加、删除、修改学生信息；
  2. 点名功能。系统需要有点名功能，可以在名单中随机选择一个学生进行点名；
  3. 数据统计。系统需要有数据统计功能，可以统计每个学生点名的次数。

二、系统设计

系统采用了前后端分离的设计方案，前端使用React框架进行开发，后端使用Node.js搭建服务器，使用MongoDB作为数据库存储。

三、前端设计

  1. 学生名单管理页面。页面采用表格形式展示学生信息，可以进行新增、删除、修改、查询等操作。代码示例：
class StudentList extends React.Component {
  state = {
    students: [], // 学生列表
    showModal: false, // 是否显示模态框
    modalType: '', // 模态框类型：新增、编辑、删除
    selectedId: '', // 选中的学生id
    name: '',
    gender: '',
    age: '',
  };
  componentDidMount() {
    this.fetchStudents();
  }
  fetchStudents = () => {
    // fetch students from server
    // update this.state.students
  };
  handleAdd = () => {
    // show add modal
  };
  handleEdit = (id) => {
    // show edit modal of student with specified id
  };
  handleDelete = (id) => {
    // show delete modal of student with specified id
  };
  handleSave = () => {
    // save student info
    // update this.state.students
    // hide modal
  };
  handleCancel = () => {
    // hide modal
  };
  render() {
    const columns = [
      { title: '姓名', dataIndex: 'name', key: 'name' },
      { title: '性别', dataIndex: 'gender', key: 'gender' },
      { title: '年龄', dataIndex: 'age', key: 'age' },
      {
        title: '操作',
        dataIndex: 'id',
        key: 'id',
        render: (id) => (
          <span>
            <a onClick={() => this.handleEdit(id)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={() => this.handleDelete(id)}>删除</a>
          </span>
        ),
      },
    ];
    return (
      <>
        <button type="primary" onClick={this.handleAdd}>
          新增
        </button>
        <Table dataSource={this.state.students} columns={columns} />
        <AddEditDeleteModal
          visible={this.state.showModal}
          type={this.state.modalType}
          name={this.state.name}
          gender={this.state.gender}
          age={this.state.age}
          onNameChange={this.handleNameChange}
          onGenderChange={this.handleGenderChange}
          onAgeChange={this.handleAgeChange}
          onSave={this.handleSave}
          onCancel={this.handleCancel}
        />
      </>
    );
  }
}
  1. 点名页面。页面上方显示上一个被点到的学生，下方有“点名”按钮，点击后会随机选择一个学生。
class NamePicker extends React.Component {
  state = {
    name: '', // 上一个被点到的学生姓名
    candidates: [], // 参与点名的学生集合
  };
  componentDidMount() {
    this.fetchCandidates();
  }
  fetchCandidates = () => {
    // fetch students from server and update this.state.candidates
  };
  handlePick = () => {
    // randomly pick a student from this.state.candidates
    // update this.state.name and remove the student from this.state.candidates
  };
  render() {
    return (
      <>
        <div>上一个被点到的学生：{this.state.name}</div>
        <button type="primary" onClick={this.handlePick}>
          点名
        </button>
      </>
    );
  }
}

四、后端设计

  1. 学生信息管理API。通过该API实现学生信息的增删改查，代码示例：
// 添加新学生
app.post('/api/students', async (req, res) => {
  try {
    const newStudent = new Student(req.body);
    await newStudent.save();
    res.status(201).json(newStudent.toJSON());
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});
// 删除学生
app.delete('/api/students/:id', async (req, res) => {
  try {
    const id = req.params.id;
    await Student.findByIdAndDelete(id);
    res.sendStatus(204);
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});
// 修改学生信息
app.put('/api/students/:id', async (req, res) => {
  try {
    const id = req.params.id;
    const updates = req.body;
    await Student.findByIdAndUpdate(id, updates);
    const updatedStudent = await Student.findById(id);
    res.json(updatedStudent.toJSON());
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});
// 获取所有学生信息
app.get('/api/students', async (_, res) => {
  try {
    const students = await Student.find({});
    res.json(students.map((s) => s.toJSON()));
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});
// 获取指定id的学生信息
app.get('/api/students/:id', async (req, res) => {
  try {
    const id = req.params.id;
    const student = await Student.findById(id);
    res.json(student.toJSON());
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});
  1. 点名API。通过该API实现随机点名和点名次数统计，代码示例：
// 获取随机学生id
app.get('/api/pick', async (_, res) => {
  try {
    const students = await Student.find({});
    const ids = students.map((s) => s._id);
    const pickedId = ids[Math.floor(Math.random() * ids.length)];
    const pickedStudent = await Student.findById(pickedId);
    res.json(pickedStudent.toJSON());
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});
// 获取所有学生的点名次数
app.get('/api/stats', async (_, res) => {
  try {
    const students = await Student.find({});
    const stats = students.reduce((acc, s) => {
      acc[s.name] = s.pickedCount;
      return acc;
    }, {});
    res.json(stats);
  } catch (err) {
    console.error(err);
    res.status(500).send(err.message);
  }
});

五、总结

点名系统是一款简单实用的学生点名工具，本文主要介绍了其需求分析、系统设计以及前后端代码实现。通过该系统，我们不仅可以快速进行学生点名，还可以方便地管理学生名单和统计每个学生的点名次数。

推荐文章