新生入学管理系统的设计与实现.docx

新生入学管理系统的设计与实现.docx

《新生入学管理系统的设计与实现.docx》由会员分享，可在线阅读，更多相关《新生入学管理系统的设计与实现.docx（46页珍藏版）》请在冰豆网上搜索。

新生入学管理系统的设计与实现

新生入学管理系统的设计与实现

摘要

当今社会，随着互联网的高速发展和计算机技术以及通信技术在一些管理方面一步步深入并且越来越多人去使用它，一些管理系统在功能等方面已经越来越成熟了。

它是一个一直在发展中的比较先进的学科，不管公司想要存在并且可以不断发展下去，都需要管理好公司内部的组织结构，这样就必须要有一个较为适合该公司的管理系统。

以前人们都使用记录的一些传统方式去管理文件档案，统计和搜索数据，这种传统方式还是会有很多的缺点，比如：

速度慢、隐私性较差，会浪费很多物力；而且如果运行时间比较长的话，就会导致有很多的数据文件，这样去搜素需要的数据的话会很繁琐，如果需要更新相关数据的话就会更加麻烦甚至不可能。

新生入学管理系统让学校管理相关信息的人员提高工作效率，使用这个管理系统能够让学校学生的信息有序的管理，能够比较方便，有规律的去记录这些数据，更容易查找，所以在这方面会让工作人员减少很多工作压力。

新生入学管理系统采用了vant、Koa2框架等技术，设计开发了一个基于新生客户端+浏览器管理端的“新生入学管理系统”。

平台包括新生用户模块、管理员模块、Chat模块、广告模块、菜单模块、角色模块等六个模块。

平台可满足学校对于新生信息管理的基本要求。

关键词:

Koa2；Nodejs，iview；vant

DesignandImplementationoftheFreshmanManagementSystem

Abstract

Nowadays,withtherapiddevelopmentoftheinternetworkandcomputertechnologyandcommunicationtechnologyinsomemanagementaspectsmoreandmorein-depthandmoreandmorepeopletouseit,somemanagementsystemsinthefunctionandotheraspectshavebecomemoreandmoremature.Itisarelativelyadvancedsubjectthathasbeendevelopingallthetime.Nomatterthecompanywantstoexistandcancontinuetodevelop,itneedstomanagetheinternalorganizationalstructureofthecompanywell,soitmusthaveamanagementsystemthatismoresuitableforthecompany.

Inthepast,peopleusedsometraditionalwaysofrecordstomanagefiles,statisticsandsearchdata.Thistraditionalwaystillhasmanydisadvantages,suchasslowspeed,poorprivacyandwasteofresources.Moreover,iftherunningtimeisrelativelylong,therewillbealotofdatafiles,soitwillbetedioustosearchtherequireddata,anditwillbemoretroublesomeorevenimpossibletoupdatetherelevantdata.

Theentrancemanagementsystemfornewstudentsimprovestheworkefficiencyofthestaffofschoolmanagement.Theuseofthismanagementsystemenablestheorderlymanagementofschoolstudents'informationandmakesitmoreconvenienttorecordthesedataregularlyandeasiertofind.Therefore,inthisrespect,thestaffwillreducealotofworkpressure.Thefreshmanadmissionmanagementsystemadoptsvant,Koa2frameworkandothertechnologiestodesignanddevelopa"freshmanadmissionmanagementsystem"basedonthefreshmanclient+browsermanagementterminal.Theplatformincludesnewusermodule,administratormodule,Chatmodule,advertisementmodule,menumodule,rolemoduleandothersixmodules.Theplatformcanmeetthebasicrequirementsoftheschoolforinformationmanagementoffreshmen.

KEYWORDS：

Koa2；Nodejs，iview；vant

前言

研究背景和意义

本文主要探讨新生入学管理系统在这个时代中的重要地位。

当今社会，随着互联网的高速发展和计算机技术以及通信技术在一些管理方面一步步深入并且越来越多人去使用它，一些管理系统在功能等方面已经越来越成熟了。

