新生入学管理系统的设计与实现Word文档格式.docx

1、所以使用依附公众号相关技术开发移动端的新生入学管理系统是相当好的选择。研究方法与要达到的要求使用nodejs+koa2框架开发一个新生应用，通过文档使用所提供的方法和原生封装的组件。虽然和原生开发比起来是差点，但是绝对满足大部分的业务需求。而且vue+vant可以整合js+css+html等相对应的框架，使界面看起来更优美更整洁，有很好的界面感和体验感。而且利用了nodejs的非阻塞I/O和轻量的特点，大大提高了系统的性能。市面上也好多管理系统中间件也是用到了nodejs,例如极光和thisIM等中间件。该管理系统通过分析基本的功能和操作，能够在微信公众号主流移动应用平台有较好的体验性。体验的

2、时候，也有较好的整洁感，界面与界面之间过渡自然。以此证明vue+vant技术开发新生入学管理系统，能够为学生的入学时便利性带来较好体验。1 相关技术介绍1.1Vue的介绍Vue.js是现在来说使用率最高的一个前端开发使用的框架，它是三大主流前端开发框架其中的一个。客户端界面可以用这套Vue.js框架来构建成（因为这是一整套完整的方案，所以会对所使用它的项目有很大的侵入性，若项目需要换其他框架，那么就需要最新构建项目了），它对于新手特别的的友好，很容易上手，因为这个框架有固定搭配的第三方库。使用这套框架可以提高项目开发的速度，而且还可以去除很多不必要的dom操作；双向数据绑定，通过Vue.js提

3、供的指令，对于前端而言关心业务上的逻辑，不再关心dom如何渲染。它以前端MVVM模式为主，前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VM ViewModel）。VM是其中核心，M和V间的调度者。M，保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。V，每个页面的html结构。VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）。

4、图1-1 前端MVVM模式图1-2 MVVM 调用流程图1-2 所展现是MVVM 调用流程图：（1） 系统实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要绑定好更新函数；（2） 接着实现Observe,监听所有的数据，并对变化数据发布通知；（3） 接着实现watcher,作为一个中枢，接收到observe发来的通知，并执行compile中相应的更新方法。（4） 结合上述方法，向外暴露mvvm方法。1.2Koa相关特性介绍Koa作为nodejs最新的 web 框架，开发他的则是express的作者。目标是使它在web程序和restful AP

5、I上，更显得更小、更强。 使用async和await的函数，Koa帮开发人员解决回调地狱，还增强原有nodejs框架错误处理。 为让Koa显得更小，Koa没有捆绑任何中间件。而是需要什么就提供什么的方式，帮开发人员快速而优雅地开发服务端的程序。图1-3 Koa执行的流程图1. 洋葱模型：koa被业界公认是nodejs第二代web框架，是因为独有的中间件流程控制。Koa内部方法流程是一个洋葱模型。而且koa和koa2中间件的实现思路都是差不多没变化，但是实现方式有所区别，koa2在node7.6之后更是可以直接用async/await来替代generator使用中间件。图1-4 Koa请求-响应

6、洋葱模型原理图图1-4展示是Koa请求-响应洋葱模型原理图:koa调用中间件的过程中，如果遇到await next（）的时候将暂停接下来处理，而着手进行处理下一个中间件。当多个中间件需要调用的时候,use将他们放进数组队列再一种压栈的形式从top开始执行，当中间件遇到await next的方法后将进入数组队列中的相邻的下一个中间件，当最中间的中间件调用完毕后就开始回帧，再来执行之前未执行完的中间件的代码部分，这就是koa以洋葱模型解释的中间件机制。2.Koa与express对比后的优势（1）对于在实现方式不一样的地方就是Koa它是使用ctx调用相关中间件的参数的，而express则是分别用re

7、q，res这两种来调用的。请求和响应都是在一个方法中能省去不必要资源浪费。（2）在各自中间件连接的方式不同。express是一环扣一环的串联的设计，实现思路易让人接受。而koa自定义某一中间件的执行顺序的，较express的灵活扩展性比较强。1.3Vant UI介绍Vant UI 是有赞团队开发的移动端组件库。作为一种移动端开发UI框架，特性是比较轻量、可靠的。图 1-5 Vant的logo1.3.1 Vant UI框架分别为:60+ 高质量组件90% 单元测试覆盖率完善的中英文文档和示例支持按需引入支持主题定制支持国际化支持 TS支持 SSR1.3.2 Vant的使用（1）脚手架安装 Vue

