基于Vue.js的表单可视化构建系统的设计与实现

作     者：牛仁腾 

作者单位：华中科技大学 

学位级别：硕士

导师姓名：陆永忠

授予年度：2019年

学科分类：08[工学] 0812[工学-计算机科学与技术（可授工学、理学学位）] 081202[工学-计算机软件与理论] 

主      题：表单 可视化编辑 Vue.js 组件化 

摘      要：随着互联网的急速发展,互联网公司业务与流量不断扩大,业务需求也与日俱增,互联网公司内部的开发人力常常无法追赶并满足这些日益增多的需求,这给业务开发人员带来很大的负担和压力。为了尽可能减少需求的开发成本,提高开发效率,开发人员做出各种尝试。在业务需求中,相对于注重用户体验的c端需求,b端需求多为与数据库进行交互的偏向信息流的中后台管理类需求,通常为列表、表单页面,包含大量重复的表单控件,页面逻辑类似。前端开发人员一般基于代码进行开发,对于同质化较为严重的b端页面,开发过程繁琐而枯燥,如果能够使用以可视化方式编辑页面,进行模板式开发,可以减少大量开发成本。本文基于这个构想,设计并实现了一套基于Vue.js的表单可视化编辑与构建系统。首先按照软件工程方法,对系统进行了需求分析,并使用UML面向对象建模技术,逐步给出系统的用例图,并进行系统的总体设计,将系统分为用户管理、通道管理、组件管理、页面编辑与配置、页面工程管理等五个主要模块,在此基础上进行了系统的详细设计,包括前后端的设计和数据库的设计。系统使用Javascript作为主要语言,选择Visual Studio Code与Windows Subsystem for Linux作为开发环境,通过对各个模块前后端功能解耦,采用了前后端分离的开发方式。系统使用Nuxt.js框架进行前端的开发,使用Koa框架进行服务端的开发,前后端通过API进行通信。系统结构清晰,便于维护。系统提供了组件化和模板化方式对页面进行可视化编辑和构建能力,使得开发人员能够最大程度复用开发资源,大大减少表单和列表类b端页面的开发成本,提高了前端开发人员的开发效率和部门前端工程化程度,满足了互联网公司不断扩张的业务需求。