基于Vue框架开发的学生管理系统

李 云

（长治职业技术学院，山西 长治 046000）

由于JavaScript的应用，网页设计变得更加动态以及功能越来越强大。我们把很多传统的服务端代码放到了浏览器中，这样就产生成千上万连接html和css文件的JavaScript代码，这些代码缺乏组织性与条理性。因此，越来越多的网页开发者开始使用JavaScript框架，例如，ANGULAR、REACT以及Vue。Vue是一款友好的、多性能、多用途、轻量级的JavaScript框架，它能够帮设计者创建维护性更强、测试性更高的代码库；Vue也是渐进式的JavaScript框架[1]，即，如果设计者已经有了一个线程的服务端应用，可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。Vue还有一个重要的特点是实现了前后端的分离，前端负责页面的渲染和部分页面交互的逻辑，然后通过网络请求与后端进行数据的交互；后端则着重关注业务逻辑的处理，直接操控数据库。前后端分离后，前后端开发模式由串行变为并行，使开发效率显著提高[2]。这样如果有一天要更新网页部分，后台连接数据库的地方是可以不用变动的，前后端都是独立且又有关联的。同时，如果网站遭受到黑客攻击，黑客也只能访问到前端的Web服务器，访问不到后端的应用服务器，大大提高了安全性。

现如今，手机App极大方便了人们的生活，人们可以随时随地利用手机进行娱乐、办公、通信和学习。但在很多高职院校中，仍然采取传统的教学管理模式，很多教学教务方面的工作还是采用纸质办公、计算机处理模式，教学资料、学生资料乃至会议内容、通知等，还是打印出来，分发到各个部门。这些资料在印刷、转送、通知等过程中浪费了大量的人力、物力和时间，各部门的信息也得不到有效沟通，给工作带来了很大不便，相关工作人员的工作受到很大限制。随着网络的发展，普通的教学管理方式正面临着变革[3]，借助计算机、手机、互联网等无纸化办公方式，很容易实现信息共享和协同办公，可以减轻教师和行政人员的工作负担，让老师们从烦琐、重复的低级劳动中解放出来，腾出精力和时间去做更有意义、更有价值的工作与研究，并且节约了学校资金和社会能源，可以说是一举多得。基于以上背景，笔者试着利用HTML5中网页自适应于各种终端屏幕的功能、Vue的渐进式的JavaScript框架以及可打包性，采用前后端分离的部署方式，做一个学生信息管理系统的App。

1 需求分析

为了满足需求，此App应具备登录功能和对数据的基本操作功能，还应为将来其他功能的扩展和添加留出空间。

登录功能：为了确保信息安全，每次退出App后都需要重新输入登录名和密码才可以重新进入系统，每隔30分钟没有进行任何数据操作，则自动退出App。

数据的基本操作功能：管理员可根据实际情况对学生的数据进行查询、修改、删除和插入新记录等操作。

2 系统设计

首先，根据学生的信息特点，创建MySql数据库：学生管理（xsgl）。在这里使用MySql数据库的原因，是因为它是具有轻量级、开源的、可跨平台的数据库，数据处理速度快，可靠性强，很少出现宕机，安装也Element UI和Vant UI，这两个是开源的移动前端组件库，它们包含几十个高质量组件，覆盖几乎所有移动端各类场景，能够帮助我们做出更具移动端特性的页面。随后创建Vue的单文件组件，它包含了各自的html、JavaScript、css内容。设计出登录页面（如图1所示），并在Google浏览器中用开发者工具打开，以便查看效果和调试代码。

图1 登录页面

为了防止过度调用监控事件而产生卡顿，需要通过定义属性，进行双向绑定改变body的高度，watch()方法在监测窗口大小变化时触发，通过改变属性值达到预期效果，主要代码如下：很方便等优点。在数据库中创建用户表、学生表、班级表和专业表等数据表，用户表中数据为登录做准备，学生表和班级表中的数据会基于“班级代码”做一个关联，便于此后扩展出专业信息、教师信息、住宿信息等，可以将这个App的功能扩展得更加完善和强大。

其次，利用IDEA工具创建Web项目，项目中内置tomcat服务器，此服务器是一个开源的Web服务器，具有处理HTML页面的功能，另外，它还是Servlet和JSP的容器，独立的Servlet容器是tomcat的默认模式，使用方便。此项目中需要完成的任务有：连接数据库，对数据库中的数据进行查询、删除、增加、修改编写相关的Servlet文件。

最后，创建Vue项目。创建初期，需注意同时加载

该页面要完成登录功能，给“登录”按钮设定动作，将获取到的两个文本框中的内容，利用ajax传值，在Web项目中查找是否在数据库的用户表中存在相同的记录，用来测试用户名和密码是否正确，正确则登录成功，否则登录失败，SQL语句为

其中，usertable为用户表，username为登录的用户名，password为登录的密码，将用登录时填写的用户名和密码，与用户表中已有的信息进行比对，判断是否有一条完全相同的记录。

登录成功后，将进入“学生管理”页面（如图2所示），由于是在手机上显示，所以只能看到学生信息中的“学号”“姓名”“性别”这三项基本内容，为了能看到学生的所有信息，设置了每一项前面的下拉箭头，可以展开学生信息的所有内容（如图3所示），再次单击前端箭头符号，信息将会收起来。这些功能就是利用Element-UI和Vant UI中的组件实现的，这些功能的添加，更加符合手机用户的操作习惯。

