基于 SpringBoot + Vue 實(shí)現(xiàn)的可視化拖拽編輯的大屏項(xiàng)目

整理：抓哇筆記

簡(jiǎn)介

大屏設(shè)計(jì)（AJ-Report）是一個(gè)可視化拖拽編輯的全開源項(xiàng)目，直觀，酷炫，具有科技感的圖表工具。內(nèi)置的基礎(chǔ)功能包括數(shù)據(jù)源，數(shù)據(jù)集，報(bào)表管理。

多數(shù)據(jù)源支持，內(nèi)置mysql、elasticsearch、kudu驅(qū)動(dòng)，支持自定義數(shù)據(jù)集省去數(shù)據(jù)接口開發(fā)，支持17種大屏組件，不會(huì)開發(fā)，照著設(shè)計(jì)稿也可以制作大屏。

三步輕松完成大屏設(shè)計(jì)：配置數(shù)據(jù)源—->寫SQL配置數(shù)據(jù)集—->拖拽配置大屏—->保存發(fā)布。歡迎體驗(yàn)。

數(shù)據(jù)流程圖

核心技術(shù)

后端

• Spring Boot2.3.5.RELEASE: Spring Boot是一款開箱即用框架，讓我們的Spring應(yīng)用變的更輕量化、更快的入門。在主程序執(zhí)行main函數(shù)就可以運(yùn)行。你也可以打包你的應(yīng)用為jar并通過使用java -jar來運(yùn)行你的Web應(yīng)用；

• Mybatis-plus3.3.2: MyBatis-plus（簡(jiǎn)稱 MP）是一個(gè) MyBatis (opens new window) 的增強(qiáng)工具。

• flyway5.2.1: 主要用于在你的應(yīng)用版本不斷升級(jí)的同時(shí)，升級(jí)你的數(shù)據(jù)庫結(jié)構(gòu)和里面的數(shù)據(jù)

前端

• npm：node.js的包管理工具，用于統(tǒng)一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等，便于開發(fā)和維護(hù)。

• webpack：用于現(xiàn)代 JavaScript 應(yīng)用程序的_靜態(tài)模塊打包工具

• ES6：Javascript的新版本，ECMAScript6的簡(jiǎn)稱。利用ES6我們可以簡(jiǎn)化我們的JS代碼，同時(shí)利用其提供的強(qiáng)大功能來快速實(shí)現(xiàn)JS邏輯。

• vue-cli：Vue的腳手架工具，用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。

• vue-router：Vue提供的前端路由工具，利用其我們實(shí)現(xiàn)頁面的路由控制，局部刷新及按需加載，構(gòu)建單頁應(yīng)用，實(shí)現(xiàn)前后端分離。

• element-ui：基于MVVM框架Vue開源出來的一套前端ui組件。

• avue: 用該組件包裹后可以變成拖拽組件,采用相對(duì)于父類絕對(duì)定位;用鍵盤的上下左右也可以控制移動(dòng)

• vue-echarts: vue-echarts是封裝后的vue插件,基于 ECharts v4.0.1+ 開發(fā)

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

• vuedraggable: 是一款基于Sortable.js實(shí)現(xiàn)的vue拖拽插件。

截圖

源碼：gitee.com/anji-plus/report
模板：gitee.com/52itstyle/visual-large-screen

—END—
分享一下我寫的《10萬字Springboot經(jīng)典學(xué)習(xí)筆記》中，點(diǎn)擊下面小卡片，進(jìn)入【Java禿頭哥】，回復(fù)：筆記，即可免費(fèi)獲取。
點(diǎn)贊是最大的支持?