A large-screen project based on SpringBoot + Vue for visual drag-and-drop editing- AJ-Report
AJ-Report is a BI platform open sourced by Anji Jiajia. It is displayed on a cool large screen, and can control business dynamics anytime and anywhere, so that every decision is supported by data.
Supports multiple data sources, built-in mysql, elasticsearch, kudu drivers, supports custom data sets without data interface development, supports 17 kinds of large screen components, does not know how to develop, and can also make large screens according to the design draft.
Three steps to easily complete the large screen design: configure the data source ----> write SQL to configure the data set ----> drag and drop to configure the large screen ----> save and publish. Welcome to experience.
Project download address
https://download.csdn.net/download/askuld/87766176
Functional Overview
Component introduction
Large screen design (AJ-Report) is a visual drag-and-drop editing, intuitive, cool, and technologically-inspired chart tool full open source project. The built-in basic functions include data source, data set, and report management. The screenshots of the project are as follows.
Data flow diagram
Core Technology
rely
-
[Mysql] 5.7+
-
[Jdk] 1.8+
rear end
Spring Boot2.3.5.RELEASE: Spring Boot is an out-of-the-box framework that makes our Spring applications lighter and faster to get started. Execute the main function in the main program to run. You can also package your application as a jar and run your web application by using java -jar;
Mybatis-plus3.3.2: MyBatis-plus (MP for short) is an enhanced tool for MyBatis (opens new window).
flyway5.2.1: Mainly used to upgrade your database structure and the data in it while your application version is constantly upgrading
front end
npm: A package management tool for node.js, which is used to uniformly manage the packages, plug-ins, tools, commands, etc. that we need to use in our front-end projects, which is convenient for development and maintenance.
webpack: A Static Module Bundler for Modern JavaScript Applications
ES6: A new version of Javascript, short for ECMAScript6. Using ES6, we can simplify our JS code, and at the same time use the powerful functions it provides to quickly implement JS logic.
vue-cli: Vue's scaffolding tool, used to automatically generate directories and files of Vue projects.
vue-router: The front-end routing tool provided by Vue, we use it to realize the routing control of the page, partial refresh and on-demand loading, build a single-page application, and realize the separation of the front and back ends.
element-ui: A set of front-end ui components based on the MVVM framework Vue open source.
avue: Wrapped with this component, it can become a drag-and-drop component, using absolute positioning relative to the parent class; you can also control the movement with the keyboard up, down, left, and right
vue-echarts: vue-echarts is a packaged vue plug-in, developed based on ECharts v4.0.1+
vue-superslide: Vue-SuperSlide (Github) is a Vue packaged version of SuperSlide
vuedraggable: is a Vue drag-and-drop plugin based on Sortable.js.
screenshot
