摘 要：针对高校大学生创新创业训练计划项目管理系统的需求，研究了 Vue.js 前端框架、Lumen 后端框架以及前后端分离架构，结合当下主流 Web 技术，探索并设计出一套适用于大创项目管理系统的，并且应用Vue.js 与 Lumen 框架的前后端分离的具有高效率、高安全系数和低维护成本的系统架构方案。最后将该架构方案应用于实际项目中，通过实际测试验证该架构方案的应用价值。

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

1 引言

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

2 大创项目管理系统需求分析

2.1 系统功能需求

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

2.2 系统开发需求

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

3 系统架构方案

3.1 其他大创系统的架构所存在的不足

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

3.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 相结合的前后端分离的开发架构，对于我们这样的一个大创项目管理系统而言，可堪称为是一个非常完美的架构方案了。

4 在实际应用中的性能与安全测试

4.1 系统运行性能测试

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

通过对多线路 ping 测试的结果可以发现，本系统在任意一类线路的平均响应时间都比其他的大创项目管理系统要快得多。虽然服务器主机配置和带宽也有对本测试结果有所影响，但都同为校园网，其差距不大，实际上我们的配置甚至更低。

4.2 系统安全测试

为了检测该架构方案在实际项目中的安全系数，我们对本系统进行了 XSS 跨站脚本攻击、SQL 注入攻击、登录认证测试、会话管理测试和文件上传测试等，其测试结果如表 1所示。

5 该架构方案的特点

通过开发体验和实际应用情况，可明显感受到 Vue.js+Lumen 前后端分离架构方案的优势所在。从开发体验来看，只需要先设计好 UI 界面图和编写好前后端数据交互的 API 文档，然后前后端开发人员可同时开工，互不干扰，也不需要花时间去掌握全栈技术或对方的技术，这不仅仅大大提高了开发效率，也能够使开发人员有一个更好的开发心情；从开发出来的系统来看，由于 Vue.js 和 Lumen 都具有较高的运行效率和安全系数，这必然能够使开发出来的系统也具有较高的运行效率和安全系数；另一方面，前后端分离的开发方式，以及 Vue.js 和 Lumen 本身代码的优雅性，这使得系统后期的维护工作变得更加轻松。

6 结束语

本文是根据我们团队自身的工作经验，及对当下前沿Web 技术的理解，以大创项目用户平台和管理系统为例，简要介绍了 Vue.js 和 Lumen 相结合的前后端分离的 Web 系统开发架构方案。但由于我们所学技术有限，很多更深层次的问题很难做出更加全面的分析，在实际应用中所出现的问题也很难做出更加细致的考虑，对于这些情况，我们将会继续进行深入的研究和探索。

探索这一套架构方案以及开发这样的一个网站系统，不仅仅是为了解决本校对大创项目管理系统的实际需求，同时也可以将系统推广到全国其他高校使用，或者给其他将要开发这一类系统的人提供一些参考意见。

参考文献

[1]蓝豪生,陈若勤,李小瑞.大创项目管理系统的设计与实现[J].科技创新与应用,2018(18):44-46.

[2]刘文君,潘永惠.MVC模式在B/S架构中的应用[J].电脑知识与技术,2010,6(26):7283-7284.

[3]麦冬,陈涛,梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑(理论版),2017(07):58-59.

[4]陈显军,耿强,纪洲鹏,湛永松.基于Laravel框架的RESTful API构建[J].信息与电脑(理论版),2017(15):42-44.

[5] 徐宝磊,罗江,潘刚.基于JSON的数据交换技术应用研究[J].软件导刊,2017,16(10):173-175.

本文发表在《信息技术与信息化》作者：张惠烽; 简国明; 刘明杰; 陈晓峰; 郭钰霞; 陈秋彤

——————— 推 荐 阅 读 ———————

▶   免费发布项目管理软件企业资讯和实施案例的通知

▶   项目管理软件在PMO的实践应用

▶   浅谈项目管理信息系统在汽车研发中的应用

▶   项目管理信息系统在中医药领域的应用

▶   互联网思维下的IT项目管理系统的设计及其实践

▶   国有商业银行内部审计项目管理信息系统的设计

▶   科技项目管理系统快速开发框架研究

▶   P6项目管理软件在国外工程中的应用

▶   P3项目管理软件在水利水电工程中的应用

▶   总承包项目管理信息化体系建设

本公众号声明：

1、如您转载本公众号原创内容必须注明出处。

2、本公众号转载的内容是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请作者或发布单位与我们联系，我们将及时进行修改或删除处理。

3、本公众号文中部分图片来源于网络，版权归原作者所有，如果侵犯到您的权益，请联系我们删除。

4、本公众号发布的所有内容，并不意味着本公众号赞同其观点或证实其描述。其原创性以及文中陈述文字和内容未经本公众号证实，对本文全部或者部分内容的真实性、完整性、及时性我们不作任何保证或承诺，请浏览者仅作参考，并请自行核实。