8、 Clinpm install -g vue/cli（2） 创建一个项目vue create hello-world（3） 创建完成后，可以通过命令打开图形化界面，如下图1-6所示vue ui图 1-6 Vant图形化界面1.3.3引入组件（1） 安装插件npm i babel-plugin-import -D plugins: import, libraryNamevant,libraryDirectoryesstyle true （2） 在babel.config.js 中配置module.exports = plugins: import libraryName: vant librar

9、yDirectory:es style: , ;（3） 在代码中直接引入 Vant 组件在main.js文件中引入vant组件，import Toast,Row from “vant”;Vue.use（Toast）;Vue.use（Row）;2 新生入学管理系统的可行性分析2.1.可行性分析可行性分析首要是分析本新生入学管理系统的技术可行性、操作可行性、经济可行性进行分析，在所写解决文案是否可用性和可行性，能否在自身所拥有的资源和规定的时间下完成任务，获得相对应的效果。2.1.1技术可行性本平台后端技术采取成熟的nodejs+Koa2框架，拥有较为完整的官方文档与活跃的社区，外面的企业已经有相

10、对成熟开发模式，所以能够应用开发相对应平台功能。新生前端采用Vue与H5是Web相对成熟的web端应用的框架，由于现在技术更替比较快，但是在官方网站上开始可以查询最新文档，并通过编程验证实现，通过对这技术的掌握，可以实践中开发新的跨平台应用。2.1.2操作可行性本应用基于Vue与H5框架开发，Vue框架在移动端有着比较好UI体验，也是现在互联网公司最热门的前端UI框架之一。通过Vue与H5的结合，能使这个通讯平台有着比较好的流畅性。为用户体验的优越提供可行性。2.1.3经济可行性平台后端技术node+Koa2框架都基于开源框架，能免费使用并获得一定的支持服务。数据库系统采用性能高、成本低、可靠

11、性好的关系型数据库 MySQL。服务器也是采用阿里云的学生服务器，在经济上付出的费用较低2.2.可行性分析结论通过可行性分析，跨平台新闻阅读应用在技术、操作、经济三个方面的可行性都达到要求，具备进行开发的价值，并能在开发完成上线，为用户提供服务。 3 新生入学管理系统的需求分析3.1系统性能需求 表3-1 系统性能需求质量属性详细要求正确性无逻辑错误稳定性Web服务持续稳定工作时间3天（72小时）可靠性有针对异常的处理，防止非法操作性能，效率平台进行sql和接口优化，响应时间快易用性界面较为简洁，每一步操作都有相对的提示清晰性界面简洁,一目了然安全性不透露用户的私密信息，密码采用hash加密可

12、扩展性可在当前需求基础之上进行功能上的扩展跨平台性可运行在IOS/Android等主流移动端上3.2平台功能需求分析3.2.1.登录模块超级管理员登录管理后台，在后台人员管理模块注册管理员账号，给予一些人管理账号。后台人员使用账号和密码登录管理平台，浏览信息或者管理新生用户、其他功能模块。3.2.2.学生用户管理模块超级管理或者管理用户可以查询每学期新增的用户或者其他用户信息。对各级新生进行一键导出，或者个别的手动录入。同时，管理员可以进行修改或者修改密码、还有新建新生用户操作。3.2.3.后台用户管理模块超级管理用户可以查询；每个管理员的信息。对管理员的信息进行审核，起到一个过滤效果。同时，

13、管理员可以进行修改或者修改密码、还有新建管理员的操作。3.2.4.宿管模块超级管理员和后台人员都能查询宿管模块的信息。能对宿管的信息进行操作，可进行信息编辑。同时，管理员可以禁止或者启用宿管人员变动、还有添加宿管人员的操作。3.2.5.宿舍管理模块界面以列表形式查看每个宿舍入住情况，对新生的入住情况进行统计。可以通过Excel形式进行一键导入，和对个别学生进行差异化修改。3.2.6.财务模块当用户通过新生入学管理系统查看当前待缴详情和已缴详情。通过线上支付系统和线下财务人员手动缴费系统完成一系列缴费的财务行为。3.3新生入学管理系统的DFD图图3-1 新生入学管理系统的DFD图3.4新生入学管

