基于React框架的智慧校园的前端开发设计

史志腾 杨保华

摘要：该文为常州机电职业技术学院教学事务管理设计了智慧课堂系统，功能包括老师课程的安排，授课教师的安排，教课地点的安排，学生的请假，活动使用教室的安排等等。该系统有利于后期信息的查询，更新，维护，保存等，避免了人工操作对于数据准确性造成的偏差。在智慧课堂的设计中，运用了React，Spring，B/S结构，数据库MYSQL与TOMCAT服务等技术。智慧课堂提高了管理学校事务的效率，使学校的管理更加简单，方便，准确。

关键词：智慧课堂 前端React-rative MYSQL15.0

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）22-0208-02

1 緒论

随着互联网的日益发展，越来越多的事件处理变得更加简洁和方便。当前高校中越来越多的学生，对于学校管理的压力日益增加，普通的人工管理已经不能满足现状。在这种情况下智慧校园就凸显出他的重要性和必要性。针对本学校事务管理工作的实际情况，利用现在网络的便捷性，实现基于工作流程的智慧课堂管理系统，实现办公自动化，大大提高了工作效率。

本文以常州机电职业技术学院实际情况的智慧课堂管理系统，使得教学管理更加简洁，易操作，使得信息的查询更加的灵活，方便，快捷，准确，让信息的存储更加的安全。

2技术概括

本次开发课题我们对于整个项目使用了B/S三层架构表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL），在表现层（界面层）采用React-Native技术来实现页面与业务逻辑层的交互，在数据访问层采用SpringJPA技术与MySQL数据库进行连接，使用SQL语句对MySQL数据库进行查询，增加，删除，更改等操作。整个项目使用到了JSP，React-Rative，SpringJPA，Tomcat服务器，MySQL15.0等。

3 智慧课堂系统设计

3.1功能设计

3.2主体数据模块设计

主体数据模块的功能是：教工数据修改与查询，学生数据的修改与查询，课程的性质的定义，上课课程的排版，校园时间的管理和上课教室的安排。

（1） 教工数据

在教工模块中，我们根据机电学院的原本数据库和官网的CRP数据，我们按照原本的数据建造了与之前数据相同的数据库，教工中我们从数据库提取了教职工的姓名，自己的工号，自己所在的二级学院或者是自己所在工作部门，联系方式移动电话号码短号和长号，家庭住址（现居地与自己户籍所在地）等简略信息。在每一条数据前有个小小的标志，点击后会获取自己想要知道老师的具体数据。

在此模块中我们搜集了全校教职工的信息，设置了查找功能，根据自己所要查找的姓名，工号就可以找到。

在查找中我们不仅仅设置了根据姓名查找也设置了批量查询可以直接搜索部门或者团队等，查询整个部门和团队的人员。

（2） 班级数据

利用SpringJPA读取数据库，列举出班级代码，班级所在的系部，同时班级的辅导员，自己所学专业，班级名称和届数。

同时与教工数据也可根据一些来查找班级的信息，如可以根据自己的班主任的名字来搜索她所管理的班级，也可以根据自己的班级名称来查找自己的班级信息。根据权限大于第五等级的权限才可以查询有关学生数据的信息，第五级权限只能查看自己的信息和数据。老师或者书记及院长可以根据学生所在的系部，班级，姓名和学号来查找自己想要了解的学生。学生信息里面包括自己的姓名，学号，联系方式，入学时间，家庭住址，自己所在系部，身份证号等。

（3） 教室管理

教室管理是属于教务管理人员的安排，教务管理人员根据本周上课安排是否使用机房，阶梯教室，班级人数，上课需要用到哪些设备，教学区等一系列的要求帮老师安排上课的教室。

学生亦可以根据自己上课的区域，教室名称，教室编号等信息来查找自己的课程是在哪里进行上课。

主体数据模块的功能是：教工数据修改与查询，学生数据的修改与查询，课程的性质的定义，上课课程的排版，校园时间的管理和上课教室的安排。

直接利用SpringJPA读取数据库，列举出教师信息和学生信息，例如教师工号、院系单位；学生信息里面包括自己的姓名，学号，联系方式，入学时间，家庭住址，自己所在系部，身份证号，学生的班级代码，班级所在的系部，同时班级的辅导员，自己所学专业，班级名称和届数。

校历管理安排整个学院的各个班级的课表，课时，上课老师，上课地方，上课时间等。

4功能模块设计

通过前期对学校事务管理的了解，系统有以下要求：

（1） 每个系统必有的账号登录功能：

由于此课题不仅对于老师，院长等领导登录，还有教务查询，学生等，最后还有一个管理员管理等。因此对于此系统登录我们设置4个等级权限。

（2） 较为友好的登录界面：

此系统供学生及老师等使用，人数较为多，因此需要有较为有好，且简洁易懂，容易操作的界面。

（3） 系统内部须有的功能：

（a）对于登录用户信息的修改；（b）老师与老师之间联系；（c）对于自己班级人员，课程，上课安排的管理；（d）对课程安排进行管理；（e）对请假事务的进行安排；（f）对授课计划进行安排；（g）系统退出功能。

因此，系统中主要包括以下功能模块：系统登录模块，主体数据模块，事务管理模块，授课安排模块，个人信息模块，系统退出模块……

基于流程的事务管理模块：事务管理中分为多个功能，学生请假，老师调课安排，机房的申请使用，考试地点的安排，学生.教职工的考情审核等等。以学生请假请假为例，其流程是：一至两天的请假，系统将通过邮箱给班主任发送提醒，来处理学生请假问题；三天至一周请假需先交由班主任审批， 绕后由二级学院的教务管理人员审批，请假成功后通知学生。其流程图如图2所示，操作界面如图3所示。

5 结论

本文设计的智慧课堂系统，功能包括日常教务管理任务，使得后期信息的查询，更新，维护，保存等变得简洁和高效。在智慧课堂的设计中，运用了React，Spring，B/S结构，数据库MYSQL与TOMCAT服务等技术，智慧课堂系统使学校的管理更加简单，方便，准确。

参考文献：

[1] 祁晖，底晓强，毕琳，等. 基于React的MOOC移动学习平台建设研究[J]. 教育现代化， 2016（38）.

[2] 赵培. 基于B/S结构的图书馆管理系统的设计与实现[J]. 中小企业管理与科技旬刊， 2018（1）.

[3] 张来卿，徐震宇，季统凯. Mobile side data upload rapid realization method based on react-native：， CN 105635265 A[P]. 2016.

【通联编辑：王力】