基於Vue2的數據管理系統-DBM

最近比較閒得空學習了一下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 與 後端工程