图2 学生管理页面

图3 展开后的信息

在页面中，要想查找学生信息，可以在搜索框中输入关键字，这个关键字可以是任何的学生信息中的内容。首先要给搜索框添加@click="load"属性，搜索时会自动调用load()方法，方法如下：

浏览器发送一个HTTP请求，HTTP请求由Web容器分配给特定的Servlet进行处理，Servlet的本质是一个Java对象，这个对象拥有一系列的方法来处理HTTP请求，进行页面导航和业务层逻辑的处理。采用这种方式前提是要能区分请求的方式，并把请求的参数进行封装。一个请求对应一个Servlet，需要在Web项目中分别书写出来。

上述代码发送的请求页面中“QueryServlet”就是Web项目中进行查询的Servlet。在这里，参数被封装为json格式，并连带type: "xsb.query"（这对应的是一条SQL语句）一起发送到“QueryServlet”，再由这个对象将参数获得并调用真正参与查询的类，进而从数据库中查询到所需要的结果。QueryServlet中调用查询类的代码如下：

例如，要查询学生信息，可以在搜索框中输入任何想查询的结果，就能显示出想要的结果，如搜索出所有的男生，在搜索框中输入“男”，就会出现所有性别为“男”的学生（如图4所示）。要想实现这个功能，SQL语句是重点：

图4 按性别搜索

这段SQL语句完成任务：将xsb重命名为x，小括号中进行子查询，查询xsb中所有字段，并用concat函数将每行的每一个字段连接起来，并用空格隔开，这是为了保持字段的的独立性，每一个字段不要和其他字段有勾连，为进行模糊查询做准备，将这样的字段组合后重新定义为一个新的字段“cha”，将学生表中每一项和这个“cha”组成一个新的表，起名叫“tab”，并对它进行模糊查询，最后小括号中的“?”代表在搜索框中输入的关键字。

依次添加删除、修改、增加功能，这样学生信息管理系统就趋于完善。如果再将院校机构设置、新闻浏览、招生就业、学生成绩查询、课表查询等功能页面添加进去，就会成为一个展示学校信息的集浏览和查询功能相结合的专属的网站。

3 打包

所有的功能和页面都完成后，开始进行打包和生成App。

首先，在运行窗口用代码进行打包，打包的源文件是Vue项目中的dist文件夹，打包代码如下：

其次，在打包后，需要用HBuilder软件生成App。HBuilder是现在常用的打包工具，打包过程相当于给制作出的网页套一个手机App的外壳，关键是，这款软件还是我们国人自己研发出来的。在设置基本信息时，应用名称就是你希望生成的App的名称，在这里设置为学生管理，其中的Appid需从云端自动获取。配置图标也就是生成的App的图标样式，尽量选择有一定含义的图片，笔者在这里将自己学校的校徽作为App的运行图标。设置完成后，执行“发行”—“发行为原生安装包”，并选择生成的apk种类为“Android”。

打包完成后，将生成的apk文件保存并运行安装在安卓手机中，这个App就制作完成了，可以正式使用了（如图5所示）。

图5 运行为手机App

4 结束语

前后端分离是现阶段设计网页的主流技巧。一是职责划分需要，页面开发和业务逻辑开发并行可缩短开发周期；二是术业有专攻，随着页面的交互、UI要求不断提升，前端设计人员在页面方面的开发更具有专业性；三是前端具有强大的生态系统，有许多现成的组件和框架可以进行大项目的模块化开发，真正意义上实现交互和逻辑、逻辑和物理上的完全分离。

前后端分离的优点是：对于中大型项目，能够提升开发效率，提高交互和UI效果，缩短开发周期；前端能够处理一大部分验证和交互逻辑，从而减少与服务器间的交互次数，减小服务器处理压力，并且页面是由浏览器渲染生成；前端具有强大的组件库和处理工具，项目更容易跨平台；可以降低维护成本；接口和前端组件能够重复使用。缺点是：需要更多的沟通成本；未进行前后端分离时，由后端开发人员完成整个项目的开发；前后端分离后需要和前端设计者就接口进行沟通和联调；对于小、交互性要求不高的项目，进行前后端分离反而效率较低；部署流程更复杂。前后端分离一般是两个项目环境，需要投入更多硬件和运营维护。

利用Vue框架开发的App具有轻巧、灵活等特点，它不仅易于上手，而且还便于与第三方库或已完成的项目进行整合。当前阶段，在移动终端的使用越来越广泛，我国的网络技术越来越成熟，用户的各类需求种类越来越多的背景下，利用Vue开发手机App将成为一种趋势，可以预测的是，这种前端技术很有可能遍布从Web到桌面应用，从计算机、移动端到智能电视、游戏机等各个角落。同时，开发一个功能齐全、使用简单的学生管理系统App，具有积极的社会意义。设计并制作一个完整的校园网站可以满足教师和学生的双重访问需求，还会给学校带来一定的广告效应，再将这个网站打包成App，这个系统将会扩展到学校的方方面面，相信一定会提高学校管理者的工作效率和工作的灵活性。