5

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

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

概述

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

技术栈

vue2 + vuex + vue-router + vue-resource + iview

功能列表

权限管理

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

表格操作

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

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

表格列表
创建表格

数据操作

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

接口约定

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

致谢

本项目使用到如vue-resource、ivew等非常多的开源项目,在此非常感谢它们为开源界做出的贡献。

github后端工程


Chee
142 声望11 粉丝