一、需求分析
点名系统是一款简单的学生点名工具，需求主要有以下几个方面：
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) => (
),
},
];
return (
2、点名页面。页面上方显示上一个被点到的学生，下方有“点名”按钮，点击后会随机选择一个学生。
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 (
上一个被点到的学生：{this.state.name}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285305.html
微信扫一扫 
支付宝扫一扫 