基於Vue2的資料管理系統-DBM

高達達發表於2017-09-17

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

相關文章