手记

基于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
  1. 后端项目
└─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
  1. 后端项目
    先启动数据库mongodb, 再启动项目
# install dependencies
npm install

# serve
node app.js

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

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

0人推荐
随时随地看视频
慕课网APP