基于Vue2的数据管理系统-DBM

最近比较闲得空学习了一下vue.js的相关知识,我是坚信要想学得快,就去造轮子,在这里把我最近造的轮子稍微介绍一哈前端

项目地址: calebman/vue-DBM
本项目用到了大量的iview组件,针对iview不能实现的功能(如自定义树)使用了element-ui的相关组件实现vue

概述

轮子的原由是XX机场某部门有一天对我说他们的数据管理模式很落后,所有都是采用每个月提交一次Excel文档来管理数据,也就是说他们会有不少的Excel文档,当他们要查阅一次数据就得不断的找文件,针对这个问题我想能不能经过导入Excel而后在Mysql自建表格导入数据,并提供一些自定义筛选项并加入权限管理来解决这些数据的管理问题,DBM即基于此思想实现node

技术栈

vue2 + vuex + vue-router + vue-resource + iviewgit

功能列表

权限管理

使用DBM在每次导入表格成功后将生成对应表格的查看、编辑(包括添加)和删除三个权限项,在角色管理页面对指定角色授予某项权限,另外还包含十余项系统权限属于不可修改权限,只有最高级别管理员拥有。
权限管理github

表格操做

使用DBM能够根据需求自定义表格并建立虚拟目录来管理建立的表格,其中DBM提供了文本、数字、时间、选项以及图片五种数据类型,并分别提供如下的筛选条件项vue-router

  • 文本提供等于、不等于、包含、不包含四项筛选
  • 数字文本提供大于、小于、等于三项筛选
  • 时间提供时间段、在日期以前、在日期以后三项筛选
  • 选项提供包含这一项筛选
  • 图片提供为空、非空两项筛选

表格列表
建立表格

数据操做

进入指定表格后能够对其进行一些自定义的数据筛选、导入、导出等基本操做,采用后台分页与解析Excel文件。
数据操做sql

接口约定

DBM采用先后端彻底分离的模式开发,前端使用json文件模拟业务请求的响应数据,后端根据json文件的规范来构建数据,所以接口的数据规范能够参照static文件夹下的json文件,如/login请求的响应数据模板即static文件夹下的login.json文件。
写这篇文章的时候看到一个名称为丁香园开源接口管理系统 的项目,以为蛮有意思的,能让先后端的对接更加方便,在这里为它打call。vuex

致谢

本项目使用到如vue-resource、ivew等很是多的开源项目,在此很是感谢它们为开源界作出的贡献。element-ui

github后端工程

相关文章
相关标签/搜索