它是一个一直在发展中的比较先进的学科，不管公司想要存在并且可以不断发展下去，都需要管理好公司内部的组织结构，这样就必须要有一个较为适合该公司的管理系统。

所以管理系统成为新一代移动互联网的一种“新的管理方式”，在接触新东西的时候，往往意识到这个东西原来还可以这么新颖。

但是新生入学管理系统这种新一代的学生信息管理工具，受用与大众，也得利与大众。

现在很多人移动端使用最频繁的是微信，新生入学管理系统做依附于微信公众号的相关功能无疑是方便了用户的一系列操作，提高了用户的体验感，可以通过公众号及时了解学校的通知，可以方便新生直接查看学校的各种跟新生相关的信息，公众号能提供满足其生活，学习，服务等的全面信息化服务。

如新生报到攻略，有关学校的有趣话题，吃饭，交通，校园信息认证卡等信息都可以直接在公众号获取。

所以使用依附公众号相关技术开发移动端的新生入学管理系统是相当好的选择。

研究方法与要达到的要求

使用nodejs+koa2框架开发一个新生应用，通过文档使用所提供的方法和原生封装的组件。

虽然和原生开发比起来是差点，但是绝对满足大部分的业务需求。

而且vue+vant可以整合js+css+html等相对应的框架，使界面看起来更优美更整洁，有很好的界面感和体验感。

而且利用了nodejs的非阻塞I/O和轻量的特点，大大提高了系统的性能。

市面上也好多管理系统中间件也是用到了nodejs,例如极光和thisIM等中间件。

该管理系统通过分析基本的功能和操作，能够在微信公众号主流移动应用平台有较好的体验性。

体验的时候，也有较好的整洁感，界面与界面之间过渡自然。

以此证明vue+vant技术开发新生入学管理系统，能够为学生的入学时便利性带来较好体验。

1相关技术介绍

1.1Vue的介绍

Vue.js是现在来说使用率最高的一个前端开发使用的框架，它是三大主流前端开发框架其中的一个。

客户端界面可以用这套Vue.js框架来构建成（因为这是一整套完整的方案，所以会对所使用它的项目有很大的侵入性，若项目需要换其他框架，那么就需要最新构建项目了），它对于新手特别的的友好，很容易上手，因为这个框架有固定搭配的第三方库。

使用这套框架可以提高项目开发的速度，而且还可以去除很多不必要的dom操作；双向数据绑定，通过Vue.js提供的指令，对于前端而言关心业务上的逻辑，不再关心dom如何渲染。

它以前端MVVM模式为主，前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VMViewModel）。

VM是其中核心，M和V间的调度者。

M，保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。

V，每个页面的html结构。

VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。

V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。

前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）。

图1-1前端MVVM模式

图1-2MVVM调用流程

图1-2所展现是MVVM调用流程图：

（1）系统实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要绑定好更新函数；

（2）接着实现Observe,监听所有的数据，并对变化数据发布通知；

（3）接着实现watcher,作为一个中枢，接收到observe发来的通知，并执行compile中相应的更新方法。

（4）结合上述方法，向外暴露mvvm方法。

1.2Koa相关特性介绍

Koa作为nodejs最新的web框架，开发他的则是express的作者。

目标是使它在web程序和restfulAPI上，更显得更小、更强。

使用async和await的函数，Koa帮开发人员解决回调地狱，还增强原有nodejs框架错误处理。

为让Koa显得更小，Koa没有捆绑任何中间件。

而是需要什么就提供什么的方式，帮开发人员快速而优雅地开发服务端的程序。

图1-3Koa执行的流程图

1.洋葱模型：

koa被业界公认是nodejs第二代web框架，是因为独有的中间件流程控制。

Koa内部方法流程是一个洋葱模型。

而且koa和koa2中间件的实现思路都是差不多没变化，但是实现方式有所区别，koa2在node7.6之后更是可以直接用async/await来替代generator使用中间件。

图1-4Koa请求-响应洋葱模型原理图

图1-4展示是Koa请求-响应洋葱模型原理图:

