基于Vue和nodejs的自定义表单系统

基于Vue和nodejs的自定义表单系统, 项目地址传送https://github.com/kkxiaojun/VueForm

简介

本系统决定采用vue作为web端的整体框架，nodejs为服务端语言，MongoDb作为首选数据存储方案。本系统包括自定义表单系统现状、系统需求、系统设计及开发流程。系统主要的模块有：登录模块、注册模块、首页模块、表单预览模块和表单设计模块。

整个项目最终实现的是一个自定义表单系统，用户可以用鼠标拖拽生成自己的表单，并填写和发布表单。

系统结构

技术选择

本系统是运行在浏览器中的Web系统，经过对浏览器拖拽技术的研究与分析，总结出用JavaScrip实现拖拽技术的两种思路：

1. 运用JavaScript的鼠标事件，模拟按下与放开的操作，实现对表单的拖拽操作，具体实现过程如下：
   （1） 鼠标按下、鼠标移动，形成拖拽效果，相关的JavaScript事件有onmousedown、onmousemove等。
   （2） 鼠标移开，无拖拽效果。 相关的JavaScript事件有onmouseout、onmouseleave。
   （3） 拖拽后，到达目标，鼠标放开，实现拖放操作。相关的JavaScript事件有onmouseup、onmousemove等。
2. HTML5提供专门的拖拽与拖放的API，利用原生的HTML即可实现拖拽与拖放效果。具体实现过程如下：
   （1）设置元素为可拖放，把 draggable 属性设置为 true。
   （2）当元素拖动时具体执行什么操作。相关的事件有ondragstart。
   （3）拖动的元素放到何处。相关的事件有ondragstart
   经过对JavaScript拖拽技术的实践与分析可知，两种方式都能实现系统的功能。这里再对它们的优缺点进行进一步的分析：
3. 利用JavaScript鼠标事件实现。
   优点：能实现相应的功能，同时对IE8浏览器有很好的兼容性
   缺点：实现复杂，代码量大。
4. 利用HTML5提供专门的拖拽与拖放的API实现。
   优点：实现简单，代码量小。
   缺点：对IE8及以下的浏览器不兼容。
   通过以上分析，考虑到自定义表单系统不需要对IE8及以下浏览器进行兼容性开发，决定采用HTML5提供专门的拖拽与拖放的API实现系统的拖拽功能。

项目目录

PS: 整个project是包含前端vue-form和后端vue-node项目的

1. 前端项目

├─vue-form  
│  ├─build  ------------------------------------------ webpack配置
│  ├─config ------------------------------------------ 项目配置
│  ├─src    ------------------------------------------ 代码目录
│  │  ├─api ------------------------------------------ 接口文件
│  │  ├─common --------------------------------------- 公共文件夹
│  │  │  ├─images
│  │  │  ├─js
│  │  │  └─less
│  │  ├─components ----------------------------------- 组件
│  │  │  ├─form
│  │  │  ├─help
│  │  │  ├─login
│  │  │  ├─m-footer
│  │  │  ├─m-header
│  │  │  ├─person
│  │  │  └─signup
│  │  └─router ------------------------------------------- 路由
│  └─static

2. 后端项目

└─vue-node
    ├─config  ------------------------------------------- 配置文件
    ├─models  ------------------------------------------- 数据model文件
    └─router  ------------------------------------------- api接口路由文件
    ├─app.js  ------------------------------------------- 入口
    ├─package.json -------------------------------------- 依赖

技术栈

1. 前端
   vue + vue-router + axios + vuedraggable + element-ui

2. 后端
   node + express + mongodb + mongoose

功能列表

1. 登录、注册模块
2. 表单模块
3. 表单模板模块
4. 个人信息模块
5. 管理员模块

功能结构图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ndMPhWAR-1574492320665)(./img/demo.png)]

界面预览

项目启动

1. 前端项目

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

2. 后端项目
   先启动数据库mongodb, 再启动项目

# install dependencies
npm install

# serve
node app.js

基于Vue和nodejs的自定义表单系统, 项目地址传送https://github.com/kkxiaojun/VueForm

这是博主的csdn地址传送门csdn