一、需求分析
點名系統是一款簡單的學生點名工具，需求主要有以下幾個方面：
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/zh-tw/n/285305.html
微信掃一掃 
支付寶掃一掃 