“433”学生成才管理系统设计与实现

赵晓凡 高天栋 李文迪 陈燕

摘 要：“433”学生成才工程是为匹配学院“聚焦智慧企业、聚力智慧服务、成就智慧人生”的人才培养定位所制定的方案。系统以我院“433”学生成才工程为研究内容，以师生行为为研究对象，为我院“433”学生成才工程提供一个信息化、智能化的集收集、存储、分析和汇总为一体的管理平台。系统的開发，为我院“433”学生成才工程的顺利实施添砖加瓦。

关键词：智慧学工;“433”学生成才管理;智慧校园

一、引言

“433”学生成才工程方案紧贴学生成才需求，以促进学生更好地发展、更高质量、更充分地就业创业为导向。2019年起，助力学生在校三年期间全部参与成才工程，并全方位全过程跟踪、记录、指导每名学生的成才过程。从该方案实施以来，学生成才信息主要每年定期利用离线Excel表格、腾讯在线文档、问卷星小程序等方式进行收集、数据需要重复采集、学生不方便实时和自己的规划进行比对、二级学院、职能部门数据统计工作量繁重，并且通过腾讯在线文档等在线方式存在学生信息泄露安全风险。经过前期需求调研，本系统确定以“433”学生成才工程为研究内容，以师生行为为研究对象，采用PHP+Bootstrap+MySQL技术，实现全方位全过程跟踪指导、随时随地记录学生的成才过程，动态综合生成学生成才录，助力新时代学生有新作为。

二、系统功能结构设计

“433”学生成才管理系统研究及建设紧密结合学院“433”成才工程。充分展现学院实施“433”学生成才工程的总体要求及目标、具体任务、实施路径、活动与成果等;便于各职能部门跟踪、分析、监控、指导各二级学院以及各二级学院辅导员、导师指导每个学生“433”学生成才实施情况;为学生提供便捷的“433”成才记录途径和自我分析数据。系统根据应用情境和用户对象规划系统的功能模块，如下图1所示。在系统页面结构上，采用Bootstrap技术，实现响应式布局的“433”成才管理页面布局，便于用户在移动端、PC端等各种终端设备随时随地登录并使用系统。在逻辑功能实现上，基于PHP+ MySQL技术实现业务流程处理和数据的交互，重点围绕学生成才信息的采集、存储、提交与分析汇总展开，并提出可行的解决方案。

三、系统功能模块的实现

（一）公共入口的实现

系统为用户提供统一的用户登录界面。由于系统的使用对象是本校学生和教师，为方便管理，系统共享学院教务系统学生教师用户权限，无需用户另外设置注册功能，只要为用户指定登录账号为学生学号或者教师工号，并且设置一个初始密码，用户根据权限进入系统更改密码即可。

用户输入学号或工号以及初始密码，通过POST方式请求服务器，服务器根据数据库信息自动判断用户身份。如果输入的是工号和初始密码，系统判断工号和密码是否有误，没有错误自动跳转到教师如图端首页面。如果输入的是学号和初始密码，系统判断没有错误则自动跳转到学生端首页面。为保证系统安全性，系统对用户表单提交的密码信息进行了MD5加密处理。学生和教师根据权限进入系统后立即更改密码即可。

（二）学生端功能模块的实现

1.学生端导航菜单的实现

学生按照学号、密码成功登录，进入“433”学生成才系统学生端首页面，系统为学生提供的导航菜单包括“433”简介、“433”典范、“433”信息、我的“433”、个人中心和退出，助力学生全方位了解、实施、完成“433”学生成才工程。

为满足学生群体不受时空限制，随时随地记录自己成长信息，系统采用Bootstrap前端开发工具包，Bootstrap基于HTML、CSS、JavaScript等前端技术，提供了功能强大的内置组件和基于Web的定制功能，为开发人员创建接口提供了一个简洁、统一的解决方案，支持主流的Chrome、IE、Firefox、Safari等浏览器，Bootstrap的响应式CSS能够适用于PC机、平板电脑和手机等屏幕大小分辨率，为系统的跨平台应用提供了较好的技术服务。

系统使用Bootstrap包中的.container类和.container-fluid类。.container类用于固定宽度并支持响应式布局容器，.container-fluid类用于设置界面100%宽度，占据全部视口（viewport）的容器。先在容器中添加<nav>标签，然后采用Bootstrap的.navbar类和.navbar-default类制作导航栏，并且为<nav>标签添加role=”navigation”属性值，可以增加可访问性。然后在<nav>标签中添加类为.navbar-header的div标签，用于设置导航菜单的标题。添加类为.nav 和.navbar-nav的ul标签用于设置界面导航菜单即可实现系统响应式的界面布局方式，用户不仅可以在PC端，还可以在平板电脑或手机端随时随地使用系统，满足用户更好的需求和体验。下图2分别为系统在手机端和PC端的页面展示效果图。

2.我的“433”的实现