14、理系统的ER图图3-2新生入学管理系统的ER图3.5用例的实现与说明3.5.1.用例图示图3-3 用户用例图3.6系统角色设计3.6.1 新生用户新生用户是这个系统的新生入学所设定的角色，学生用户要在新生系统上注册和登录才能进行相应的缴费和查看信息功能操作。主要是对自己的学籍和入学流程进行管理。3.6.2 管理用户管理用户是这个后台系统重要的一个角色，是这个系统主要的基础。管理员根据超级管理员给予的相对应模块的权限进行管理操作。分为宿舍管理员、财务人员、系统录入人员，不同管理人员对应不同的职责。3.6.3超级管理员超级管理员是新生入学管理系统中最重要的角色，是这个系统使用的核心。给予角色相应的

15、模块权限，对于有可能加入新功能或者新角色，超级管理员可以添加对应的权限菜单或者用户角色。3.7用例分析3.7.1 新生用户用例 图3-4 新生用户用例（1）用户登录表3-2 用户登录用例名称用户登录操作者拥有用户的账号和密码描述用户进入公众号点击新生系统按钮,进入登录界面，输入账号和密码前置条件一台手机，接接WiFi，关注新生公众号基本事件流1.进入新生系统公众号，进入登录界面。输入账号和密码，点击按钮2.通过HTTP协议把登陆数据发送本地服务器成功后，页面上有用户的信息的标识，说明已经登录成功其他事件流输入格式不正确或者账号不存在或者密码错误异常事件流网络故障，连接服务器失败，数据不能提交，

16、提示用户登录失败。后置条件退出登录（2）新生用户缴费表3-3 新生用户缴费新生用户缴费拥有新生用户的账号和密码用户点击新生系统按钮,进入缴费列表，进行缴费操作一台手机，接接WiFi，下载华信的新生1.进入新生系统公众号，进入缴费列表界面2.通过支付系统，支付对应的账单成功后，提示缴费成功，可以已缴账单中查询得到发送失败，对方没收到网络故障，数据不能提交，提示用户发送失败。重启新生3.7.2管理员用户用例图3-5 后台用户用例 （1） 消息模块统计分析表3-4 财务模块缴费详情财务模块管理员用户以管理员用户的身份对学生的缴费详情进行操作服务器已经开启，身份已经登录，有对应的角色权限1.登录，进入

17、到后台管理界面2.在财务模块中，查看学生的缴费详情有更新数据，说明学生已经在缴费了1. 没有权限角色的会提示没有权限访问网页2.数据库中没有对应的消息数据更新mysql数据库中的数据（2） 学生信息模块信息管理表3-5 学生信息模块信息管理学生信息模块后台用户以后台用户的身份对新生用户信息操作1.添加用户信息，点击提交，更新数据库。2.刷新用户列表，查询数据库的用户信息，把得到的数据列出。3.表格中的header可以按照条件查询。4.点击选取一行数据，然后点击修改按钮修改对应的用户信息。5点击选取一行数据，然后点击删除按钮可以删除对应的用户信息。查询mysql数据库中的数据（3）攻略管理模块配

18、置前端攻略表3-6 攻略管理模块配置前端攻略攻略管理模块以后台用户的身份对配置前端攻略1.配置H5端的轮播图，点击轮播的URL。2.在前端的主页更新轮播图配置。（4）宿舍模块宿舍管理表3-7 宿舍模块宿舍管理宿舍管理以管理员用户的身份对宿舍信息操作1.导入宿舍信息，点击提交，更新数据库2.刷新宿舍列表，查询数据库的宿舍信息，把得到的数据列出3.表格中的header可以按照条件查询4.选取一行数据，点击修改按钮修改对应的宿舍信息5选取一行数据，点击禁用/启用单选按钮，设置宿舍状态3.7.3超级管理员用例图3-6 超级管理员用例（1） 菜单模块信息管理表3-8 菜单模块信息管理菜单信息管理超级管理员以超级管理员的身份对菜单信息操作1.添加菜单信息，点击提交，更新数据库。2.刷新用户列表，查询数据库的菜单信息，把得到的数据树表列出4.点击选取一行数据，然后点击修改按钮修改对应Id的菜单信息。5点击选取一行数据，然后点击删除按钮删除对应Id的菜单信息。（2） 角色模块信息管理表3-9 角色模块信息管理角色信息管理