我的“433”移动Web站点的设计与实现

赵晓凡 高天栋 李文迪 陈燕

摘 要：随着高等职业教育对培养高素质技术技能人才提出了新的更高要求。我院提出新的人才培养计划——“433”学生成才工程。该工程目标不仅为了培养人才，更是秉持一个“人人皆可成才、人人尽其才”的科学理念。为落实落细工程项目，学院要求开发一套“433”学生成才工程信息化系统。本设计为其中一个分支，实现移动端学生“433”成才信息的信息化处理，为我院的“433”学生成才工程添砖加瓦。

关键词：我的433;移动web;HTML5+CSS3

一、引言

为深化贯彻落实学院第三次党代会“学生培养有新作为”部署，牢固树立新时代新发展理念，促进学生更好发展和更高质量更充分就业为导向，聚焦关键少数、聚焦关键环节、聚焦关键领域。让大学生学有所成，不再是“毕业既失业”，避免大学生“严进宽出”的现象，避免在大学浪费时间，也为了更加贴近人才培养，为此，我院结合了学生发展需求，提出了“433”学生成才工程。

自2019年起，助力学生在校三年期间全部参与成才工程。每位学生都要按时完成规定的“433”任务，学院培育100名优秀指导教师，每年评选20个“433”学生成才典型。全员全方位全过程加强指导落实，跟踪记录每一名学生的成才过程，不仅记录大学期间的成长轨迹，也追加了离校之后的就创业之路，目的是为进一步完善“433”学生成才工程，记录优秀学生的成才历程，探索建立科学的具有特色的助力学生成才体系。

在信息化时代大背景下，要求有一套完整的、科学的信息管理系统来记录学生的成才历程。系统面向全院师生，有移动端有PC端。本设计就是在此背景下，设计的面向学生群体的“433”移动站点。系统前端使用HTML、CSS、JavaScript等相关技术，使用Mysql数据库，后端使用PHP程序设计语言，依据学院“433”政策文件开发移动站点，以便学生实时掌握自身的“433”成才信息。

二、功能模块设计

我的“433”移动web站点主要有5大模块，分别为项目管理、等级管理、成才规划、班级成员与填报规划。学生使用站点规划可以方便的规划自己的433任务。其中项目管理与等级管理实现了项目（等级）的增、删、改、查功能。班级成员栏目可以方便班级班干部收集本班学生“433”完成情况信息。成才规划栏目可以将自身的成才规划逐一显示在界面中。

项目管理模块：系统自带“433”中的“十个一”任务，学生可以查看学校规定的任务，此外，学生还可以自行添加一些“433”中的一些小任务，不仅可以查看，还可以对项目进行添加，编辑与删除。

等级管理模块：十个“433”任务中，每个任务各有若干等级，最低等级能够保证每位学生都能够完成最基本的任务，也可挑战较高等级，提升自己的能力，这里可以对项目等级进行添加、编辑和删除。

成才规划模块：查看学生填报的成才计划并显示积分情况。

班级成员模块：查看班级成员，并可以对其添加、编辑和删除，方便班级干部收集班级成员的“433”完成情况。

填报规划模块：学生填报自己的“433”成才规划，并在成才规划中实时显示积分情况。具体模块如下如图1所示。

三、数据库设计

系统根据功能结构分析设计数据表结构。主要包括项目数据表，等级数据表和用户数据表。其中项目数据表，用于存储项目信息，id作为主键自增，name项目字段，项目中有“433”项目中的十个项目，从担任一任学生干部到取得一个创新创业机会，项目难度逐渐增加。status字段int类型，分别用0、1表示项目的状态，0为删除，1为正常;等级数据表，用于存储等级信息，id作为主键自增，project_id为project项目表的id，将等级和项目联系起来，表示该等级属于项目下属关系。project_name为项目名称，“433”中一共是十个项目。level字段为项目等级，每个“433”项目中至少有两个等级。integral字段用于存储该等级能够获得积分值，用户学生填报规划自动计算积分。status字段int类型，分别用0、1表示项目的状态，0为删除，1为正常;用户数据表，用于存储用户信息，id作为主键自增。username为用户名字段，用于登录的用户名。password为密码字段，要求密码为密文，使用md5方式进行加密，以防密码被其他人恶意使用。name为姓名字段，用于存储学生的姓名。这里并没有设计注册，因为通常用户名都是学校给的，login_time用于用户登录成功后自动记录用户的登录时间，为datetime时间类型。status字段int类型，分别用0、1表示项目的状态，0为删除，1为正常。其表結构如下表1-3所示。

四、系统功能实现

1、登录功能的实现

用户输入用户名和密码，系统验证登录用户名和密码，使用ajax技术与后台通信，进入数据库查询是否为正常的注册用户，如果是，显示系统主界面，如下图1所示;如果不是返回系统登录界面如下图2所示：

2、“项目管理”页面的实现

项目管理模块分为项目列表与添加项目，学生可以对项目进行增删改查。系统中除了包含学院“433”规定的十个项目之外，学生可以添加其他项目。下图3为项目管理列表界面，图4为添加项目管理界面。

3、“等级管理”页面的实现

等级管理对每个项目的不同等级进行管理，比如对“担任一任班干部”这一项目，根据担任校级、院级、年级、班级等不同等级确定对应积分的获得。本模块可以实现对等级信息的增删改查，查询并分页显示等级的功能。其页面效果、等级录入和修改界面如下图5所示。

4、“成才规划”页面的实现

在成才规划模块，学生可以在填报项目中选择某项“433”成才项目，即可在学生信息界面的成才规划模块中显示学生选择的规划项目以及规划项目对应的积分信息，其页面效果如下图6所示。

5、“班级成员”页面的实现

在班级成员模块，班级干部可以查看班级成员信息，按照学期为单位收集本班“433”完成情况信息，也可以对班级成员进行录入功能，查询并分页显示班级成员信息。程序运行效果如下图7所示。

5、“填报规划”页面的实现

在此模块，系统把“433”的十大项目以及每个项目对应的等级积分全部展示在界面上，学生根据自身实际情况进行项目等级的填报，系统自动进行积分计算，计算出来的积分会传送到该生的成才规划中，其运行界面如下图8所示。

五、小结

学院的“433”学生成才工程是一项复杂而又有重要意义的综合性工程，涉及到我院的所有管理部门和二级学院。本系统的开发是其中的某一模块，主要实现了利用信息化手段，减少了辅导员、学生干部收集学生信息的时间和工作量，提高了工作效率，也让学生对自身的规划更加清晰，有助于学生对自身的大学生涯有更好的规划。

参考文献：

[1]傅翠玉，王少茹，洪秀金. Bootstrap框架在响应式WEB开发中的应用[J].电脑知识与技术， 2018：91-92.

[2]胡雅丽.基于BootStrap+JavaScript语言简易计算器的实现[J].太原学院学报（自然科学版）， 2020， 38（01）：73-76.

[3]曹利.基于Bootstrap旅游网站设计与实现[J].太原师范学院学报（自然科学版）， 2019， 18（04）：65-67.

[4] 张超.基于PHP的Web开发框架的设计与实现[D].沈阳：东北大学， 2013.

[5] 林龙健.基于PHP+MySQL的作业管理系统设计与实现[D].广东： 广东工业大学， 2019.

[6] 王林偉. MySQL数据库在视频节目制作管理系统中的应用[J].农业网络信 息， 2017：107-109.