大学新生报道系统的设计与实现.doc

1 引言1.1 课题研究背景与意义我校每年都要迎接许多新生。新生入学时我校需要办理大量繁琐的新生报到手续，而我校没有相关的软件来办理这种事务。在21世纪是信息的时代，对于入学新生比较多的大学，往往需要学校投入大量的人力物力。据调查显示，现在好多高校新生入学一般是采用人工填写登记表，由新生前来面对面现金交易的方式，耗费时间和精力，且因为人为因素存在，统计的数据容易出现误差。和相关办理相应手续的同学和老师的交流中，了解到他们对新生报到工作的亲身体会和对报道步骤的分析调查，大家都建议应该开发一个管理新生报到的系统。在当今信息时代，面对越来越多的新生信息，传统的手工填表的方法已经远远不够了，也无法高效率地将新生信息的重要部分提取出来以将其做准确的处理，比如新生缴费有的是全额缴费；有的是国家生源地贷款，还要出示证明；有的是学费未缴全的，有的新生并未来报到等等，这些信息全靠人力，只能依据表格填数据。在浪费大量人力、物力的同时无法做到实时监控,难以保证数据的准确性和有效性。因此，在信息时代，就要发挥信息时代的作用，开发新生报到管理系统，也是一种管理界的新思想，需要我们努力实现。借助现代信息技术和管理理论，建立现代管理信息系统是当今社会的重要趋势。当代大学在新生报到这个管理界更需要借助现有信息技术理论，以减少人工操作为目的，以有序高效管理新生，为新生顺利入学报到为重中之重，利用现代信息技术开发一款管理平台是现代大学的重要事项。随着科学技术的不断提高,计算机科学与技术愈加成熟。人们已经深刻地认识到计算机技术为人类生活带来的好处，其功能和效率无可替代，其应用领域也越来越宽广。从工业、农业、商业、军事、银行到各类学校，从国家政府机关到每个家庭的日常生活，计算机几乎无处不在，新生报到系统作为计算机技术的一部分，也应该用现代信息技术开发一款高效率的新生报到管理平台，后台可以建立一个新生报到的数据信息管理库，可以实现快速录入，查找，增加，删除信息的操作，用身份验证登录保证系统安全性，这样，可以提高工作效率，为学校对新生进行管理决策和监控提供一个很好的管理平台。后台数据库可以实现对已报名但又不来报到的学生信息进行分析处理，为学生报到提供了很好的条件。1.2 系统的可行性研究该系统解决了我校新生报到信息填写，保存，提交等一系列操作，减少了人力，面对庞大的信息量，研究开发该系统，做到了信息的规范管理、科学统计和快速地查询，从而减少了管理方面的工作量。在新生入校前，我校就已经将已办理好通过银行缴费的新生分配给相应的寝室。新生入校时，要交入学通知书、高中的档案、组织关系档案和学费，分别记录下来，报到结束后生成相应的情况表。我校将这些数据存进数据库做相应处理，再在系统中通过新生报到录入信息对其进行管理。该系统具有可行性，安全性，可维护性，可用性。2 系统的基本功能和实现方式2.1系统的基本功能描述该新生报到系统是一个基于web前端技术的系统，后台数据暂时用json数据做了模拟，只要有后台接口，则可以实现一个完整的新生报到系统。该系统有数字迎新报到系统，迎新公告，迎新须知，师院简介，资助政策，友情链接等功能模块，新生需先进入数字迎新系统完成报到，再浏览其他模块提供的信息。2.1.1系统的基本功能模块(1)数字迎新系统：包括新生管理系统和教师管理系统；新生管理系统包括：登录填报个人信息，浏览个人信息，缴费，保存提交；教师管理系统包括：登录，浏览学生填报信息，修改信息，审核信息，保存提交到后台管理；财务管理系统：登录，浏览缴费信息；(2)迎新须知包括：报到事项，缴费事项，军训事项，日常生活，学习问题，交通简介；(3)迎新公告包括：本年度新生入学须知，本年度学院招生简章，本年度学院招生章程，本年度新生接待的友情提示，新生缴费系统的相关提示，本年度新生军训须知，往届毕业生就业情况；(4)资助政策包括：奖助学金，助学贷款，勤工助学，医疗保险；(5)学校简介包括：走进衡师，学仰衡师，欢乐衡师，学仰衡师；(6)常用链接包括：学生教务处，师院官网，学生工作处等等。2.2系统的实现方式本系统是基于web前端技术的管理系统，它的实现是以将webstorm 2016作为开发平台，以html+css+javaScript为核心，以html5为开发语言，以json数据模拟后台数据，使用ajax调取服务，模拟了整个报道流程。本系统就差后台接口，若接入后台数据接口，则系统功能完整且有可行性。2.3系统的主要工作通过调查，本系统需要有以下功能：(1) 本系统使用人数较多，要求有很好的权限管理，给不同用户分配不同的管理权限；(2) 本系统需要按照一定的报到流程按一定的操作步骤开发每一个功能；(3) 系统分学生管理、老师管理和财务管理。基于以上系统分析，制定相应的系统设计方案，进而成功的完成整个系统的开发，并跟据系统设计和开发完成高质量的论文。2.4系统的开发目标本系统主要在以上所述的基础之上开发系统，目的是为了实现新生数字报道，教师管理，新生信息浏览的功能，减少人工劳动力。2.5本章小结本章通过对系统研究的背景意义做了详细的解说，对整个系统的各大功能模块做了概括，研究系统的实现方式，系统的主要工作和开发目标，研究了系统开发的作用及意义，最后对系统研究做了概要介绍。3系统的开发计划3.1 系统的开发要求本系统的开发要求是必须清楚系统的使用对象和系统符合国家规定的原则。本系统的使用对象是大一新生，老师，财务部门的工作人员，明确之后对系统进行可行性研究，该系统要有一定的实用性和经济性，使每个用户都能方便顺利快速的完成任务和工作，达到此要求，就可以按照计划和需求进行有目的的开发，使系统开发更加快速方便。3.2 系统开发计划研究定义在开发系统之前，结合我校新生报到的流程和我校现有的实际条件即我校新生报到都是面对面现金交易和刷卡的方式，耗费时间和精力，且因为人为因素存在，统计的数据容易出现误差，根据此实际条件，研究开发一个方便快捷的新生报到系统。遵循系统开发的原则，对系统的可行性、实用性和经济性开发一款高效率的新生报到系统。3.3系统所遵循的原则(1)实用性原则：本系统面向的用户是新生和教师，为了考虑到用户的使用便捷性，本系统必须通过用户运行才可以对此进行评价，所以该系统必须注意到每一个细节，遵循一个原则，一切为了用户考虑，为用户服务。(2)稳定性原则：本系统要求在一定时间内具有相对的稳定性。可以方便用户管理。(3)经济性原则：本系统开发成本不是很高，省了一大部分人力资源，而且按本设计文档的计划进行开发，不仅省了一部分成本，而且在管理方面具有一定的实用性。3.4 系统的技术可行性分析目前，我校在新生报到时采用大量的人力来迎接新生，采用人工填表的方式，办事效率有待提高，增加了经济损失和工作量。鉴于此状况，开发一款基于web前端技术的管理平台，此系统利用WebStorm2016前端开发工具，后台数据用假的json数据，用ajax实现数据的调取，用html+css+javaScript实现页面的布局和效果以及复杂功能的开发。此系统如果有从数据库调取的后台数据的接口和参数，就可以完整的实现一个非常有用的新生报到管理系统，将为我校新生报到带来很大的好处。用div+css还有BootStrap框架实现页面的响应式布局，使用Ajax请求Json数据，用jquery类库实现系统的效果交互和数据绑定，将其存入localStorage,登录时获取localStorage的后台数据，web前端技术的灵魂技术是javaScript,JavaScript 是一种轻量级的编程语言，JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。绝大多数现代网站都使用了这种语言，并且所有的现代浏览器基于桌面系统、游戏机、平板电脑和智能手机的浏览器均包含了JavaScript解释器。使它成为史上最广泛的编程语言。使用JavaScript的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。JavaScript具有很多优点：(1).简单性：JavaScript是一种基于浏览器的脚本语言，JavaScript利用小程序段的方式实现编程，它是一种很好的脚本语言，JavaScrip是一种解释性语言，它提供了一个非常简易的开发流程。JavaScript语言结构跟C语言、C+语言一样。它不像有些编程语言，需要提前编译，它在运行的过程中逐行编译。JavaScrip与HTML标识相结合在一起，方便了用户的操作。(2).动态性：JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。(3).跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。“JavaScript”这个名字经常被误解。除了语法看起来和Java类似之外，这两种语言是完全不同的两种编程语言。它早已超出了“脚本语言”本身的范畴，而成为一种集健壮性、高效性和通用性为一身的编程语言。3.5本章小结本章对系统遵循的原则做了详细的解说，也对系统可行性，经济性，原则性，面向用户性做了综合说明，为系统的开发合理性提供了条件。4系统的需求分析4.1 需求分析本系统的需求是给新生提供一个方便快捷的新生报到管理系统。大学新生报到需要老师和财务还有学生工作处等工作人员一起协助完成，其工作量和数据量是非常庞大的，以往的新生报到采取传统的方式完成新生迎接和报到，费事费力又费钱，开发本系统能满足这些用户的需求，给新生报到的工作人员和新生提供一个方便快捷的新生管理平台，面对用户的各种需求提出一个系统的解决方案，进而按照需求来开发一个高效的迎新管理系统。4.2 本校组织结构分析通过本校组织结构图表形象的展现学校组织结构，进而根据组织结构来考虑新生报到系统的工程结构和需求的功能模块；我校使用该系统的关键部门的组织结构主要包括：教务处，学工处，总务处，团委，招生处，开发的系统由学校高级管理部门进行管理，系统由这几个部门共同协调完成，这里计算机学院主要完成系统的技术开发，学工处主要完成对新生信息的收集和管理，教务处主要完成新生报道后选课和考试相关工作的安排（教务处我校有单独的教务处管理系统），总务处主要完成对新生缴费后的相关费用的处理工作，招生处负责招生。组织结构看表4-1所示：4.3 系统使用对象分析本系统主要针对新生报到，其使用对象是新生，教师，新生接待人员，财务管理人员。新生主要工作就是在系统中填写学生个人信息和缴费信息，教师的工作则是负责学生信息的确认和分班分配宿舍，财务的工作则是确认新生学费的缴费情况。将这些信息确认处理之后，新生则可以顺利完成报到。本系统针对不同的用户，分别提供了不同的需求，分析好系统的使用对象则可以对系统的功能分析提供一个很好的条件，进而对功能的开发提供不错的条件。4.4 系统的功能分析(1)数字迎新系统：包括新生管理系统和教师管理系统；新生管理系统：登录，填报个人信息，浏览个人信息，缴费，保存提交；教师管理系统：登陆，浏览学生填报信息，修改信息，审核信息，保存提交到后台管理部；财务管理系统：登录，浏览修改缴费信息；(2)迎新须知：报到事项，缴费事项，军训事项，日常生活，学习问题，交通简介；(3)迎新公告：本年度新生入学须知，本年度学院招生简章，本年度学院招生章程，本年度新生接待的友情提示，新生缴费系统的相关提示，本年度新生军训须知，往届毕业生就业情况；(4)资助政策：奖助学金，助学贷款，勤工助学，医疗保险；(5)学校简介：走进衡师，学仰衡师，欢乐衡师，学仰衡师；(6)常用链接：学生教务处，师院官网，学生工作处等等。系统用图4-1的形式将系统功能模块进行形象的展现4.5 新生管理系统流程分析新生首先用自己的身份证号登录数字迎新系统，首次登录账号身份证号，密码：123456，进入信息填报栏，填写个人信息，然后点击下一步，确认信息，然后填写缴费信息，进行缴费，此处缴费分为三种情况：(1)学生登录学生管理系统填写新生信息，带“*”的为必填项，必须确保信息准确无误。学生在登录学生管理系统后，首先要填写个人信息，因为登录系统后，学生的姓名，性别，身份证号都已从学生数据库中获取到（此处数据用假的json数据模拟），然后只需勾选户口迁移选项，如果未迁移则勾选否，否则勾选是，政治面貌按真实情况勾选，接下来是勾选要交的费用，如果是全额缴费，则全部勾选，如果是交一部分，则不需全部勾选，但是后期在规定时间内要在系统内完成所欠费用的缴费，如果是生源地贷款，则会提示用户在规定时间内将证明材料交到学术交流中心。非贷款，缴全部学费，选中要缴费的选项；生源地贷款，会弹出一个弹框，提示用户在一定的时间段内将贷款证明交予学术交流中心，以补全学费；学费未缴全者提示弹框，务必在多少天之内交齐。（2）信息确认：此过程确认基本信息是否填对，核对好确认无误后点击缴费按钮。信息获取是从后台获取的，学生填好信息后在此页会展示出来让用户浏览是否填对，进行信息浏览确认，如果确认所有信息均为正确则可以点击缴费按钮进入缴费的流程。4.6缴费管理的业务流程分析缴费管理的业务流程：管理员进入主界面后，点击缴费管理模块，可以查询和添加相关缴费具体的业务，当添加缴费时会先向学生信息的数据库中获得学生的信息，4.7整体业务流程分析整体业务流程是指管理员以管理员的身份对学生，教师，缴费等模块做以管理。在这里管理员以管理员的身份登录系统，可以操作教师管理，对教师管理做出评价和处理，如果老师工作都成功顺利完成，则表示老师工作审核通过；对学生管理的信息进行审核，如果学生信息也准确无误，则审核通过，再对缴费管理进行审核，如果费用跟数据库中的一样，没有误差，则审核通过。此处老师、学生、财务都可以登录，并进行相应步骤的操作，其操作流程清晰，步骤并不发杂，方便用户使用。其流程图如图4-6所示：4.8本章小结本章通过业务流程图和功能层次图对整个系统的开发做了一个大致的分析，通过对组织结构的分析，包括了解该组织的部门组成情况，各部门的职能等，为分析信息流程做准备设计和开发的进行，由于本系统为报到信息的管理系统，在这里就不一一阐述了。5 系统的实现与测试5.1系统的实现过程5.1.1 设计界面布局和需要的功能(1)设计好整个系统的首页：首页包括衡阳师范学院logo图，衡阳师范学院新生报到标题，导航，轮播图，数字迎新系统按钮，点击按钮就可进入衡阳师范学院数字迎新系统，迎新公告，迎新须知模块，师院简介，资助政策模块，友情链接，底部的footer部分；其中重点模块就是数字迎新系统，其他模块只是辅助新生对学校进行详细的了解。(2)接下来重点开发数字迎新系统，数字迎新系统有三个权限的身份的用户来管理，包括新生，教师，财务处；这部分用户以不同权限进行登录，如果是学生，则先填好个人信息，确认信息无误后将信息提价，然后填缴费系统，进行学费缴费，此处缴费分为三种情况：缴费根据自己的真实情况填写，如果是生源地贷款，选中生源地贷款提交信息，将证明材料交到学校学术交流中心即可，若是自缴费缴全部费用，则可直接进入分班列表，查看自己的分班信息和宿舍编号以及学号，若未缴全费用可在规定期限内缴完即可完成报到；如果是老师，则登录教师管理，对学生填写的信息进行增删改查；若是财务处，则对学费进行审核，再进行下一步处理（此处测试账号是测试密码：123456）。5.1.2 登录逻辑实现首先定义一个点击事件的函数，然后绑定账号密码元素，然后通过ajax调取模拟的json数据，等获取成功之后再调用此函数，逻辑判断账号密码是否跟“数据库”中的数据一样，如果相同则登录成功，如果不相同需重新登录（此处主要介绍学生登录系统）。登录过程的逻辑实现需要借助js来完成，代码如下：$(#btn).click(function() /绑定点击登录按钮事件var sj_h = $(#shouj).val(); /绑定账号元素var mi_m = $(#nima).val();/绑定密码元素$.ajax( /jquery类库ajax实现后台数据（此处用假的json数据模拟）type：get,/get方式获取url：./ajax/zhuce.txt, /获取地址urlasync：true,success：function(msg)/获取成功之后的回掉函数var yh_sjh = eval(+msg+) /eval()函数转换成json字符串console.log(JSON.parse(msg)$(.wei_ZC).css(display：block)/如果账号密码错误会提示账号密码错误重新输for(var i=0;iyh_sjh.length;i+) / 遍历数组if(yh_=sj_h)console.log(1)$(.wei_ZC).css(display：)if(yh_sjhi.mima=mi_m)/如果输入的密码跟保存的一样，则成功登录console.log(2)$(.miam_yz).css(display：)setCookie(yhm, sj_h, 0)document.cookie=yhm=+sj_h;localStorage.setItem(name,sj_h)/将数据存入localStorage中/跳转流程页window.location.href=liucheng.html; /登录成功后进入数字迎新系统else$(.miam_yz).css(display：block)/);)5.1.3进入办理流程后的办理逻辑实现登录系统之后要求学生填写个人信息，包括姓名，性别，年龄，身份证号等，还要学生勾选要缴费的选项，其选项必须全选才可以，否则缴费项目不齐全会影响缴费，进而会影响报到，此处勾选好的缴费项目提交后会将信息提交后台，此处用json数据模拟，填写成功后点确认会跳到缴费系统页面，办理系统代码如下：$.ajax( /ajax获取模拟的json数据type：get,url：./ajax/package.json,async：true,success：function(data)var ii = data.shouj;var xm = $(#xm).val();/绑定获取元素var xb = $(#xb).val(ii.xb);var sf = $(#sf).val(ii.shenfz););$(#btn-jf).on(click,function()var xm = $(#xm).val() /将绑定获取到的信息从“数据库”拿到var xb = $(#xb).val()var sf = $(#sf).val()var hk=$(input：radioname=a：checked).val();/复选框选中提交将数据传到后台var zh=$(input：radioname=b：checked).val();var nun = 0;$(input：checkboxname=items：checked).each(function(i)nun += parseInt($(this).val() /将数据取整)var value = xm + , + xb + ,+ sf + ,+ hk + ,+ zh + ,+ nun/计算缴费总价if(window.localStorage)alert(hk)if(hk != undefined & zh != undefined & nun != 0)localStorage.setItem(key,value) /拿到localStory的数据window.location.href=jiao-fei.html /缴费成功后跳到缴费流程（此处可以点完成了）elsealert(请认真填写) /提示信息elsealert(请更换游览器);)5.1.4 缴费完成后确认信息逻辑实现进入缴费系统后浏览要缴费的额度，此处缴费数据已提交后台，再存进数据库，后台再将数据返回，用户预览，确认无误之后再缴费确认，交予银行处理，此处因需要营业执照，缴费获取短信验证码如果有接口就很好实现了，此处系统未做。完成之后就进入分班页面，以上流程代码如下：var value = localStorage.getItem(key) /获取localStorage的数据var ss = value.split(,); /split()方法将字符串用“，”隔开$(#xm).val(ss0) /获取所填写的个人信息$(#xb).val(ss1)$(#sf).val(ss2)$(#hk).val(ss3)$(#zz).val(ss4)$(#gj).val(ss5)$(#btn-jf).on(click,function()window.location.href=fen-ban.html)5.1.5 办理完成之后的逻辑处理办理完成之后浏览自己分班情况，宿舍分配情况，数据有后台提供，此处用假数据模拟，代码如下：var value = localStorage.getItem(key)/ var name = localStorage.getItem(name)var name = a;var ss = value.split(,);$(#xm).val(ss0)$(#xb).val(ss1)$(#sf).val(ss2)$.ajax(typ