SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

簡介

大屏設計(AJ-Report)是一個視覺化拖拽編輯的全開源專案,直觀,酷炫,具有科技感的圖表工具。內建的基礎功能包括資料來源,資料集,報表管理。

多資料來源支援,內建mysql、elasticsearch、kudu驅動,支援自定義資料集省去資料介面開發,支援17種大屏元件,不會開發,照著設計稿也可以製作大屏。

三步輕鬆完成大屏設計:配置資料來源—->寫SQL配置資料集—->拖拽配置大屏—->儲存釋出。歡迎體驗。

資料流程圖

SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

圖片

核心技術

後端

Spring Boot2。3。5。RELEASE: Spring Boot是一款開箱即用框架,讓我們的Spring應用變的更輕量化、更快的入門。在主程式執行main函式就可以執行。你也可以打包你的應用為jar並透過使用java -jar來執行你的Web應用;

Mybatis-plus3。3。2: MyBatis-plus(簡稱 MP)是一個 MyBatis (opens new window) 的增強工具。

flyway5。2。1: 主要用於在你的應用版本不斷升級的同時,升級你的資料庫結構和裡面的資料

前端

npm:node。js的包管理工具,用於統一管理我們前端專案中需要用到的包、外掛、工具、命令等,便於開發和維護。

webpack:用於現代 JavaScript 應用程式的_靜態模組打包工具

ES6:Javascript的新版本,ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS程式碼,同時利用其提供的強大功能來快速實現JS邏輯。

vue-cli:Vue的腳手架工具,用於自動生成Vue專案的目錄及檔案。

vue-router:Vue提供的前端路由工具,利用其我們實現頁面的路由控制,區域性重新整理及按需載入,構建單頁應用,實現前後端分離。

element-ui:基於MVVM框架Vue開源出來的一套前端ui元件。

avue: 用該元件包裹後可以變成拖拽元件,採用相對於父類絕對定位;用鍵盤的上下左右也可以控制移動

vue-echarts: vue-echarts是封裝後的vue外掛,基於 ECharts v4。0。1+ 開發

vue-superslide: Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封裝版本

vuedraggable: 是一款基於Sortable。js實現的vue拖拽外掛。

截圖

SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

圖片

SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

圖片

SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

圖片

SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

圖片

SpringBoot + Vue 實現的視覺化拖拽編輯的大屏專案

圖片

原始碼:gitee。com/anji-plus/report

模板:gitee。com/52itstyle/visual-large-screen