koa调用中间件的过程中，如果遇到awaitnext（）的时候将暂停接下来处理，而着手进行处理下一个中间件。

当多个中间件需要调用的时候,use将他们放进数组队列再一种压栈的形式从top开始执行，当中间件遇到awaitnext的方法后将进入数组队列中的相邻的下一个中间件，当最中间的中间件调用完毕后就开始回帧，再来执行之前未执行完的中间件的代码部分，这就是koa以洋葱模型解释的中间件机制。

2.Koa与express对比后的优势

（1）对于在实现方式不一样的地方就是Koa它是使用ctx调用相关中间件的参数的，而express则是分别用req，res这两种来调用的。

请求和响应都是在一个方法中能省去不必要资源浪费。

（2）在各自中间件连接的方式不同。

express是一环扣一环的串联的设计，实现思路易让人接受。

而koa自定义某一中间件的执行顺序的，较express的灵活扩展性比较强。

1.3VantUI介绍

VantUI是有赞团队开发的移动端组件库。

作为一种移动端开发UI框架，特性是比较轻量、可靠的。

图1-5Vant的logo

1.3.1VantUI框架分别为:

●60+高质量组件

●90%单元测试覆盖率

●完善的中英文文档和示例

●支持按需引入

●支持主题定制

●支持国际化

●支持TS

●支持SSR

1.3.2Vant的使用

（1）脚手架 

安装VueCli

npminstall-g@vue/cli

（2）创建一个项目

vuecreatehello-world

（3）创建完成后，可以通过命令打开图形化界面，如下图1-6所示

vueui

图1-6Vant

图形化界面

1.3.3引入组件

（1）安装插件

npmibabel-plugin-import-D

{

"plugins":

[

["import",{

"libraryName":

"vant",

"libraryDirectory":

"es",

"style":

true

}]

]

}

（2）在babel.config.js中配置

module.exports={

plugins:

[

['import',{

libraryName:

'vant',

libraryDirectory:

'es',

style:

true

},'vant']

]

};

（3）在代码中直接引入Vant组件

在main.js文件中引入vant组件，

import{Toast,Row}from“vant”;

Vue.use（Toast）;

Vue.use（Row）;

2新生入学管理系统的可行性分析

2.1.可行性分析

可行性分析首要是分析本新生入学管理系统的技术可行性、操作可行性、经济可行性进行分析，在所写解决文案是否可用性和可行性，能否在自身所拥有的资源和规定的时间下完成任务，获得相对应的效果。

2.1.1技术可行性

本平台后端技术采取成熟的nodejs+Koa2框架，拥有较为完整的官方文档与活跃的社区，外面的企业已经有相对成熟开发模式，所以能够应用开发相对应平台功能。

新生前端采用Vue与H5是Web相对成熟的web端应用的框架，由于现在技术更替比较快，但是在官方网站上开始可以查询最新文档，并通过编程验证实现，通过对这技术的掌握，可以实践中开发新的跨平台应用。

2.1.2操作可行性

本应用基于Vue与H5框架开发，Vue框架在移动端有着比较好UI体验，也是现在互联网公司最热门的前端UI框架之一。

通过Vue与H5的结合，能使这个通讯平台有着比较好的流畅性。

为用户体验的优越提供可行性。

2.1.3经济可行性

平台后端技术node+Koa2框架都基于开源框架，能免费使用并获得一定的支持服务。

数据库系统采用性能高、成本低、可靠性好的关系型数据库MySQL。

服务器也是采用阿里云的学生服务器，在经济上付出的费用较低

2.2.可行性分析结论

通过可行性分析，跨平台新闻阅读应用在技术、操作、经济三个方面的可行性都达到要求，具备进行开发的价值，并能在开发完成上线，为用户提供服务。

3新生入学管理系统的需求分析

3.1系统性能需求

表3-1系统性能需求

质量属性

详细要求

正确性

无逻辑错误

稳定性

Web服务持续稳定工作时间≥3天（72小时）

可靠性

有针对异常的处理，防止非法操作

性能，效率

平台进行sql和接口优化，响应时间快

易用性

