基于蒙氏理念的幼儿观察与记录系统Web端设计与开发

目 录
1.绪论 1
1.1研究背景 1
1.2问题提出 1
1.3研究意义 1
2.国内外研究进展 3
2.1幼儿观察与记录系统研究 3
2.2前端技术框架研究 3
2.3蒙台梭利教育理念研究 4
3.需求分析及系统设计 5
3.1需求分析 5
3.1.1功能性需求分析 5
3.1.2非功能性需求分析 5
3.2模型设计 6
3.3模块功能设计 8
3.3.1教师端模块功能 10
3.3.2家长端模块功能 10
3.4 UI 设计 10
4．系统开发及测试 13
4.1前端开发 13
4.2核心功能实现 13
4.2.1教师端核心功能 14
4.2.2家长端核心功能 18
4.3系统测试 22
4.3.1测试方案 22
4.3.2系统测试 22
5. 总结与展望 23
5.1 总结 23
5.2 展望 23
参考文献 24
致 谢 26
附录 1 27
附录 2 33
3.需求分析及系统设计

3.1需求分析

3.1.1功能性需求分析

蒙氏教育注重幼儿的自身意志，并认为有限度的自由是该教育体系的基础，教师及
家长在教育中应摈弃自身意愿，以幼儿意志为前提，在关注、正向引导和适当干预下，
“以观察取代灌输式教学”、以记录呈现成长趋势[14]。
由于幼儿在不同成长阶段对于认知能力、关注点、思维方式等都有所不同，故而观察记录一定要具备高效性——观察记录内容要符合幼儿身心发展规律，引导幼儿运用多种形式进行观察记录[15]。
另外，教师观察行为容易受多种情境因素的影响，比如他们可能更倾向于关注某些特征更明显的行为，并忽视了某些特征较不明显的行为[16]。故而对观察记录设定标准化是有必要的。
鉴于此，本系统以观察记录、成长档案为核心功能。在此基础上，为记录设定一定的标准，并设计开发不同的记录形式，最后以数据可视化的形式，呈现幼儿成长趋势， 以便教师及家长回顾幼儿成长、并做出下一步教育计划。

3.1.2非功能性需求分析

除了上述功能性需求之外，本系统还需实现非功能性需求如下：
1.页面交互性。对于教师职业的繁杂性和信息管理的简易化，在考虑到系统界面时视觉体验、操作体验和情感体验尤为重要。视觉体验方面，统一样式、简化布局，提升视觉舒适度；操作体验方面，提升操作的连贯性和逻辑性，例如增加一些指示性的文字提示和 icon、操作成功后弹窗提示、与后台请求失败后出现相应的提醒及原因等；情感层面上，需要切合用户本身的情感需求，为用户带来更好地情感体验。
2.数据安全性。对于一个观察记录系统，数据是系统得以正常运作的核心，如果发生数据丢失或者出错，可能令用户产生损失。在账号密码上传时做加密处理；且对于不同版本的用户进行权限管理，以保证系统整体的安全性。
3.系统可扩展性。考虑到系统后续的业务需求更改或更新迭代，系统的可扩展性十
分重要。除了特殊需求以外，数据尽量采用变量而非静态数据的形式，尽量减少后续新

增的业务对于原有代码及功能的影响。
4.代码可维护性。将组件分在具体的代码文件，并根据功能及模块的不同作了规范的管理，具体的封装函数予以注释说明，提高代码的可读性和复用性。

// 获得综合素养领域分数
const _getComprehensiveQuality = async (dataRadar) => { const _data = await getRadar(dataRadar); comprehensiveQualityData.value = _data.data; getRadarChart();	// 雷达图
};

// 获得综合素养 - 五大领域分数
const _getArea = async (dataBar) => { areaData.value = await showArea(dataBar); areaData.value = areaData.value.map((item) => {
let { title1Id, title1, list2 } = item; list2 =
list2 && list2.map((inner) => {
let { title2, score } = inner; return {
name: title2, data: score, type: "line", smooth: true, symbol: "circle",
};
});
getAreaChart(title1Id, list2); return { title1Id, title1, list2 };
});
};

// 获得综合素养 - 行为特征分数
const _getBehavior = async (dataBar) => { let montempdata1 = [],
montempdata2 = [];
const data = await showBehavior(dataBar); behaviorData.value = data.map((item) => {
if (
item.name === "专注度" || item.name === "秩序性" || item.name === "独立性"
) {
montempdata1.push(item);
} else { montempdata2.push(item);
}
});
monData.value = []; //先初始化
monData.value.push(
{ title1Id: 6, title1: "自身特征", list2: montempdata1 },
{ title1Id: 7, title1: "集体特征", list2: montempdata2 }
);
monData.value = monData.value.map((item) => { let { title1Id, title1, list2 } = item; list2 =

list2 && list2.map((inner) => {
let { name, score1 } = inner; return {
name,
data: score1, type: "line", smooth: true, symbol: "circle",
};
});
getBehaviorChart(title1Id, list2); return { title1Id, title1, list2 };
});
};