基于微信小程序的助教管理系统的设计与实现

-1-第1章绪论1.1研究目的和意义随着互联网的普及，让网络资源成为高等教育不可缺少的一部分。近年来，翻转课堂作为一种先驱性的教学模式，受到了越来越多的关注。它将传统的授课形式改变，以更加直观的形式呈现，使得学生能够更加深入地理解知识，同时也能够更好地应对复杂的问题。随着翻转课堂的普及，老师们面临着更大的工作量。他们需要拍摄教学视频，并参与现场的问题回复和实践操作。因此，我们建议给老师们安排一名助手，他们将会协助老师们进行课堂讨论和问题回复，从而缓解老师们的工作压力，并且培养他们的专业素养。鉴于此，尝试开发一个基于微信小程序的助教管理系统，该系统的研发，将使助教管理更加合理化。系统完成后，预期可以为教师减轻负担，同时满足教学要求。1.2国内外研究现状在2021年，ReckRM、LeeD.A等人在《Theinfluenceofteachingassistantsinanundergraduateengineeringlaboratorycourse》中提到采用PHP开发语言，结合E-mail的工作原则，设计出一个可以实现双向协同的助教管理系统，它可以实现对学生的信息的实时传输，同时也可以实现对学生的学习过程的实时监控，以及对学习过程的实时反馈，从而有效地实现学习过程的有效监督与控制。使用Email作为记录方式，从而实现助教管理系统。但是发展教学助理的战略往往不发达，受到资源限制和对教学助理专业发展方案的机构立场的影响[1]。虽然ReckRM、LeeD.A对于发展教学助理机制战略不发达这个问题没有合理的解决方案，但是DonglinChai对这个问题进行了很好的优化。在2022年，DonglinChai在《ChineseUndergraduateStudentTeachingAssistantsinaU.S.CollegiateChineseLanguageProgram(English)》此系统采用PHP和MySQL等多种开发技术，这篇文章中首先以“同伴辅导”在欧美高校的形成背景以及在美国中文教学界的若干应用模式，然后以美国某文理学院中文项目招聘中国本科留学生为辅导与批改助理的机制为例，通过定量定性数据来分析其积极影响与现存问题，从而提出可行性改善方案，帮助其中文项目进行改进，同时也希望其他正在或有意开展类似机制的中文项目提起重视，共同推进助理机制的设计、培训与督导工作，提升中文项目的整体教学质量，但是没有提到如何能更好地服务于学生[2]。虽然DonglinChai对于如何更好地服务学生这个问题没有合理的解决方案，但是MorraChristinaN;FultzRobert;RautSamikshaA对这个问题进行了很好的优化。在2022年，MorraChristinaN;FultzRobert;RautSamikshaA在《TALessonfromthePandemic:UtilizingDigitalToolsToSupportStudentEngagementduringInstructionalAssistant-LedSessions》此系统是利用C／S和B／S混合的工作模式，由C／S实现系统功能，而B／S对数据进行统一处理，两者取其精华去其糟粕，使此助教系统得到了最大限度的优化，以满足高要求的工作需要，同时提到学生助教(IAs)是大多数学生在高等教育中大学经历的一个组成部分。当进行适当的培训时，IAs可以提高学生的成绩、对课程内容的参与度、坚持性和保持性。同时总结了我们为BLAs提供的培训和指导，这些培训和指导涉及如何最好地调整数字教育工具，使学生在虚拟会议期间参与。这篇文章建议高等教育机构认识到数字教育工具的扩展是一个机会，以提高他们的IAs的技术素养和能力，在这个日益数字化的教育时代，最好地服务于学生[3]。在国内，关于助教管理系统的研究虽起步较晚，但也取得了一些丰硕的成果，2016年，陈贻东,叶艳等人在《基于Symfony2的助教管理系统》中采用了B/S模式，服务器采用LAMP(Linux+Apache+MySQL+PHP)架构,开发框架采用Symfony2，开发工具采用NetBeans，该系统实现了汇报工作在线化、津贴评优计算自动化、提醒定向化、管理工作流程化，弥补学校在助教管理信息化方面的空缺，提高了工作效率，节约了成本[4]。2018年，周小雯在《重庆大学助教管理系统的设计与实现》中通过应用KualiRice和J2EE，以及对JavaScript和其他前端技术的研究，大大改善了重庆大学的助教管理，不仅填补了该领域的空白，而且还大大降低了运营的成本，极大地提升了工作的效率。采取措施改善网页的相容性，以增强用户的使用体验。首先实现了网络化的助教管理，提高助教的工作效率。同时减轻学校和老师的工作负担。解决了申请助教难等问题。同时添加了助教日志和个人档案，以便作为助教评价的资料文档[5]。此外在2021年，刘晓宇，陈战胜在《基于微助教的翻转课堂教学设计与实践——以“Web开发基础”课程为例》中采用Web技术，设计出该平台，通过该平台，可以完成课堂签到、课件分享、答题、讨论、作业等功能并对学习过程记录。国内的助教管理系统相对较少，对于我们而言，研究并开发助教管理模式的系统有很大的意义[6]。1.3主要研究内容为了有效缓解教师的教学负担，让学生更有效地学习。本次设计将通过IDEA和微信小程序的开发平台，使用Java语言和Vue技术，并借助MySQL数据库来构建一个助教管理系统。实现个人信息管理、助教管理、课程信息管理、课程分类管理、教学视频管理、视频类型管理、任务信息管理、助教评分管理、任务类型管理、任务完成管理功能。应完成的主要工作有：1、查找并分析近几年的国内助教管理系统的相关研究，通过对比和分析各文献的优缺点，整理相关材料，并且确定开发工具和所用技术。2、经过详细的可行性分析和需求分析，确定系统的功能架构。3、选取合适的数据库对数据进行存储和管理。4、进行各功能模块的设计与实现，使各功能模块能够正常运行。5、通过合适的测试方法，对本系统各个组成部分进行测试。第2章相关理论和技术2.1Java简介Java是一门面向对象编程语言，它继承并借鉴了C++的精华之处，同时摒弃了一些较为晦涩难懂的理论，如多重继承和指针等。使其在编程效率上更加出色，同时也拥有更加灵活的编程模型，使得它既可以满足程序员的编程需求，又可以满足他们的审美需求。Java是一种强大的开发语言，它拥有易于使用、高效率、多线程、灵活的用户界面、强大的功能、高度的稳定性、灵活的移植能力，能够满足各种应用程序的需求。Java具有跨平台性，它能够支持多种系统平台，使得使用者能够轻松地编写各种应用程序。然而，为了实现这种跨平台性，一般的高级语言必须经过编译，才能够实现跨平台的功能。Java语言可以在多种平台上运行，而且它的编译方式比Windows更加灵活，Java的跨平台性能可以通过使用VM技术（JVM）来实现，因此，应该特别关注这一点。2.2MySQL简介MySQL目前属于Or‎‏acl‎‏e甲骨‎‏文公司‎‏，My‎‏SQL‎‏称之为‎‏关系型‎‏数据库‎‏、微软‎‏的SQ‎‏LS‎‏erv‎‏er。‎‏MyS‎‏QL数‎‏据库能‎‏够支持‎‏在多种‎‏操作系‎‏统上运‎‏行，包‎‏括So‎‏lar‎‏is、‎‏Mac‎‏OS‎‏、Fr‎‏eeB‎‏SD和‎‏Win‎‏dows，L‎‏inu‎‏x通通‎‏支持。其‎‏主要功能就是‎‏处理数‎‏据。数据‎‏库一般‎‏不会直‎‏接面向‎‏数据存‎‏储，存‎‏储是交‎‏给表/‎‏索引这‎‏类对象‎‏完成的‎‏。MySQL数据库是一个基于网络客户端和服务器的模式，服务器端必须使用用户名和密码登录来接入服务器设备，一旦接入成功，就能够对数据库中的内容（包括增加、删除、变更和查询）做出相应的处理。MySQL的服务器由于使用IO复用和+可扩展的接口，能够支持更快的网络传输，从而达到传统的高效率架构。2.3Vue技术Vue是一种具有渐进式特性的用户界面框架，它能够从基础层一步步提升到更高级别，其中核心库仅关注视觉层，使用者能够轻松理解，并且能够与其他第三方库或现有项目实现有效的整合。Vue技术的进步使得它能够与先进的工具链和丰富的支持类库相结合，并为复杂的网页应用提供更强大的支持。Vue具备极高的可扩展性，可以支持各种不同的应用场景，从而满足不同的需求。例如，当需求驱动程序的声明式渲染，可以使用Vue的声明渲染，也可以使用其相应的组件系统，从而实现更加高效的应用。通过使用其内部的部分，我们能够获得更多的信息。Vue具有多种优势：1，采用MVVM架构；2，编码简单，尺寸小巧，运行效率极高；3，不仅可以用于UI开发，还可以将其应用于其他第三方库的开发中。2.4微信小程序微信小程序是一种新兴的应用程序，它和传统App相比有较大区别，它是一种跨平台的应用程序，对于Android版本与iOS版本不做区分，具有更好的移植性和开发效率。目前手机上的App目不暇接，同类型的APP也比比皆然。在我们日常生活中，有许多APP在最初下载时使用频率会高一点，随着时间的推移，这些APP的使用频率会逐渐降低，有时几周都不会使用。这些使用频率较低的应用软件一直占用用户手机的存储空间，造成了手机内存浪费。有些用户为了避免手机内存浪费，会选择仅在需要时下载使用较少的软件，在使用结束后再将其删除。这种方法虽然可以减少手机内存的占用情况，但是应用程序下载和删除的过程会消耗时间和流量。而微信小程序可以完美地解决这个问题。微信小程序，它是一种依赖微信环境的跨平台应用程序，用户无须下载安装，点开即可使用小程序，使用完毕后退出即可，也不会占用手机内存。并且同一版本的小程序，在Android、iOS上都能良好运行，可以降低开发成本，提高开发效率。第3章系统分析3.1可行性分析3.1.1技术可行性该系统通过IDEA和微信小程序的开发工具，使用Java语言、Vue技术和MySQL数据库的支持下开发实现，在系统使用的技术层面来看，常规的计算机就可以满足这些功能的实现，并且技术比较先进，比较容易上手，我也有较为熟练的掌握，能够完成助教管理系统的实现。所以，助教管理系统的开发具有较强的技术可行性。3.1.2经济可行性IDEA是现‎‏今做得‎‏最好的‎‏一款多‎‏语言集‎‏成开发‎‏环境，同时大多数与之相关的开发工具都是免费的，同时微信小程序相比较于APP来说，对其开发成本较低，资金投入比APP要少，并且后期维护工作相比较于APP还较为简单些。所以，对于助教管理系统来说，此程序的开发在经济上是完全可行的。3.1.3操作可行性助教管理系统开发完成后，可直接在微信小程序中使用，不需要单独下载其他APP，助教用户和教师可以很清楚的看到各项功能，可以根据界面显示，完成系统所需操作，具有全面的助教管理系统，基于以上这些，可以方便助教和教师的操作，具有操作可行性。3.2功能需求分析本次设计将基于IDEA和微信小程序的开发工具，使用Java语言、Vue技术和MySQL数据库来进行助教管理系统的设计与实现。在基于微信小程序的助教管理系统中，助教用户进入系统后可以查看课程信息、视频类型和教师发布的任务信息，以及可以对课程分类进行管理；教师用户进入系统后可以对助教、课程信息、视频分类、任务信息等进行管理，可以对助教完成任务情况进行评分；管理员进入系统后可以对助教和教师信息进行管理，以及对课程信息、课程分类、视频类型等进行管理。助教用例图，如图3.1所示：注册登录注册登录课程信息的查看课程信息的查看课程分类管理课程分类管理视频类型的查看视频类型的查看任务信息的查看任务信息的查看图3.1助教用例图教师用例图，如图3.2所示：注册登录注册登录助教管理助教管理课程信息管理课程信息管理教学视频管理教学视频管理任务信息管理任务信息管理任务完成管理任务完成管理助教评分管理助教评分管理图3.2教师用例图管理员用例图，如图3.3所示：教师管理助教管理教师管理助教管理助教评分管理助教评分管理任务完成管理任务完成管理视频类型管理视频类型管理任务信息管理任务信息管理教学视频管理教学视频管理课程信息管理课程信息管理任务类型管理任务类型管理课程分类管理课程分类管理图3.3管理员用例图3.3系统流程分析3.3.1登录流程该系统的登录角色分别有助教用户、教师和管理员三个角色，对于助教用户与教师来说，登录时需要判断是否已有账号，然后进行登录。对于管理员来说，管理员的账号是默认的，不需要进行注册，直接进行登录即可。在登录时需要检测角色权限，并跳到相应的登录界面。本系统的具体系统登录流程如图3.4所示：开始开始是否已经注册账号是否已经注册账号输入账号、密码、选择身份是输入账号、密码、选择身份结束密码是否正确否结束密码是否正确否否注册注册是跳转到相应页面查询角色权限跳转到相应页面查询角色权限图3.4登录流程图3.3.2注册流程当用户需要注册时，账号、密码和姓名为必填项；性别、年龄、手机号、头像为选填项，填完所需要求，判断选填信息是否合法，若合法，即注册成功，若不合法将返回上一步。本系统的具体系统注册流程如图3.5所示：开始开始结束结束账号账号注册成功否注册成功密码密码是再次确认密码再次确认密码判断账号是否存在判断账号是否存在判断两次密码是否一致否判断两次密码是否一致是姓名、年龄、性别、电话、头像、账号姓名、年龄、性别、电话、头像、账号注册注册图3.5注册流程图3.3.3信息添加操作流程这是信息添加操作流程，系统的正常运行离不开大量数据的支撑，所以本系统中添加了数据插入功能，向系统添加某些信息时，需要判断所需信息是否合法。关于信息添加操作流程如图3.6所示：开始开始输入所添加的信息输入所添加的信息是否合法否是否合法是写入数据库写入数据库结束结束图3.6信息添加操作流程图3.3.4信息删除操作流程这是信息删除操作流程，需要选中所需删除的信息，同时我们为了避免用户误按删除键，点击删除后会出现提示确认的弹框，当确定要删除时，再进行数据库操作，而完成删除之后，会向用户提供反馈，关于信息删除操作流程图如图3.7所示：开始开始选择要删除的数据选择要删除的数据取消删除取消删除是否删除是否删除否更新数据是更新数据结束结束图3.7信息删除操作流程图3.3.5信息修改操作流程这是信息修改操作流程，由于某些原因导致信息填写错误时，需要修改此信息，所以需要选择要修改的信息，填入修改后的信息，并且判断修改后的信息是否合法，若合法，即可写入数据库，关于信息修改操作流程图如图3.8所示：开始开始选择所需修改信息选择所需修改信息输入修改信息输入修改信息否是是否合法是否合法写入数据库写入数据库结束结束图3.8信息修改操作流程图第4章系统设计4.1系统总体设计本次设计将在IDEA和微信小程序的开发工具下，采用Java语言、Vue和MySQL数据库技术支持下进行助教管理系统的设计与实现。经过详细的需求分析和可行性分析，确定了该系统的核心功能模块：个人信息管理、助教管理、课程信息管理、课程分类管理、教学视频管理、视频类型管理、任务信息管理、助教评分管理、任务类型管理、任务完成管理。系统的功能结构如图4.1所示：助教管理系统助教管理系统任务类型管理助教管理任务完成管理助教评分管理个人信息管理任务信息管理视频类型管理教学视频管理课程分类管理课程信息管理任务类型管理助教管理任务完成管理助教评分管理个人信息管理任务信息管理视频类型管理教学视频管理课程分类管理课程信息管理图4.1系统功能结构图4.2数据库设计4.2.1概念结构设计通过对用户需求的分析，概念结构设计可以将其转化为一种可以被理解的信息结构，以便更好地满足用户的需求，并以E-R图的形式表达出来，从而实现对用户需求的有效把控。1、助教实体属性图，如图4.2所示。用户名用户名头像密码头像密码姓名姓名电话助教电话助教工号工号年龄性别年龄性别图4.2助教实体属性图2、教师实体属性图，如图4.3所示。性别性别姓名工号姓名工号用户名电话用户名电话教师教师年龄密码年龄密码头像头像图4.3教师实体属性图管理员实体属性图，如图4.4所示。用户名用户名管理员管理员角色角色密码密码图4.4管理员实体属性图4、课程信息实体属性图，如图4.5所示。助教账号教师姓名助教账号教师姓名教师工号教师工号编号课程信息上课地点编号课程信息上课地点图片图片名称课时名称课时学分学分图4.5课程信息实体属性图5、任务信息实体属性图，如图4.6所示。助教账号联系电话教师姓名教师工号助教账号联系电话教师姓名教师工号任务信息发布日期任务信息发布日期名称名称类型类型内容内容助教姓名要求要求图片助教姓名要求要求图片图4.6任务信息实体属性图4.2.2逻辑结构设计通过对DBMS中的数据模型进行编码，可以有效地把抽象的概念变为可操作的模型，从而使E-R图模型变为更加精确的关联模型，而助教管理系统的编码则可以通过以下方法来完善：(1)用户表users“用户表users”用来储存用户的信息。其表结构如表4.1所示。表4.1管理员表字段名称类型长度字段说明主键默认值idbigint编号主键usernamevarchar10用户名passwordvarchar10密码rolevarchar10角色管理员addtimetimestamp新增时间CURRENT_TIMESTAMP(2)助教表zhujiao“助教表zhujiao”是用来储存助教的信息。其表结构如表4.2所示。表4.2助教表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPzhujiaozhanghaovarchar10助教账号mimavarchar10密码zhujiaoxingmingvarchar10助教姓名xingbievarchar10性别nianlingvarchar10年龄touxianglongtext20头像zhujiaoshoujivarchar20助教手机jiaoshigonghaovarchar20教师工号(3)教师表jiaoshi“教师表jiaoshi”是用来储存教师信息。其表结构如表4.3所示。表4.3教师表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPjiaoshigonghaovarchar10教师工号mimavarchar10密码jiaoshixingmingvarchar10教师姓名xingbievarchar10性别zhaopianlongtext20照片zhichengvarchar10职称lianxidianhuavarchar20联系电话zhujiaozhanghaovarchar20助教账号(4)课程信息表kechengxinxi“课程信息表kechengxinxi”是一个用于记录课程信息的，其表结构如4.4所示表4.4课程信息表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPkechengbianhaovarchar20课程编号kechengmingchengvarchar20课程名称kechengfenleivarchar20课程分类keshivarchar200课时xuefenint10学分shangkedidianvarchar20上课地点kechengxiangqinglongtext20课程详情tupianlongtext20图片jiaoshigonghaovarchar20教师工号jiaoshixingmingvarchar20教师姓名zhujiaozhanghaovarchar20助教账号(5)课程分类表kechengfenlei“课程分类表kechengfenlei”是用来储存课程分类的信息。其表结构如表4.5所示。表4.5课程分类表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPkechengfenleivarchar20课程分类(6)助教评分表zhujiaopingfen“助教评分表zhujiaopingfen”是用来储存助教评分的信息。其表结构如表4.6所示。表4.6助教评分表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPrenwumingchengvarchar10任务名称renwuleixingvarchar20任务类型wanchengtupianlongtext20完成图片renwuyaoqiuvarchar20任务要求jiaoshigonghaovarchar20教师工号jiaoshixingmingvarchar10教师姓名zhujiaozhanghaovarchar20助教账号zhujiaoxingmingvarchar10助教姓名pingfenshijiandatetime评分时间pingjianeironglongtext200评价内容pingfenint评分crossuseridbigint跨表用户idcrossrefidbigint跨表主键id(7)教学视频表教学shipinbiao“教学视频表教学shipinbiao”是用来储存教学视频的信息。其表结构如表4.7所示。表4.7教学视频表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPkechengmingchengvarchar20课程名称shipinlongtext200视频shipinleixingvarchar20视频类型jiaoshigonghaovarchar20教师工号jiaoshixingmingvarchar10教师姓名neirongjianjielongtext200内容简介fengmiantupianlongtext20封面图片faburiqidate发布日期(8)视频类型表shipinleixing“视频类型表shipinleixing”是用来储存视频类型的信息。其表结构如表4.8所示。表4.8视频类型表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPshipinleixingvarchar20视频类型(9)任务信息表renwuxinxi“任务信息表renwuxinxi”是用来储存任务信息。其表结构如表4.9所示。表4.9任务信息表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPrenwumingchengvarchar任务名称renwuleixingvarchar20任务类型renwutupianlongtext20任务图片renwuyaoqiuvarchar20任务要求renwuneironglongtext200任务内容wanchengzhuangtaivarchar10完成状态faburiqidate10发布日期jiaoshigonghaovarchar20教师工号jiaoshixingmingvarchar10教师姓名lianxidianhuavarchar20联系电话zhujiaozhanghaovarchar20助教账号zhujiaoxingmingvarchar10助教姓名zhujiaoshoujivarchar20助教手机sfshvarchar20是否审核待审核shhflongtext200审核回复(10)任务完成表renwuwancheng“任务完成表renwuwancheng”是用来储存任务完成的信息。其表结构如表4.10所示。表4.10任务完成表字段名称类型长度字段说明主键默认值idbigint编号主键addtimetimestamp创建时间CURRENT_TIMESTAMPrenwumingchengvarchar20任务名称renwuleixingvarchar20任务类型renwuyaoqiuvarchar20任务要求jiaoshigonghaovarchar10教师工号jiaoshixingmingvarchar10教师姓名lianxidianhuavarchar20联系电话zhujiaozhanghaovarchar20助教账号zhujiaoxingmingvarchar10助教姓名zhujiaoshoujivarchar20助教手机wanchengtupianlongtext20完成图片wanchengshijiandatetime完成时间wanchengneironglongtext200完成内容第5章系统实现5.1登录注册首次使用该系统时，教师需要输入账号、密码、姓名、年龄、手机等信息进行注册，当输入注册信息后，教师需要确保输入信息的真实性，并且需要对所输信息进行判断是否符合规定，若符合规定，即可注册成功，若不符合规定，则需要重新输入以上信息，其教师注册界面如图5.1所示，注册成功后，将跳转回登录界面，这时将刚注册的账号和密码输入，教师登录界面如图5.2所示，点击登录按钮，将会完成此次登录。图5.1教师注册界面图5.2教师登录界面管理员不需要注册账号，只有一个特定账号（账号：admin，密码：admin），当管理员在登录界面输入账号和密码并选择登录角色，确认所输信息正确，将登录成功跳转首页。管理员登录界面如图5.3所示。图5.3管理员登录界面当助教首次进入系统时，助教注册需要输入助教账号、姓名、密码、姓名、年龄、助教手机等信息，当输入注册信息后，需要对所输信息进行判断是否符合规定，若符合规定，即可注册成功，若不符合规定，则需要重新输入信息，助教注册界面如图5.4所示；注册成功后，助教进行登录操作时，需要输入账号和密码，然后单击“登录”按钮，即进入首页如图5.5所示。图5.4助教注册界面图5.5首页界面实现该功能的关键代码如下。@IgnoreAuth @RequestMapping(value="/login") publicRlogin(Stringusername,Stringpassword,Stringcaptcha,HttpServletRequestrequest){ JiaoshiEntityuser=JiaoshiService.selectOne(newEntityWrapper<JiaoshiEntity>().eq("Jiaoshizhanghao",username)); if(user==null||!user.getMima().equals(password)){ returnR.error("账号或密码不正确"); } Stringtoken=tokenService.generateToken(user.getId(),username,"Jiaoshi","教师"); returnR.ok().put("token",token); } @IgnoreAuth@RequestMapping("/register")publicRregister(@RequestBodyJiaoshiEntityJiaoshi){ //ValidatorUtils.validateEntity(Jiaoshi); JiaoshiEntityuser=JiaoshiService.selectOne(newEntityWrapper<JiaoshiEntity>().eq("Jiaoshizhanghao",Jiaoshi.getJiaoshizhanghao())); if(user!=null){ returnR.error("注册用户已存在"); } LonguId=newDate().getTime(); Jiaoshi.setId(uId);JiaoshiService.insert(Jiaoshi);returnR.ok();}5.2个人信息管理教师登录成功进入系统后，点击“个人中心”按钮，进入个人中心界面，可以对个人信息进行修改和查看。教师个人信息界面如图5.6所示。图5.6教师个人信息界面助教登录成功进入系统后，点击“我的—个人信息”，进入个人中心界面，可以对个人信息进行修改和保存。助教个人信息界面如图5.7所示。图5.7助教个人信息界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.jiaoshigonghao)){this.$utils.msg(`教师工号不能为空`);return}if((!this.ruleForm.mima)){this.$utils.msg(`教师职称不能为空`);return}if((!this.ruleForm.jiaoshixingming)){this.$utils.msg(`教师姓名不能为空`);return}if(this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){this.$utils.msg(`联系电话应输入手机格式`);return}//更新跨表属性varcrossuserid;varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=uni.getStorageSync('crossTable');awaitthis.$api.update(`${table}`,obj);}else{crossuserid=Number(uni.getStorageSync('userid'));crossrefid=obj['id'];crossoptnum=uni.getStorageSync('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}if(crossrefid&&crossuserid){this.ruleForm.crossuserid=crossuserid;this.ruleForm.crossrefid=crossrefid;letparams={page:1,limit:10,crossuserid:crossuserid,crossrefid:crossrefid,}letres=awaitthis.$api.list(`jiaoshi`,params);if(res.data.total>=crossoptnum){this.$utils.msg(uni.getStorageSync('tips'));returnfalse;}else{//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`jiaoshi`,this.ruleForm);}else{awaitthis.$api.add(`jiaoshi`,this.ruleForm);}this.$utils.msgBack('提交成功');}5.3助教管理以教师身份登录到前台界面中，进入助教管理界面，如图5.8所示。可以输入助教账号进行查询，也可以对助教信息进行修改、删除和发布任务，若要对助教发布任务，需要选择某个助教，点击“发布任务按钮”，即可进入发布任务界面。发布任务界面如图5.9所示。图5.8助教管理界面图5.9发布任务界面实现该功能的关键代码如下。if((!this.ruleForm.zhujiaozhanghao)){this.$utils.msg(`助教账号不能为空`);return}if((!this.ruleForm.mima)){this.$utils.msg(`密码不能为空`);return}if((!this.ruleForm.touxiang)){this.$utils.msg(`头像不能为空`);return}if(this.ruleForm.zhujiaoshouji&&(!this.$validate.isMobile(this.ruleForm.zhujiaoshouji))){this.$utils.msg(`助教手机应输入手机格式`);return}if((!this.ruleForm.jiaoshigonghao)){this.$utils.msg(`教师工号不能为空`);return}//更新跨表属性varcrossuserid;varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=uni.getStorageSync('crossTable');awaitthis.$api.update(`${table}`,obj);}else{crossuserid=Number(uni.getStorageSync('userid'));crossrefid=obj['id'];crossoptnum=uni.getStorageSync('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}if(crossrefid&&crossuserid){this.ruleForm.crossuserid=crossuserid;this.ruleForm.crossrefid=crossrefid;letparams={page:1,limit:10,crossuserid:crossuserid,crossrefid:crossrefid,}letres=awaitthis.$api.list(`zhujiao`,params);if(res.data.total>=crossoptnum){this.$utils.msg(uni.getStorageSync('tips'));returnfalse;}else{//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`zhujiao`,this.ruleForm);}else{awaitthis.$api.add(`zhujiao`,this.ruleForm);}this.$utils.msgBack('提交成功');5.4课程信息管理以教师身份登录到前台界面中，进入课程信息管理界面，可以输入课程名称、教师工号进行查询，也可以对课程信息进行修改、删除和查看详情，课程信息管理界面如图5.10所示。如果想更改课程内容，请选择“修改”，然后点击“修改”按钮，即可进入更新页面。在这里，您可以输入想更改的内容，如图5.11所示。图5.10课程信息管理界面图5.11修改课程信息界面以助教身份登录到小程序中，进入课程信息界面，点击并进入，可以看到教师对已发布课程的分类，以便查看课程，助教查看课程信息界面如图5.12所示。图5.12助教查看课程信息界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.kechengmingcheng)){this.$utils.msg(`课程名称不能为空`);return}if(this.ruleForm.xuefen&&(!this.$validate.isIntNumer(this.ruleForm.xuefen))){this.$utils.msg(`学分应输入整数`);return}if((!this.ruleForm.tupian)){this.$utils.msg(`图片不能为空`);return}//更新跨表属性varcrossuserid;varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=uni.getStorageSync('crossTable');awaitthis.$api.update(`${table}`,obj);}else{crossuserid=Number(uni.getStorageSync('userid'));crossrefid=obj['id'];crossoptnum=uni.getStorageSync('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}if(crossrefid&&crossuserid){this.ruleForm.crossuserid=crossuserid;this.ruleForm.crossrefid=crossrefid;letparams={page:1,limit:10,crossuserid:crossuserid,crossrefid:crossrefid,}letres=awaitthis.$api.list(`kechengxinxi`,params);if(res.data.total>=crossoptnum){this.$utils.msg(uni.getStorageSync('tips'));returnfalse;}else{//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`kechengxinxi`,this.ruleForm);}else{awaitthis.$api.add(`kechengxinxi`,this.ruleForm);}this.$utils.msgBack('提交成功');}5.5课程分类管理以管理员身份登录到后台系统中，点击“课程分类”按钮，进入课程分类管理界面，如需查找课程，需要在课程分类处输入，点击查询按钮找到课程，还可以对课程分类类型进行添加、修改、删除、查看详情等操作。课程分类管理界面如图5.13所示。图5.13课程分类管理界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.kechengfenlei)){this.$utils.msg(`课程分类不能为空`);return}//更新跨表属性varcrossuserid;varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=uni.getStorageSync('crossTable');awaitthis.$api.update(`${table}`,obj);}else{crossuserid=Number(uni.getStorageSync('userid'));crossrefid=obj['id'];crossoptnum=uni.getStorageSync('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}if(crossrefid&&crossuserid){this.ruleForm.crossuserid=crossuserid;this.ruleForm.crossrefid=crossrefid;letparams={page:1,limit:10,crossuserid:crossuserid,crossrefid:crossrefid,}letres=awaitthis.$api.list(`kechengfenlei`,params);if(res.data.total>=crossoptnum){this.$utils.msg(uni.getStorageSync('tips'));returnfalse;}else{//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`kechengfenlei`,this.ruleForm);}else{awaitthis.$api.add(`kechengfenlei`,this.ruleForm);}this.$utils.msgBack('提交成功');}5.6教学视频管理以管理员身份登录到后台系统中，点击“教学视频”按钮，进入教学视频管理界面，如需查找视频，需要输入课程视频名称和教师工号，点击“查询”，找到所需教学视频类型，还可以对教学视频类型进行添加、修改、删除等操作。教学视频管理界面如图5.14所示。图5.14教学视频管理界面以助教登录到小程序中，点击进入教学视频列表界面，输入课程名称，选择查询找到教学视频类型，助教查看教学视频界面如图5.15所示。图5.15助教查看教学视频界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.kechengmingcheng)){this.$utils.msg(`课程名称不能为空`);return}if((!this.ruleForm.fengmiantupian)){this.$utils.msg(`封面图片不能为空`);return}//更新跨表属性varcrossuserid;varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=uni.getStorageSync('crossTable');awaitthis.$api.update(`${table}`,obj);}else{crossuserid=Number(uni.getStorageSync('userid'));crossrefid=obj['id'];crossoptnum=uni.getStorageSync('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}if(crossrefid&&crossuserid){this.ruleForm.crossuserid=crossuserid;this.ruleForm.crossrefid=crossrefid;letparams={page:1,limit:10,crossuserid:crossuserid,crossrefid:crossrefid,}letres=awaitthis.$api.list(`jiaoxueshipin`,params);if(res.data.total>=crossoptnum){this.$utils.msg(uni.getStorageSync('tips'));returnfalse;}else{//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`jiaoxueshipin`,this.ruleForm);}else{awaitthis.$api.add(`jiaoxueshipin`,this.ruleForm);}this.$utils.msgBack('提交成功');}5.7视频类型管理后台系统中的视频类型界面上，管理员可以通过输入视频类型来查询到各种不同的视频类型，还可以对视频类型信息进行添加、修改、删除和查看详细信息。视频类型管理界面如图5.16所示。图5.16视频类型管理界面以助教身份登录到小程序中，选择“我的”页面中的“视频类型”按钮，进入视频类型界面，输入名称，选择查询找到视频类型信息，还可以对视频类型信息进行添加、修改等操作。助教视频类型界面如图5.17所示：图5.17助教视频类型界面实现该功能的关键代码如下。//多选selectionChangeHandler(val){this.dataListSelections=val;},//添加/修改addOrUpdateHandler(id,type){this.showFlag=false;this.addOrUpdateFlag=true;this.crossAddOrUpdateFlag=false;if(type!='info'){type='else';}this.$nextTick(()=>{this.$refs.addOrUpdate.init(id,type);});},//下载download(file){window.open(`${file}`)},//删除deleteHandler(id){varids=id?[Number(id)]:this.dataListSelections.map(item=>{returnNumber(item.id);});this.$confirm(`确定进行[${id?"删除":"批量删除"}]操作?`,"提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$http({url:"shipinleixing/delete",method:"post",data:ids}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.search();}});5.8任务信息管理以教师身份登录到系统后，点击“任务信息”按钮，进入任务信息管理界面，如需查找任务信息，需要输入任务名称、任务类型、完成状态、是否通过，点击“查询”，找到所需任务信息，还可以对任务信息进行修改、删除、查看详情等操作。任务信息管理界面如图5.18所示。图5.18任务信息管理界面以助教身份登录到小程序中，选择“我的”页面中的“任务信息”按钮，点击进入任务信息界面，输入任务名称，选择查询找到任务信息，助教任务信息界面如图5.19所示：图5.19助教任务信息界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.renwumingcheng)){this.$utils.msg(`任务名称不能为空`);return}if((!this.ruleForm.renwuleixing)){this.$utils.msg(`任务类型不能为空`);return}if((!this.ruleForm.renwutupian)){this.$utils.msg(`任务图片不能为空`);return}if((!this.ruleForm.wanchengzhuangtai)){this.$utils.msg(`完成状态不能为空`);return}//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`renwuxinxi`,this.ruleForm);}else{awaitthis.$api.add(`renwuxinxi`,this.ruleForm);}this.$utils.msgBack('提交成功');}5.9任务完成管理以管理员身份登录到后台系统中，点击“任务完成”按钮，进入到任务完成界面，如需查找已完成任务，需要输入任务名称、任务类型和教师姓名，点击查询找到特定的任务完成信息，还可以进行修改、删除、查看详细信息等操作。管理员任务完成管理界面如图5.20所示。图5.20管理员任务完成管理界面以教师身份登录到前台系统中，选择任务完成管理下的“任务完成”按钮，进入任务完成界面，如需查找已完成的任务，需要输入任务名称、任务类型和教师姓名，点击“查询”，找到所需信息。还可以进行查看详细信息、助教评分等操作。教师任务完成管理界面如图5.21所示。图5.21教师任务完成管理界面以助教身份登录到小程序中，点击“我的”页面中的“任务完成”按钮，进入任务信息列表界面，如需查找已完成任务，需要输入任务名称进行查询，还可以进行查看详细信息等操作。助教任务完成界面如图5.22所示。图5.22助教任务完成界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.wanchengtupian)){this.$utils.msg(`完成图片不能为空`);return}//跨表计算if(this.ruleForm.id){awaitthis.$api.update(`renwuwancheng`,this.ruleForm);}else{awaitthis.$api.add(`renwuwancheng`,this.ruleForm);}this.$utils.msgBack('提交成功');}5.10助教评分管理以教师身份登录到系统后，选择助教评分管理下的“助教评分”按钮，输入任务名称，选择查询找到课程信息，还可以进行修改、删除、批量删除、查看详细信息等操作。助教评分管理界面如图5.23所示。如需修改分数，点击“修改”按钮，进入助教评分修改界面，即可对分数进行修改，修改完成时需点击提交。助教评分修改界面如5.24所示。图5.23助教评分管理界面图5.24助教评分修改界面实现该功能的关键代码如下。varobj;if((!this.ruleForm.pingfen)){this.$utils.msg(`评分不能为空`);return}if(this.ruleForm.pingfen&&(!this.$validate.isIntNumer(this.ruleForm.pingfen))){this.$utils.msg(`评分应输入整数`);return}//更新跨表属性varcrossuserid;varcrossrefid;varcrossoptnum;if(this.cross){varstatusColumnName=uni.getStorageSync('statusColumnName');varstatusColumnValue=uni.getStorageSync('statusColumnValue');if(statusColumnName!=''){if(!obj){obj=uni.getStorageSync('crossObj');}if(!statusColumnName.startsWith("[")){for(varoinobj){if(o==statusColumnName){obj[o]=statusColumnValue;}}vartable=uni.getStorageSync('crossTable');awaitthis.$api.update(`${table}`,obj);}else{crossuserid=Number(uni.getStorageSync('userid'));crossrefid=obj['id'];crossoptnum=uni.getStorageSync('statusColumnName');crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");}}}if(crossrefid&&crossuserid){this.ruleForm.crossuserid=crossuserid;this.ruleForm.crossrefid=crossrefid;letparams={page:1,limit:10,crossuserid:crossuserid,crossrefid:crossrefid,}letres=awaitthis.$api.list(`zhujiaopingfen`,params);if(res.