基于Vue和nodejs的自定义表单系统，项目地址传送https://github.com/kkxiaojun/VueForm简介本系统决定采用vue作为web端的整体框架，nodejs是服务器端语言，MongoDb是首选的数据存储解决方案。本系统包括自定义表单系统的现状、系统需求、系统设计和开发过程。系统的主要模块有：登录模块、注册模块、首页模块、表单预览模块和表单设计模块。整个项目的最终实现是自定义表单系统。用户可以用鼠标拖放自己的表单，填写并发布表单。系统结构技术选择本系统是一个运行在浏览器中的Web系统。在研究和分析浏览器拖放技术后，总结出两种用JavaScript实现拖放技术的思路：利用JavaScript鼠标事件，模拟按下松开的操作，实现对窗体的拖放操作。具体实现过程如下：(1)鼠标按下并移动，形成拖动效果。相关的JavaScript事件有onmousedown、onmousemove等。(2)当鼠标移开时，没有拖动效果。相关的JavaScript事件有onmouseout、onmouseleave。(3)拖动后，到达目标，松开鼠标，实现拖放操作。相关的JavaScript事件有onmouseup、onmousemove等。HTML5提供了专门的拖拽API，使用原生HTML可以实现拖拽效果。具体实现过程如下：(1)设置元素可拖拽，设置draggable属性为true。(2)拖动元素时执行什么操作。相关事件在ondragstart。(3)放置被拖元素的位置。相关事件在ondragstart。经过JavaScript拖放技术的实践和分析，可以知道这两种方式都可以实现系统的功能。下面进一步分析它们的优缺点：使用JavaScript鼠标事件来实现。优点：可以实现相应的功能，对IE8浏览器有很好的兼容性。缺点：实现复杂，代码量大。使用HTML5提供专用的拖放API实现。优点：实现简单，代码量小。缺点：不兼容IE8及以下浏览器。通过以上分析，考虑到自定义表单系统不需要对IE8及以下浏览器进行兼容开发，决定使用HTML5提供专门的拖拽API来实现系统的拖拽功能.项目目录PS：整个项目是一个前端项目包括前端vue-form和后端vue-node项目├─vue-form│├─build----------------------------------------webpack配置│├─config----------------------------------------项目配置│├─src----------------------------------------代码目录││├─api------------------------------------------接口文件││├─common--------------------------------------公共文件夹│││├─images│││├─js│││└─less││├─components--------------------------------组件│││├─表格│││├─帮助│││├─登录│││├─m-footer││├─m-header│││├─person│││└─signup││└─router-------------------------------------------路由│└─静态后端项目└─vue-node├─config------------------------------------------配置文件├─models----------------------------------------数据模型文件└─路由器----------------------------------------api接口路由文件├─app.js--------------------------------------------入口├─package.json--------------------------------------依赖技术栈前端vue+vue-router+axios+vuedraggable+element-ui后端node+express+mongodb+mongoose功能列表登录、注册模块、表单模块、表单模板模块、个人信息模块、管理员模块、功能结构图直接上传(img-ndMPhWAR-1574492320665)(./img/demo.png)]界面预览项目启动前端项目#安装依赖npminstall#在localhost:8080热重载服务npmrundev#buildforproductionwithminificationnpmrunbuild#buildforproduction并查看bundleanalyzerreportnpmrunbuild--report#rununittestsnpmrununit#runalltestsnpmtest后端项目先启动数据库mongodb，然后启动项目#installdependenciesnpminstall#servenodeapp.js是一个基于Vue和nodejs的自定义表单系统，项目地址发到https://github。com/kkxiaojun/VueFormcsdn地址
