Vue.js与Lumen组合框架的大创项目管理系统架构方案

关键词：大创项目；架构方案；系统开发；Vue.js；Lumen

自 2012 年开展大学生创新创业训练计划（以下简称“大创”）项目工作以来，全国各本科高校积极实施，有的高校还建设有相关的管理系统。通过调查了解，这些系统基本上都只要求能够实现相应的功能需求，以及能否完成大创项目从申报到结项的整个流程，从而达到减轻相关人员线下操作时复杂繁琐工作量的目的，而对系统的运行效率、安全系数、用户体验以及后期维护难度并不加以更多的关注[1]。针对以上发现的这些问题，我们对当下主流且成熟的 Web 技术进行一番较深入的研究、分析和学习，试图探索出一套更加优化的基于 B/S 模式的系统开发架构方案，并且在我们将要开发的这套大创项目管理系统中对这套架构方案进行实际应用与评测。

该系统平台主要分成两大部分，分别为前台和后台。前台对所有人开放大创项目的有关资讯和通告，并且提供用户注册、登录、查看和修改个人信息等基本功能。注册的用户主要有学生和老师这两种身份，学生可以在大创申报期间内进行组队、项目申报等，以及在其后阶段中提交相关资料或申请项目变更等；老师则可以查看自己指导过的所有项目，并对它们进行相应的管理。后台则主要对管理员和专家评委开放，管理员又分为二级学院管理员和教务处总管理员，所有的二级管理员和评委均由总管理员对前台中老师这一身份的权限分配。管理员可以查看和管理自己管辖范围内的用户、项目、变更请求等；专家评委可以对项目进行评审和查验。每一位管理员和评委的操作记录均会被记录在操作日志中。

由于大创项目从申报、中期检查到结项评审等流程中，其所填写的表单数据较多，需要提交的附件和媒体资料等也较多，用户上传和下载资源的频率较高，并且这其中也包含很多敏感信息。对于这样一个信息量庞大的系统，要求其 UI界面应该更加简洁、直观和方便操作，强调用户体验至上；其次，要求本系统具有更高速更稳定的数据交互能力和系统运行效率，也要有更加安全的数据传输和存储方式，同时也要求尽量降低后期的维护成本。

目前已有的大创项目管理系统以及类似平台大多采用ASP.NET 框架，或者是国内比较流行的 ThinkPHP 框架。虽然这些系统的开发大多采用 MVC 这样的架构[2]，但其实质上并不是彻底的前后端分离，这使得每一个开发人员和维护人员都需要掌握相关方面的全栈技术。同时，由于这些框架需要先在服务器端进行视图渲染后才响应给浏览器，其运行效率必然大打折扣。

针对以上的需求分析，以及对其他类似系统的架构分析，我们探索出了一套较为完美的大创项目管理系统的开发架构方案。其核心内容是结合了 Vue.js 前端框架和 Lumen 后端框架的前后端分离的组合架构，并应用了 JSON 格式对前后端交互的数据进行封装，应用 RestFul 风格约定 API 路由，应用Rbac 权限管理机制保障授权安全。该架构的模型如图 1 所示。

Vue.js 是一套用于构建用户界面的，可以自底向上逐层应用的渐进式前端框架[3]。它相比于其他主流的 JavaScript框架例如 AngularJS 或 React 都具有运行效率高、语法简洁、自身占用空间小、上手容易等特点。它的核心只关注视图层，是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM 的系统，并且所有的这些都是响应式的[3]。

Lumen 是目前全球最流行的后端框架 Laravel[4]的一个微框架，它具有富于表达性且简洁优雅的语法，是目前最快的 PHP 框架，其用户使用体验极佳。Lumen 对资源的要求很少，可承载并发压力大，专为微服务或者 API 设计，此类型的应用通常情况下不需要具备全栈框架的所有功能。Lumen  独特的初始化机制，使其在功能强大的同时，具备了高性能，是构建微服务架构应用的绝佳方案。

另外，该架构中，采用 JSON 格式封装[5]进行数据传输，避免了直接在后端生成页面视图响应给浏览器，其数据传输效率也将大大提高；采用 RestFul 路由风格，也能够使前后端数据交互变得更加简洁、更有层次[4]。

Vue.js 与 Lumen 相结合的前后端分离的开发架构，对于我们这样的一个大创项目管理系统而言，可堪称为是一个非常完美的架构方案了。

为了测试该架构方案在实际项目中的运行性能，我们分别对本系统和以大连民族大学大学生创新创业训练项目智能管理系统和西南民族大学大学生创新创业活动项目管理系统为代表的其他多个大创项目管理系统进行了多线路的 ping 测试，其测试结果如图 2 所示。

通过对多线路 ping 测试的结果可