计算机科学与技术-基于vue+node.js智慧校园学生办证系统

基于vue+node.js智慧校园学生办证系统摘要：随着计算机技术和网络技术的飞快发展，它加速了国内信息化建设的进程，信息技术对管理改革产生了深远的影响。为了适应新时代的发展趋势，各行各业都高度重视信息化建设。在教育领域，信息时代的到来为传统教育改革和学校管理发展提供新机遇。智慧校园的信息化建设。在传统的方式下，高校的学生丢失证件都需要到指定后勤部门申请，有时候后勤上班时间与上课时间相冲突，这无疑给急需使用证件的学生造成很大的不便利，消耗了人力，物力，财力。在大数据背景之下,传统的校园管理方式已经明显不能满足信息化时代的发展。针对目前高校存在办证繁琐的问题，结合实际情况,开发一个基于B/S结构，MVVM设计模式，node.js，vue.js框架的智慧校园学生办证是很有必要的。在实现上，VisualStudioCode将用作前端和后端开发工具。VisualStudioCode是一个免费的开源现代轻量级代码编辑器，它支持插件扩展，并针对Web开发和云应用程序开发进行了优化。MySQL将用作数据库的开发，MySQL性能卓越服务稳定，自主性强、使用成本低。能更好的用于智慧校园学生办证系统的开发。关键词：智慧校园，高校信息化，便利性Vueandnode.js-BasedintelligentcampusstudentcertificatesystemAbstract：Withtherapiddevelopmentofcomputertechnologyandnetworktechnology,itacceleratestheprocessofinformationconstructioninChina,andinformationtechnologyhasaprofoundimpactonmanagementreform.Inordertoadapttothedevelopmenttrendofthenewera,allwalksoflifeattachgreatimportancetoinformationconstruction.Inthefieldofeducation,thearrivaloftheinformationageprovidesnewopportunitiesforthereformoftraditionaleducationandthedevelopmentofschoolmanagement.Informationconstructionofsmartcampus.Inthetraditionalway,studentsinCollegesanduniversitiesneedtoapplytothedesignatedlogisticsdepartmentwhentheylosetheircertificates.Sometimestheworkingtimeoflogisticsisinconflictwiththeclasstime,whichundoubtedlycausesgreatinconveniencetothestudentswhoneedtousecertificatesurgently,andconsumeshuman,materialandfinancialresources.Underthebackgroundofbigdata,thetraditionalcampusmanagementcannotmeetthedevelopmentofinformationage.Inviewofthecomplicatedproblemsexistinginuniversities,itisnecessarytodevelopasmartcampusstudentcertificatebasedonB/Sstructure,MVVMdesignmode,node.js,vue.jsframework.Inimplementation,visualstudiocodewillbeusedasafront-endandback-enddevelopmenttool.Visualstudiocodeisafreeopensourcemodernlightweightcodeeditor,whichsupportsplug-inextensionsandisoptimizedforwebdevelopmentandcloudapplicationdevelopment.MySQLwillbeusedasdatabasedevelopment.MySQLhasexcellentperformance,stableservice,strongautonomyandlowcost.Itcanbebetterusedinthedevelopmentofsmartcampusstudentcardsystem.Keywords:Smartcampus,universityinformatization,convenience目录TOC\o"1-3"\h\u第1章绪论 第1章绪论1.1系统开发的背景及意义随着计算机技术和网络技术的快速发展，科学正在进入信息化时代，信息技术本身对教育改革产生了深远的影响。在信息社会和知识经济时代，智能校园已成为高校开展信息化建设的热点，这是校园管理达到现代水平的重要标志。智能校园建设的主要内容是通过信息技术有效整合，优化和整合学校管理部门和后勤服务部门的各种资源，实现有效的管理和资源的充分利用。实现校务管理与后勤服务流程的优化整合，实现教学管理和学习生活过程的优化，从而提高各管理部门的工作效率，因此，作为智能校园建设的重要组成的部分，智能校园学生证书制度的建设尤为突出。现代化的学校少不了现代化的教学设施、设备的武装。朋友圈，微信群经常出现学生丢失学生证，校园卡的情况。一旦丢失需要去到学生处办公室重新办理，还要排队等候，这无疑浪费了很多时间，尤其是那些校园占地面积大的，跑一趟到学生处办公室耗时甚多。有时候上课时间与工作人员上班时间冲突，这对急用证件的同学无疑造成了麻烦，也考虑到学生处工作人员业务繁忙，为了让办证流程简化，节省人力，物力，财力故开发智慧校园学生办证系统。智慧校园学生办证系统建设的目的和意义：1、智慧校园学生办证系统建设为学校的学生，教师，后勤部门的管理人员提供具有灵巧性的校证服务便捷管理平台，这是学校科学管理的必要前提和基本途径。2、智慧校园学生办证的开发势在必行,构建智慧校园学生办证系统是高校信息化发展的必然趋势，是高校现代化管理的标志，构建智慧校园学生办证系统将有力促进智能化校园建设的进程。3、智慧校园学生办证系统主要是针对学校学生处的大量业务处理工作和节省学生时间而开发的\t"/item/%E5%AD%A6%E7%94%9F%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/_blank"管理软件。构建智慧校园学生办证系统将有效减轻学校事务管理和后勤服务的繁重工作，提高学校的管理水平，后勤的服务质量，能减少人员，提高效率。4、智慧校园学生办证系统主要用在学校学生办证管理上，总体任务是实现学生信息和证书处理的系统，科学，标准化和自动化的过程。1.2国内外智慧校园证件办理研究现状1.2.1国外智慧校园状况马来西亚政府提出“智能学校”的建设，力求实现个人全方位的发展、培养技术方面的发展、身体和情绪方面的发展,以求实现教育信息化与智能化,作为数字化校园的微升级,逐步实现智慧校园的建设。2008年教育界对“智慧校园”认识的面纱被揭开。美国南加利福尼亚大学校园能源系统可看作是智慧校园建设的一部分,系统操作人员通过计算机,可获得一个可视化的校园监控结果,其校园的企业建筑整合系统（EnterpriseBuildingsIntergrator,EBI）,也为校园智慧性助力。2011年韩国教育科学技术部在10月发布的《推进智能教育战略实施计划》中提出了五大战略举措,教育科学技术部新文件的制定和实施,不仅能够推进智能教育,还会推进智能教育向智慧教育的发展,整体提升教育水平。虽然国外有对智慧校园进行建设，但是国外对于智慧校园的研究较少，智慧校园系统尚不完善，理论模型少，在一些方面有所欠缺。1.2.2国内智慧校园状况国内有浙江大学、北京师范大学、南京邮电大学、华南理工大学等这些院校首批开始进行智慧校园建设。当前，已有上百所院校对智慧校园进行建设。具有代表性并且较早提出建设智慧校园的浙江大学,在信息化“十二五”规划中,明确提出要构建基于“云”的智慧校园平台,充分运用物联网、移动互联网等新技术,建立浙江大学统一的网络办公、信息综合发布等平台，在校园安全和智慧图书馆上作重点建设。同济大学智慧校园设计着重把建设节约型校园考虑进来,提出建设“智慧校园”,在校园的体制与机制创新上有突破,逐步形成可持续发展的运营方式,为建立可持续发展的同济大学提供有力的基础性保障。除此之外，当前在国内已有挺多高校借助相关技术手段，实现了各种智慧校园平台，以促进教育管理工作的创新发展，为学生，教师，工作人员提供了非常大的便捷。现在有挺多高校都很重视信息化建设队伍的工作,高校也能够积极与各级科研单位和科研机构合作,加强了信息化建设队伍的培养,对内,高校能够加强内部人员的培训工作,对外,高校能够积极招揽信息化建设人才,很多高校已经建设成立一支高素养的信息化建设人才,这对于智慧校园建设工作的不断完善是一种极大的促进。纵然中国的智能校园构建取得的进步很大，但是还是有一些问题。智慧校园建设还不够完善，有很多方面还没考虑到，例如对于学生的补办证件，还有一些智慧校园建成运营后的实践调研贫乏。另外，有许多学校在智能校园的建设中主要侧重于硬件设备系统的建设，但对软件应用程序的建设却不太重视。智能校园的应用缺乏统一的标准，相关标准化研究工作的效率也不理想。1.3论文的主要研究内容本文主要介绍了智慧校园学生办证系统的整体设计过程，它包括几个阶段，包括基础理论分析，需求分析，总体设计，数据库设计，详细的系统设计，系统实施和系统测试。本人通过对高校调查研究，进行了分析与总结智慧校园系统不完善的一些部分，完成了系统的需求分析。从而完成了系统的功能设计，智慧校园学生办证系统包括登录、证件补办、证书申请、办理进度查询、证件审核、证件查询等几个模块。相应完成学生对证件进行遗失补办、证书申请、进度查询，后勤工作人员进行审核、查询等工作。它可以有效减轻学校事务管理和后勤部服务的沉重业务，改善学校管理，提高后勤服务的质量，实现减少人力和提高效率，并系统地处理证书，科学化、规范化和自动化。论文的主要研究内容如下：采用VisualStudioCode编辑器、B/S结构、MVVM设计模式、vue.js框架实现一个智慧校园学生办证系统。介绍建设系统用到的主要技术，包括MVVM设计模式与vue.js开源框架的开发流程。经过长期对高校的分析和研究，实现需求分析与基础理论分析。在需求分析的根基上，对系统实行了很周密的设计，包罗系统功能模块的设计、系统的总体架构以及数据库的遴选和设计。（4）通过手动测试和黑盒的测试对系统进行严谨的测试，保证系统的质量。第2章系统需求分析需求分析是软件生命周期中的重要环节，同时也是软件计划阶段的重要活动。此阶段不是考虑怎么“实现”而是是依据功能分析系统需要“实现”的内容。需求分析的宗旨是梳理用户和剖析提出的开发软件的“需求”。等确认后，将形成清晰，规范化和完善的文档，以确定软件要完成哪些任务以及需要实现哪些功能。需求分析阶段的工作可以分为以下几个方面：（1）问题识别：确定已开发系统的概括要求，并提出了这些要求的达成的条件，以及清楚地了解用户的需求，这些要求应满足的标准，查看需要哪些功能以及哪些指标实现，这是从系统角度了解软件。（2）分析与综合：寻找出系统各个组成部分之间的衔接，逐步完竣所有软件功能，设计限制和接口特性，剖判它们是不是满足需求，增加所需的部分并删除不合理的部分。最后一步，归纳了系统解决方案，并且给出要开发的系统的周密逻辑模型。（3）制订规格说明书：是描述需求的文件称为软件需求规范来编制文件。（4）评审：对功能的正确性，完整性和清晰性，以及其它需求给予评价。当今社会越来越重视教育，高校学生人数庞大起来，每个学生都有学生证，校园卡，朋友圈频繁出现学生寻找学生证，校园卡的寻物启示，有很多学生丢失证件。一旦丢失证件就需要跑到学生处申请，还要排队等候，这无疑浪费了很多时间，尤其是那些校园占地面积大的，跑一趟到学生处办公室耗时甚多。有时候上课时间与工作人员上班时间冲突，这对急用证件的同学无疑造成了麻烦，也考虑到学生处工作人员业务繁忙，为了让办证流程简化，为了减轻后勤服务以及学校事务管理的繁重工作，提升后勤服务的质量，提升学校的统制水平，提高效率和裁汰人员，开发了智能校园学生证书系统。2.1需求分析2.1.1功能需求分析通过实地调查与调查问卷进行需求分析，了解到智慧校园学生办证系统需要具备多种证件的办理，需要分为学生端与审核端两部分。学生通过学号密码登录进入系统办证，后勤人员则进行相应的证件审核、认证、派发。针对当前学生丢失，损坏证件都需要跑到学生处进行申请，登记，这无疑造成了时间的浪费与不必要的麻烦，为了让办证流程简化，提升学校的管制水平，提升后勤的服务质量，缓和校务管理和后勤服务的沉重业务，做到裁员增效，提升效率，智慧校园学生办证系统功能如图2.1所示：图2.1系统功能图根据系统功能图，可以得出主要功能模块有：一、登录登录是智慧校园学生办证系统的基础功能，学生需要通过学号密码进行登录成功，后台系统管理员则需要通过账号，密码登录进入智慧校园学生办证后台管理系统。方可进入系统进行相关证件申请办理的操作。具体业务需求如下：（1）学生通过学号，密码登录成功可以进入智慧校园办证系统。（2）学生如果想修改密码，可以填写原始密码进行验证以此来修改。二、学生证补办学生证损坏/丢失补办是智慧校园学生办证系统的基本功能，学生经常会使用到。具体业务需求如下：（1）学生可查看到学生证损坏/丢失补办需要注意哪些事项，从而更好的填写补办学生证的信息。（2）学生可以对学生证补办理信息表进行填写以及提交。三、校园卡办理由于学生每天都携带校园卡，校园卡丢失概率很高，校园卡补办是智慧校园学生办证系统最常使用到的功能。具体业务需求如下：（1）学生可查看到校园卡补办需要注意哪些事项，从而更好的填写补办校园卡的信息。（2）学生如果丢失校园卡，可对校园卡进行挂失的操作，把卡冻结。（3）当学生进行了挂失操作后，把卡找回来了，可以对校园卡进行解冻的操作。（4）学生可以对校园卡补办信息进行填写，申请丢失/损坏补办的操作。四、荣誉证书办理（1）学生可查看到申请荣誉证书需要具备什么，注意哪些事项，从而更好的对荣誉证书进行申请。（2）学生可对荣誉证书进行申请，填写申请荣誉证书所需要的资料。五、办理进度查询学生可通过办理进度查询实时查看到自己办理的证件的进度。六、用户管理用户管理为智慧校园办证后台管理系统必备的基础功能，系统管理员需要依据用户的状态和实际信息维护系统中的数据，囊括修改用户的信息、添加用户和删除用户信息。（1）后勤人员添加用户，有新生进入的时候，后勤人员可手动输入学生基本信息。（2）后勤人员修改用户信息，根据学生的实际信息修改学生的基础信息，例如姓名、联系方式、身份证号、专业等关键信息。（3）后勤人员删除用户信息。可根据实际情况对不在本校就读的学生信息进行删除，减少不必要的冗余，更好的对数据进行维护。七、学生证业务管理后勤人员需经常对学生证业务进行审核，以便学生急需使用智慧证件。具体的业务需求如下：（1）后勤人员可以查看补办学生证同学的学生证申请信息，查看是否符合补办。（2）后勤人员可以对补办学生证已获批准或未获批准。如果申请未获批准，则可以指出不通过的原因。3）后勤人员可以对审核通过，审核不通过的补办学生证业务列表进行删除，以免造成冗余。八、校园卡业务管理由于校园卡丢失频繁，所以后勤管理员需要多查看校园卡业务列表，保证其实时性。具体的业务需求如下：（1）后勤人员可以查看补办校园卡同学的校园卡申请信息，查看是否符合补办。（2）后勤人员可以对补办校园卡已获批准或未获批准。如果申请未获批准，则可以指出不通过的原因。（3）后勤人员可对校园卡进行冻结与解冻。（4）后勤人员可以对审核通过，审核不通过的补办校园卡业务列表进行删除，以免造成冗余。九、荣誉证书业务管理（1）后勤人员可以查看申请同学的荣誉证书申请信息，查看是否符合要求进行申请。（2）后勤人员可以对荣誉证书申请进行审核通过或者审核不通过，可以进行备注。（3）后勤人员可以对审核通过，审核不通过的荣誉申请表列表进行删除，以免造成冗余。2.2用例模型建立智慧校园学生办证系统角色主要包含系统管理员与学生用户，下面列举出学生的功能用例图与系统管理员的功能用例。图2.2“学生”用例图“学生”为系统管理员添加的角色，如图2.2所示，“学生”可以通过登录智慧校园学生办证系统，进行学生证补办，校园卡补办，荣誉证书办理，办理进度查询等操作。图2.3“系统管理员”用例图“系统管理员”在系统中拥有最高的权限级别，如图2.3所示，系统管理员可以通过登录进入系统，对所有用户信息进行管理，拥有学生证业务管理，校园卡业务管理，荣誉证书业务管理等功能。2.3可行性分析2.3.1技术可行性智慧校园学生办证系统是使用VisualStudioCode编辑器开发的，前端是使用当今三种流行的框架之一vue.js开发的，为了避免在前端页面开发过程中DOM选择器的复杂操作，使用vue.js,vue.js是一个轻量级开发工具，Vue.js响应式双向绑定数据，实时反映确凿的数据更改并映照到数据源，简化Web前端开发过程并提高开发效率，使用node.js进行后端开发，，为了确保Node.js的稳固性和性能,它选择了当前最快的浏览器内核V8用作执行引擎。数据库运用了MySQL及其对应插件工具Navicat对数据库操纵。以自学过的知识和学校学习到的知识对系统进行开发，反复揣摩，实践。2.3.2操作可行性本系统页面清晰明了，简明扼要，符合大众审美，并且有对应的提示，方便用户上手操作。第3章系统设计与实现3.1系统总体架构设计学生或者系统管理员通过浏览器登录成功，就可以访问系统进行相关的操纵。系统总体架构如下图3.1所示：图3.1系统总体架构图由图可知，智慧校园学生办证系统系统总体架构主要分为三层：展现层：主要负责与用户和外部系统的交互，特别是提供系统可操作的WEB功能，数据交换程序或数据接口，满足不同的场景使用。使用vue.js开发框架，webPack打包工具。业务应用层：业务应用层实现业务需求的功能服务，包罗系统所需的计算过程和所有功能算法，并与数据访问层和表示层进行交互。分为学生端与管理端，学生端有登录、学生证补办、校园卡办理等，管理端有登录、学生证业务管理、校园卡业务管理、用户管理等。遵从“高内聚，低耦合”的原则，提高灵便性。平台层：主要分三层：数据访问层，包括Dao（数据访问对象）；数据存储层，包含MySQL关系型数据库；系统框架层，采取基于vue.js和node.js框架进行开发的。3.2功能模块设计通过长期的研究以及分析，决定将智慧校园学生办证系统分为两端，学生端和管理端。学生端业务包含登录、学生证补办、校园卡办理、荣誉证书办理、办理进度查询，管理端基础功能包括登录、用户管理、学生证业务管理、校园卡业务管理、荣誉证书业务管理等。功能结构如（图3.2系统功能模块图）所示。图3.2系统功能模块图以下对各个模块功能详细说明：学生端：一、登录（1）登录进入页面：通过学号，密码登录成功进入智慧校园办证系统。（2）修改密码。二、学生证补办（1）查看学生证损坏/丢失补办注意事项：有提示方便信息填写。（2）学生证补办理信息表进行填写以及提交。三、校园卡办理（1）查看校园卡功能操作注意的事项。（2）校园卡挂失：防止资金被盗用。（3）校园卡解冻：恢复校园卡正常使用。（4）校园卡补办信息进行填写及提交。四、荣誉证书办理（1）查看到申请荣誉证书具备的材料以及注意事项。（2）学生可对荣誉证书进行申请，填写申请荣誉证书所需要的资料。五、办理进度查询实时查看自己办理的证件的进度。管理端：一、登录系统的管理员可以通过正确的帐号和密码登录进入智能校园学生办证后台管理系统。二、用户管理（1）添加基本用户信息，包括学生ID，姓名，宿舍号等。学生ID不能重复。（2）修改用户基本信息。（3）删除用户信息，用户离开学校无关联时，方可删除。三、学生证业务管理（1）查看补办学生证同学的学生证申请信息。（2）审核，对补办学生证申请进行审核通过或者审核不通过，审核失败则可以备注不通过的原因。（3）学生证业务列表进行删除，未审核列表不可以删除。四、校园卡业务管理（1）查看补办校园卡同学申请信息。（2）审核，对补办校园卡申请进行审核通过或者审核不通过，审核失败则可以备注不通过的原因。（3）冻结与解冻。（4）校园卡业务列表进行删除，未审核列表不可以删除。五、荣誉证书业务管理（1）查看申请信息。（2）审核，后勤人员可以对荣誉证书申请进行审核通过或者审核不通过，可以进行备注。（3）荣誉申请表列表进行删除，未审核列表不可以删除。3.3数据库设计数据库设计是创立数据库及它的应用系统，为了方便它可以有用地保存数据来满足用户的应用需求。囊括信息管理要求跟数据操作。数据库操纵要求是指对数据的操作，比如删除，修改，添加，检查，统计信息等；信息管理要求明确应管理哪些数据对象并将它保存在数据库中。数据库访问优化设计的目标是提高数据库访问效率并简化复杂查询的SQL语句。智慧校园学生办证系统是为了学生办证，后勤工作者管理而开发的系统。需要用到数据库进行数据存储以及数据操纵而且对数据的一致性有严格的要求，因而数据库与表结构的建立的好与坏会直接影响系统的运行效果。本系统采用MySQL配合Navicat工具对数据进行操作存储。本节对系统用到的数据库表组织进行详尽设计。3.3.1表设计依据需求分析，系统需要设立以下数据库表来保存数据和信息。有用户信息表、管理员表、学生证信息表、校园卡信息表、荣誉证书信息表等等。数据表设计如下：（1）用户信息表（zh_user）表3.3zh_user表列名数据类型可为空注释stu_idVARCHAR(10)NOTNULL用户学号stu_passwordVARCHAR(20)NOTNULL用户密码stu_nameVARCHAR(30)NULL用户姓名stu_sexVARCHAR(10)NULL用户性别dorm_numVARCHAR(30)NULL宿舍号card_idVARCHAR(40)NULL身份证号major_nameVARCHAR(40)NULL专业名称stu_classVARCHAR(40)NULL班级stu_phoneVARCHAR(20)NULL手机号码sdeptVARCHAR(40)NULL系部usecard_statusVARCHAR(10)NULL校园卡使用状态用户信息表存储的数据是智慧校园办证系统的用户，包含有stu_id用户学号，stu_password用户密码等关键信息,校园卡使用状态为0为正常使用，1为冻结中。（2）管理员表（zh_manager）表3.4zh_manager表列名数据类型可为空注释manager_idVARCHAR(20)NOTNULL账号manager_pwdVARCHAR(20)NOTNULL管理员密码管理员表存储的数据是智慧校园办证系统的管理者，包含有manager_id帐号，Manager_pwd管理员密码等关键信息。（3）学生证信息表（stu_idcard_info）表3.5stu_idcard_info表列名数据类型可为空注释stu_idVARCHAR(10)NOTNULL用户学号stu_nameVARCHAR(30)NULL用户姓名stu_sexVARCHAR(10)NULL用户性别major_nameVARCHAR(40)NULL专业名称edu_sysVARCHAR(10)NULL用户学制stu_bornVARCHAR（20）NULL出生日期entrance_dateVARCHAR（30）NULL入学日期date_issueVARCHAR（30）NULL发证日期term_validityVARCHAR（30）NULL有效期stu_reasonVARCHAR（300）NULL学生证申请原因stu_remarkVARCHAR（300）NULL学生证备注stu_statusVARCHAR（10）NULL学生证审核状态学生证信息表，用来保存学生补办学生证填写的信息，包含有学号、姓名、学制、出生日期等。其中学生证审核状态，未审核是用0表示，审核通过是用1表示，审核不通过是用2表示。（4）校园卡信息表（wiscard_info）表3.6wiscard_info表列名数据类型可为空注释stu_idVARCHAR(10)NOTNULL用户学号stu_nameVARCHAR(30)NULL用户姓名stu_sexVARCHAR(10)NULL用户性别sdeptVARCHAR(40)NULL系部hairpin_dateVARCHAR（30）NULL发卡日期cam_validityVARCHAR（30）NULL校园卡有效期wiscard_reasonVARCHAR（300）NULL校园卡申请原因wiscard_remarkVARCHAR（300）NULL校园卡备注wiscard_statusVARCHAR（10）NULL校园卡审核状态校园卡信息表，用来保存学生补办校园卡填写的信息，包含有学号、学制、出生日期等。其中校园卡审核状态，0为未审核，1为审核通过，2为审核不通过.（5）荣誉证书信息表（honor_info）表3.7honor_info表列名数据类型可为空注释stu_idVARCHAR(10)NOTNULL用户学号stu_nameVARCHAR(30)NULL用户姓名stu_sexVARCHAR(10)NULL用户性别honor_nameVARCHAR(20)NULL荣誉称号名称political_statusVARCHAR(20)NULL政治面貌hstart_dateVARCHAR(20)NULL申请开始日期hend_dateVARCHAR(20)NULL申请结束日期main_storyVARCHAR(400)NULL主要事迹honor_statusVARCHAR(20)NULL审核状态honor_remarkVARCHAR(300)NULL备注3.3.2ER关系图E-R图，也被称作实体连接图，它是用来形容现实世界关联的概念模型的有用方法。这是表达概念关系模型的一种方式。组成E-R图的三个基本元素是连接，属性和实体类型。在实体关联数据模型中，存在三个常规约束：多对多约束（关联），一对多约束（关联）和一对一约束（关联）。以下是主要数据库表的关系图：图3.8数据库表的关系图本系统各数据库表都存在一定的关联关系，管理员可以管理n个用户，一个用户只可以拥有一个学生证，一张校园卡，可以拥有多张荣誉证书。3.4系统实现结合系统的整体架构和功能模块设计，智慧校园学生办证系统分为学生端与管理端，在实现过程中，比较重视用户的体验感，页面设计也简洁明了，作为政务类系统，采取了代表着冷静、理智、庄重的蓝色作为底色。其中最重要的功能模块有学生业务办理模块、校园卡业务办理模块、荣誉证书申请模块。下面将列举几个功能模块进行详细的讲解。3.4.1登录功能模块由于是政务系统，登录功能模块对用户的密码保密性需要加强，采取了MD5对密码进行了加密存储，并使用JSONWEBTOKEN进行信息的安全传输，并且为了可以明显减轻服务端的内存压力，JSONWEBTOKEN方式将用户状态分散到了客户端中。学生只能通过自己的学号密码登录进入系统。以下附上简要的代码：functionhashPassword(user,options){if(user.changed('stu_password')){user.stu_password=MD5(user.stu_password).toString()}}图3.9登录页实现图3.4.2首页设计实现首页是对智慧校园学生办证系统的业务进行展现，采取了代表着庄重、理智的蓝色。设计主要以简约风为主，清晰明了，让用户操作起来也方便。使用vue框架进行编写，以路由的方式进行跳转。使用了Normalize.css，其让HTML网页元素在不同浏览器的形式更一致，统一。以下是首页的效果图：图3.10首页实现图3.4.3学生证功能模块学生经常会出现丢失/损坏学生证的情况，由于使用的次数比较多，故开发此项业务。因办理证件需要填写的个人信息比较多，所以输入设置的校验比较多，需要校验成功才可以对数据进行提交，使用了v-model进行数据的双向绑定。以下附上部分简要的代码：this.$refs['stusubForm'].validate(async(valid)=>{if(valid){this.loading=truethis.error=''}}exportdefault{raiseStuCard(data){returnrequest.post('/stuCards',data)}}exportdefault{raiseStuCard(data){returnrequest.post('/stuCards',data)}}图3.11学生证信息提交实现图3.4.5荣誉证书功能模块学生每年需要申请的证书非常多，为了减少各资源的消耗，开发了此荣誉证书业务。由教师设定好荣誉称号名称，申请开始日期以及申请结束日期。学生再填写相应的信息进行荣誉证书的申请。学生端通过获取后台的返回的数据进行渲染在荣誉证书申请页面上。以下附上简要代码：honorsubRules:{stu_name:[{type:'string',required:true,message:'请输入名字',trigger:'blur'},{min:2,max:5,message:'长度在2到5个字符',trigger:'blur'}]}图3.12荣誉证书信息提交实现图3.5本章小结本章对智慧校园学生办证系统的登录模块、首页、学生证业务模块以及荣誉证书进行了介绍，通过部分的页面展现让大家更快的了解智慧校园学生办证系统的主要功能以及其安全性。第4章系统测试4.1系统测试4.1.1测试的目的给予系统软件质量保障是软件测试目的,也就是确保软件能够满足设计与实践要求；提供信息给后面的风险评估；软件开发过程时符合高质量的。4.1.2测试的意义软件测试在软件开发中起着关键作用，其对已开发完的系统功能进行测试，软件测试可以测试软件的质量，并且代表对需求，编码和用户体验的最终检查。软件的缺陷会暴露出来，从而进行完善，使得系统在安全、性能、用户体验等方面更好，进一步保证软件的质量。4.1.3软件测试方法软件的测试方法又很多琳琅满目。黑盒测试和白盒测试是测试的主要方法。白盒测试方法主要有代码检査法、静态结构分析法、静态质量度量法、逻辑覆盖法、基本路径测试法、域测试、符号测试、路径覆盖和程序变异等等。按测试设计方法分类有：1、黑盒测试:无法会意或者使用系统的内部结构和知识，把将软件系统视为“黑箱”。从软件的行为，而不是内部结构出发来设计测试。2、白盒测试：设计者可以看到软件系统的内部结构，并且使用软件的内部知识来指导测试数据及方法的选择。3、灰盒测试：它主要用于集成测试过程，在白盒测试跟黑盒测试之间。从测试是自动还是手动上分类有：1、手动测试：测试人员手动去输入用例，使用鼠标去手动测试，查察结果。2、自动化测试：在预设条件下或用应用程序对系统进行测测试API。本系统将采用接口测试与黑盒测试的方法：1、接口测试：接口测试用于检验系统之间与外部系统以及各个内部子系统之间的交互点这是很主要的，测试系统组件之间的接口的测试是接口测试。检测数据交换是测试的重点，把持和转运管理过程以及系统之间的相互逻辑依存关系等。2、黑盒测试：确定好测试的用例，揣摩测试的结果是对还是错，凭据程序功能需求规范考虑，一个一个的去测试产品是否达到用户需求的功能。4.1.4系统接口测试结果接口测试的本质就是数据的接收和传输，工作原理是URL通过post或者get请求像服务器发送一些东西，然后得到一些相对应的返回值。接口测试为了测试接口（API）的正确性与稳定性。系统采用了postman接口测试工具对api进行测试。以下是部分接口测试代码以及效果图：asyncraiseUser(req,res){try{constUser=awaituser.create(req.body)res.status(201).send({User})}catch(error){res.status(400).send({code:400,error:'用户创建失败'})}}图4.1创建用户返回成功结果图上图是创建用户结果成功返回的图，状态码是201，201表示已创建，请求成功并且服务器创建了新的资源。图4.2创建用户返回失败结果图上图因为设置了学号以及身份证号的唯一性，当学号身份证号二者其一出现重复了，会返回http错误状态码400，表示错误请求。图4.3测试查询用户代码截图图4.4测试登录接口代码截图图4.4登录成功返回结果图上图是通过正确的学号密码验证成功的结果图，http状态码返回200。密码采取了MD5存储，以及使用JSONWEBTOKEN，这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。图4.5登录失败返回结果图上图当用户名或者密码错误的时候将返回http状态码403，拒绝请求。4.1.5黑盒测试用例以及结果由于系统业务逻辑比较多，在这里将会给出部分的测试用例以及测试结果。表4.7学生登录成功测试用例用例名称学生登录成功目的测试学生通过正确学号和密码成功登录进入系统。前提学生进入智慧校园学生办证系统登录页。测试流程填写正确的学号以及密码。点击登录按钮，成功进去系统。预期结果页面跳转到智慧校园学生办证系统的首页。测试结果通过。表4.8学生登录失败测试用例用例名称学生登录失败目的测试学生通过错误学号或者密码无法登录进入系统。前提学生进入智慧校园学生办证系统登录页。测试流程1）填写错误的学号或者密码。2）点击登录按钮，无法进入系统。预期结果登录框提示登录失败，无法进行页面跳转。测试结果通过。表4.9学生证业务测试用例用例名称学生证业务目的学生证业务功能模块前提学生进入智慧校园学生办证系统的首页。测试流程1）点击学生证丢失/损坏业务。2）将看到办理证件注意事项，点击下一步按钮。3）对学生证信息表进行填写。4）填写完成后，点击提交按钮。5）提交成功后页面将跳转到首页。预期结果1）跳转到注意事项页，点击下一步将跳转到学生证信息表填写页。2）点击学生证信息表按钮将返回到首页。3）当信息校验错误的时候会显示红色的提示框。4）信息填写完成后，点击提交按钮，成功提交并且跳转到首页。测试结果通过。表4.10荣誉证书业务测试用例用例名称荣誉证书业务目的荣誉证书业务功能模块前提学生进入智慧校园学生办证系统的首页。测试流程1）点击荣誉证书申请办理业务。2）将看到办理证件注意事项，点击下一步按钮。3）填写申请荣誉证书对应的信息。4）填写完成后，点击提交按钮。5）提交成功后页面将跳转到首页。预期结果1）跳转到注意事项页，点击下一步将跳转到荣誉证书信息表填写页。2）点击荣誉证书信息表按钮将返回到首页。3）在荣誉证书信息填写页，如果有荣誉称号可以申请，则会显示荣誉名称，并显示对应的申请开始日期以及申请结束日期。如果没有则为空。4）当信息校验错误的时候会显示红色的提示框。5）信息填写完成后，点击提交按钮，成功提交并且跳转到首页。测试结果通过。第5章结束语5.1全文总结本文对智慧校园学生办证系统的开发过程进行了一系列的阐释。