最近无意间发现了一个有意思的开源项目,基于 SpringBoot + Vue实现,技术栈很主流,文档也很全,这里给大家分享一下。
介绍
这个项目的名字叫做 AJ-Report ,是 Gitee 上的一个 GVIP 项目。
![](https://i-blog.csdnimg.cn/blog_migrate/37246551d747962746e85a0e1b6fc83d.png)
这是一个开源免费的拖拽编辑的可视化设计工具,使用这个项目三步即可快速完成大屏开发。并且,这个项目支持多种数据源以及多种样式的图标拖拽式设计。
![](https://i-blog.csdnimg.cn/blog_migrate/5d57fe5ff0f41213cc8f4fc6d8ccdfbe.png)
我们直接可视化拖拽编辑内置的组件来进行大屏设计,具体操作的效果过如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9dbd9ae6d38f5578691f570ae8d6a991.gif)
这个项目的技术栈是什么样的呢?
项目的后端基于 Spring Boot + MyBatis-plus(MyBatis 增强版)+Flyway[1](数据库版本管理和迁移工具),都是业界目前比较主流的技术。
项目的前端基于 Vue 全家桶+Element(桌面组件库)+Avue(采用 Element 框架低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率)。
都是比较主流的技术,比较适合拿来学习。
![](https://i-blog.csdnimg.cn/blog_migrate/39da26b00bab4d5a3b11cbf22d2ffa41.png)
更多有关项目的介绍,你可以通过其项目主页或者官方文档来获取:
另外,你可以通过在电脑端在线体验这个过程,在线体验地址:https://report.anji-plus.com/index.html (体验账号:guest 密码:guest)。
![](https://i-blog.csdnimg.cn/blog_migrate/f55b2e9e985a92c423ff437b47e7a253.png)
当然了,如果你想本地搭建环境来学习或者体验这个项目的话,也是比较简单的。
项目环境搭建
开始搭建环境之前,首先需要通过 Git 将项目克隆到本地。
git clone https://gitee.com/anji-plus/report.git
项目结构概览
使用 ll 命令查看一下文件夹中有什么。
ll
total 72
-rw-r--r-- 1 guide staff 11K 8 12 15:22 LICENSE
-rw-r--r-- 1 guide staff 1.9K 8 12 15:22 README.en.md
-rw-r--r-- 1 guide staff 6.3K 8 12 15:22 README.md
-rw-r--r-- 1 guide staff 996B 8 12 15:22 build.sh
-rw-r--r-- 1 guide staff 732B 8 12 15:22 derby.log
drwxr-xr-x 6 guide staff 192B 8 12 15:22 doc
-rw-r--r-- 1 guide staff 559B 8 12 15:22 pom.xml
drwxr-xr-x 6 guide staff 192B 8 12 15:22 report-core
drwxr-xr-x 15 guide staff 480B 8 12 15:22 report-ui
主要关注下面这四个文件夹即可:
report-core : 后端项目
report-ui : 前端项目
doc :项目在线文档源码
build.sh : 部署项目的脚本
后端环境搭建
使用 IDEA 或者其他工具打开后端项目 report-core
cd report-core
idea .
找到 bootstrap-dev.yml ,修改数据库配置。将图中关于 MySQL 的连接配置信息换成你使用的 IP
![](https://i-blog.csdnimg.cn/blog_migrate/f30ea018b0569db0c9e8160121cfff78.png)
如果要使用上传功能的,还需要修改下面这两个配置。
![](https://i-blog.csdnimg.cn/blog_migrate/c765ace9df6e6be308748e87dbd5011f.png)
这些配置信息修改完成之后,我们就可以启动后端项目了!下图是我本地启动后的效果。
![](https://i-blog.csdnimg.cn/blog_migrate/60dca6f4b66980a5d635eb9228ee012e.png)
前端环境搭建
前端项目本地环境启动就比较简单了。不过,这一步需要你的本地有 Node 开发环境。
如果你不知道如何搭建 Node 开发环境的话,Windows 用户可以看 Microsoft 的**《直接在 Windows 上设置 Node.js 开发环境》**[2]这篇文章,介绍的非常详细。
![](https://i-blog.csdnimg.cn/blog_migrate/2bdd43fe7280e0cbb3e950735a9d2bb6.png)
Mac 用户的话就比较简单了,推荐直接使用 Homebrew 安装即可:brew install node (NPM 已经默认包含在了 Node 环境中)。
安装完成之后,建议你测试一下本地是否成功安装 Node 和 NPM :
Node : node -v
NPM : npm -v
![](https://i-blog.csdnimg.cn/blog_migrate/e4b1bdf051336d46fb46311e0f503132.png)
Node 环境搭建好了之后,我们就开始正式搭建本地 Web 环境了!
Web 端代码在 uexam/source/vue 下,我们需要首先进入这个目录,然后分别对 xzs-admin (管理端) 和 xzs-student (学生端)执行下面两个命令。
1.下载相关依赖
npm install
2.启动项目
npm start
直接查看 package.json 下的相关脚本,就知道前端项目是如何启动和打包部署的了。
![](https://i-blog.csdnimg.cn/blog_migrate/77a002267a1ed01d5a665f7cded9c4ae.png)
使用体验
1、配置数据源。
这里可以支持多数据源,目前内置 mysql, elasticsearch sql, kudu impala, http 四种。
![](https://i-blog.csdnimg.cn/blog_migrate/57cfe933535f3d12e2b4818d7d103edd.png)
2、写 SQL 配置数据集。
数据源配置完成之后,我们即可使用数据源,这里以 mysql 数据源为例。
![](https://i-blog.csdnimg.cn/blog_migrate/5b1bfe7c14324979783c9378866a08dc.png)
3、拖拽生成大屏。
新增大屏设计
![](https://i-blog.csdnimg.cn/blog_migrate/de879a043d9a69ab6956c97cae26feea.png)
通过拖拽的方式来设计大屏
![](https://i-blog.csdnimg.cn/blog_migrate/dd5cc115162f553ecfda240ee259068f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a044b0e73ac49ae9ae2ff1bef6d31dd3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/435b076f329323379c9816d6383e3b4d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/66154741e53ba0bb8b778e7a06978a05.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cc055340acbf54df8ec18b2d787c7e0b.png)