学生提交“433”成才数据到服务器后，各职能部门、二级学院以及各导师、辅导员按照权限不同依次审核，并提出具有针对性的反馈或者指导意见。在我的“433”模块，以学期为单位，为学生生成“433”数据画像，最终生成“433”成才录。此模块用于为学生随时提交“433”成才信息，等待导师审核认证通过后反馈的详细成才信息，以便学生了解并掌握“433”任务完成的进度以及导师给予的指导性意见。技术实现上，学生端通过POST请求服务器，请求成功，系统使用数据库的state字段识别信息审核状态，“0”代表未审核，“1”代表审核未通过，“2”代表审核通过。当学生随机提交一条成才记录，数据库中的state会自动更新为“0”。当导师执行审核操作后，系统根据学生提交记录信息的正确与否，state字段动态更新为“1”或“2”。审核完成，动态拼接“433”学生成才积分表，将添加的记录存储数据库，并通过JSON格式传送到学生端，根据数据状态，动态更新学生端显示效果。下图3为学生某一学期完成“433”的进度状态图。

（三）教师端功能模块的实现

1.教师端导航菜单的实现

教师按照教师工号、密码成功登录，进入“433”学生成才系统教师端首页面，系统为教师（以导师权限为例）提供的导航菜单包括工作台、学生管理、成才信息、消息通知、个人中心和退出系统6个部分。

为教师用户可以不受时间空间限制，为系统适配不同终端设备是本系统设计的重点。由于目前终端设备的屏幕分辨率不一致，系统采用Bootstrap开发的响应式布局调整内容样式大小达到预期效果。技术手段上与学生端首页导航菜单实现方法类似，主要使用Bootstrap包中的.container类和.container-fluid类，结合<nav>、<ul>和<li>标签实现系统的响应式界面布局方式以适配不同浏览器、不同分辨率终端设备的正常显示。下图4分别为系统在手机端和PC端的页面展示效果图。

2.成才信息的实现

“成才信息”模块包括“433”成才典范和“433”成才信息管理两个子模块。其中，“433”成才典范模块可以为教师群体查询或者添加满足成才典范条件的学生信息。技术实现上与学生信息的添加和查询功能类似。

以查询功能为例，通过查询数据库，将符合条件的数据信息以JSON数据格式返回，然后使用AJAX将读取到的符合条件的数据信息展示到前端页面。教师也可以根据所带学生“433”完成进度及质量情况，将符合条件的学生信息添加到“433”成才典范库。在“433”成才信息管理模块，教师可以查询所带学生的成才进度信息，也可以按照个人、年级或者专业分类汇总各项成才数据信息，以便给予精准的指导与反馈。在功能实现上，除了直接将后端返回的数据展示到前端界面外，还使用了可视化的图表展示，让数据信息变得更加直观。

开发时使用了开源免費，功能丰富的Echarts数据可视化图表组件，Echarts是一个纯JavaScript开源可视化库，具有丰富的可视化类型，支持交互式数据、跨平台应用。系统使用加载异步数据的方式生成可视化图表。

实现步骤具体如下：1、首先在系统中引入Echarts的JavaScript文件，<script src=”echarts.js”></script>;2、设置一个具有宽高的DOM容器，<div id=”box” style=”width：400px;height：300px”></div>用于放置图表;3、基于准备好的DOM容器（必须使用JavaScript代码获取）初始化Echarts对象;4、使用Echarts对象调用setOption（）方法设置图标的显示标题、图例以及数据的坐标轴相关参数;5、加载异步数据，通过$.post（）方法将后端返回的JSON数据显示到图表中。下图5分别使用柱状图和饼图展示了2018级学生个人完成“433”工程任务的进度和2018级学生积分得分总体分布情况。通过多层次、多维度获得的汇总数据信息，可以帮助教师更加精准、更加有效的为学生提供指导和帮助。

四、小结

本系统是在“互联网+”智慧学工建设的背景下，根据我院“433”学生成才工程的实施需求而开发。系统兼顾PC端和移动终端，包括学生端和教师端。充分展现学院实施“433”学生成才工程的总体要求及目标，具体任务，实施路径，活动与成果等;便于各职能部门、二级学院、各导师跟踪、分析、监控、指导每个学生的“433”实施情况;为学生提供便捷的“433”成才记录途径和自我分析数据。本系统是我院高效实施“433”学生成才工程的重要工具，也是我院学生全生命周期管理系统中的重要组成部分。

参考文献：

[1]吴旻瑜，刘欢，任友群.“互联网+”校园：高校智慧校园建设的新阶段[J].远程教育杂志， 2015， 7（4）：8-15.

[2]NMC. The NMC horizon report： 2017 higher education edition[EB/OL]. 2017-03-10.

[3]李超，周涵.学习管理系统综述和发展趋势展望[J].现代教育技术， 2018.

[4]张伟远，段承贵，封晨.香港大学“互联网+”继续教育系统模式的实践思考[J].现代远程教育研究， 2016（01）：11-18+26.

[5]蒋东兴，付小龙，袁芳，蒋磊宏.高校智慧校园技术参考模型设计[J].中国电化教育，2016（09）：108-114.