界面较为简洁，每一步操作都有相对的提示

清晰性

界面简洁,一目了然

安全性

不透露用户的私密信息，密码采用hash加密

可扩展性

可在当前需求基础之上进行功能上的扩展

跨平台性

可运行在IOS/Android等主流移动端上

3.2平台功能需求分析

3.2.1.登录模块

超级管理员登录管理后台，在后台人员管理模块注册管理员账号，给予一些人管理账号。

后台人员使用账号和密码登录管理平台，浏览信息或者管理新生用户、其他功能模块。

3.2.2.学生用户管理模块

超级管理或者管理用户可以查询每学期新增的用户或者其他用户信息。

对各级新生进行一键导出，或者个别的手动录入。

同时，管理员可以进行修改或者修改密码、还有新建新生用户操作。

3.2.3.后台用户管理模块

超级管理用户可以查询；每个管理员的信息。

对管理员的信息进行审核，起到一个过滤效果。

同时，管理员可以进行修改或者修改密码、还有新建管理员的操作。

3.2.4.宿管模块

超级管理员和后台人员都能查询宿管模块的信息。

能对宿管的信息进行操作，可进行信息编辑。

同时，管理员可以禁止或者启用宿管人员变动、还有添加宿管人员的操作。

3.2.5.宿舍管理模块

界面以列表形式查看每个宿舍入住情况，对新生的入住情况进行统计。

可以通过Excel形式进行一键导入，和对个别学生进行差异化修改。

3.2.6.财务模块

当用户通过新生入学管理系统查看当前待缴详情和已缴详情。

通过线上支付系统和线下财务人员手动缴费系统完成一系列缴费的财务行为。

3.3新生入学管理系统的DFD图

图3-1新生入学管理系统的DFD图

3.4新生入学管理系统的ER图

图3-2新生入学管理系统的ER图

3.5用例的实现与说明

3.5.1.

用例图示

图3-3用户用例图

3.6系统角色设计

3.6.1新生用户

新生用户是这个系统的新生入学所设定的角色，学生用户要在新生系统上注册和登录才能进行相应的缴费和查看信息功能操作。

主要是对自己的学籍和入学流程进行管理。

3.6.2管理用户

管理用户是这个后台系统重要的一个角色，是这个系统主要的基础。

管理员根据超级管理员给予的相对应模块的权限进行管理操作。

分为宿舍管理员、财务人员、系统录入人员，不同管理人员对应不同的职责。

3.6.3超级管理员

超级管理员是新生入学管理系统中最重要的角色，是这个系统使用的核心。

给予角色相应的模块权限，对于有可能加入新功能或者新角色，超级管理员可以添加对应的权限菜单或者用户角色。

3.7用例分析

3.7.1新生用户用例

图3-4新生用户用例

（1）用户登录

表3-2用户登录

用例名称

用户登录

操作者

拥有用户的账号和密码

描述

用户进入公众号点击新生系统按钮,进入登录界面，输入账号和密码

前置条件

一台手机，接接WiFi，关注新生公众号

基本事件流

1.进入新生系统公众号，进入登录界面。

输入账号和密码，点击按钮

2.通过HTTP协议把登陆数据发送本地服务器

成功后，页面上有用户的信息的标识，说明已经登录成功

其他事件流

输入格式不正确或者账号不存在或者密码错误

异常事件流

网络故障，连接服务器失败，数据不能提交，提示用户登录失败。

后置条件

退出登录

（2）新生用户缴费

表3-3新生用户缴费

用例名称

新生用户缴费

操作者

拥有新生用户的账号和密码

描述

用户点击新生系统按钮,进入缴费列表，进行缴费操作

前置条件

一台手机，接接WiFi，下载华信的新生

基本事件流

1.进入新生系统公众号，进入缴费列表界面

2.通过支付系统，支付对应的账单

成功后，提示缴费成功，可以已缴账单中查询得到

其他事件流

发送失败，对方没收到

异常事件流

网络故障，数据不能提交，提示用户发送失败。

后置条件

重启新生

3.7.2管理员用户用例

图3-5后台用户用例

（1）消息模块——统计分析

表3-4财务模块——缴费详情

用例名称

财务模块

操作者

管理员用户

描述

以管理员用户的身份对学生的缴费详情进行操作

前置条件

服务器已经开启，身份已经登录，有对应的角色权限

基本事件流

1.登录，进入到后台管理界面

2.在财务模块中，查看学生的缴费详情

有更新数据，说明学生已经在缴费了

其他事件流

1.没有权限角色的会提示没有权限访问网页

2.数据库中没有对应的消息数据

异常事件流

网络故障，连接服务器失败，数据不能提交，提示用户登录失败。

后置条件

更新mysql数据库中的数据

（2）学生信息模块——信息管理

表3-5学生信息模块——信息管理

用例名称

学生信息模块

操作者

后台用户

描述

以后台用户的身份对新生用户信息操作

前置条件

服务器已经开启，身份已经登录，有对应的角色权限

基本事件流

1.添加用户信息，点击提交，更新数据库。

2.刷新用户列表，查询数据库的用户信息，把得到的数据列出。

3.表格中的header可以按照条件查询。

4.点击选取一行数据，然后点击修改按钮修改对应的用户信息。

5点击选取一行数据，然后点击删除按钮可以删除对应的用户信息。

其他事件流

1.没有权限角色的会提示没有权限访问网页

2.数据库中没有对应的消息数据

异常事件流

网络故障，连接服务器失败，数据不能提交，提示用户登录失败。

后置条件

查询mysql数据库中的数据

（3）攻略管理模块——配置前端攻略

表3-6攻略管理模块——配置前端攻略

用例名称

攻略管理模块

操作者

管理员用户

描述

以后台用户的身份对配置前端攻略

前置条件

服务器已经开启，身份已经登录，有对应的角色权限

基本事件流

1.配置H5端的轮播图，点击轮播的URL。

2.在前端的主页更新轮播图配置。

其他事件流

1.没有权限角色的会提示没有权限访问网页

2.数据库中没有对应的消息数据

异常事件流

网络故障，连接服务器失败，数据不能提交，提示用户登录失败。

后置条件

更新mysql数据库中的数据

（4）宿舍模块——宿舍管理

表3-7宿舍模块——宿舍管理

用例名称

宿舍管理

操作者

管理员用户

描述

以管理员用户的身份对宿舍信息操作

前置条件

服务器已经开启，身份已经登录，有对应的角色权限

基本事件流

1.导入宿舍信息，点击提交，更新数据库

2.刷新宿舍列表，查询数据库的宿舍信息，把得到的数据列出

3.表格中的header可以按照条件查询

4.选取一行数据，点击修改按钮修改对应的宿舍信息

5选取一行数据，点击禁用/启用单选按钮，设置宿舍状态

其他事件流

1.没有权限角色的会提示没有权限访问网页

2.数据库中没有对应的消息数据

异常事件流

网络故障，连接服务器失败，数据不能提交，提示用户登录失败。

后置条件

更新mysql数据库中的数据

3.7.3超级管理员用例

图3-6超级管理员用例

（1）菜单模块——信息管理

表3-8菜单模块——信息管理

用例名称

菜单信息管理

操作者

超级管理员

描述

以超级管理员的身份对菜单信息操作

前置条件

服务器已经开启，身份已经登录，有对应的角色权限

基本事件流

1.添加菜单信息，点击提交，更新数据库。

2.刷新用户列表，查询数据库的菜单信息，把得到的数据树表列出

3.表格中的header可以按照条件查询。

4.点击选取一行数据，然后点击修改按钮修改对应Id的菜单信息。

5点击选取一行数据，然后点击删除按钮删除对应Id的菜单信息。

其他事件流

1.没有权限角色的会提示没有权限访问网页

2.数据库中没有对应的消息数据

异常事件流

网络故障，连接服务器失败，数据不能提交，提示用户登录失败。

后置条件

更新mysql数据库中的数据

（2）角色模块——信息管理

表3-9角色模块——信息管理

用例名称

角色信息管理