硬核！SpringBoot + Vue 開發(fā)的一款前后端分離實戰(zhàn)項目！可視化拖拽設(shè)計！
大家好，這里是周末不想學習的 Guide!
今天上午閑來無事，和學姐一起上分，結(jié)果連跪，一怒之下卸載了！
于是，我就去逛了逛 Gitee，想看看最近有沒有什么比較有意思的國產(chǎn)開源項目。
這不！我還真在無意間發(fā)現(xiàn)了一個有意思的開源項目，這里給大家分享一下。
介紹
這個項目的名字叫做 AJ-Report ，是 Gitee 上的一個 GVIP 項目。
這是一個開源免費的拖拽編輯的可視化設(shè)計工具，使用這個項目三步即可快速完成大屏開發(fā)。并且，這個項目支持多種數(shù)據(jù)源以及多種樣式的圖標拖拽式設(shè)計。
我們直接可視化拖拽編輯內(nèi)置的組件來進行大屏設(shè)計，具體操作的效果過如下：
這個項目的技術(shù)棧是什么樣的呢?
項目的后端基于 Spring Boot + MyBatis-plus（MyBatis 增強版）+Flyway[1]（數(shù)據(jù)庫版本管理和遷移工具），都是業(yè)界目前比較主流的技術(shù)。 項目的前端基于 Vue 全家桶+Element（桌面組件庫）+Avue（采用 Element 框架低代碼前端框架，它使用 JSON 配置來生成頁面，可以減少頁面開發(fā)工作量，極大提升效率）。
都是比較主流的技術(shù)，比較適合拿來學習。
更多有關(guān)項目的介紹，你可以通過其項目主頁或者官方文檔來獲?。?/p>
項目地址：https://gitee.com/anji-plus/report 在線文檔 ：https://report.anji-plus.com/report-doc/
另外，你可以通過在電腦端在線體驗這個過程，在線體驗地址：https://report.anji-plus.com/index.html （體驗賬號：guest 密碼：guest）。
當然了，如果你想本地搭建環(huán)境來學習或者體驗這個項目的話，也是比較簡單的。
項目環(huán)境搭建
開始搭建環(huán)境之前，首先需要通過 Git 將項目克隆到本地。
? git clone https://gitee.com/anji-plus/report.git
項目結(jié)構(gòu)概覽
使用 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
主要關(guān)注下面這四個文件夾即可：
report-core: 后端項目report-ui: 前端項目doc：項目在線文檔源碼build.sh: 部署項目的腳本
后端環(huán)境搭建
使用 IDEA 或者其他工具打開后端項目 report-core
? cd report-core
? idea .
找到 bootstrap-dev.yml ,修改數(shù)據(jù)庫配置。將圖中關(guān)于 MySQL 的連接配置信息換成你使用的 IP
如果要使用上傳功能的，還需要修改下面這兩個配置。
這些配置信息修改完成之后，我們就可以啟動后端項目了！下圖是我本地啟動后的效果。
前端環(huán)境搭建
前端項目本地環(huán)境啟動就比較簡單了。不過，這一步需要你的本地有 Node 開發(fā)環(huán)境。
如果你不知道如何搭建 Node 開發(fā)環(huán)境的話，Windows 用戶可以看 Microsoft 的《直接在 Windows 上設(shè)置 Node.js 開發(fā)環(huán)境》[2]這篇文章，介紹的非常詳細。
Mac 用戶的話就比較簡單了，推薦直接使用 Homebrew 安裝即可：brew install node （NPM 已經(jīng)默認包含在了 Node 環(huán)境中）。
安裝完成之后，建議你測試一下本地是否成功安裝 Node 和 NPM ：
Node:node -vNPM:npm -v
Node 環(huán)境搭建好了之后，我們就開始正式搭建本地 Web 環(huán)境了！
Web 端代碼在 uexam/source/vue 下，我們需要首先進入這個目錄,然后分別對 xzs-admin (管理端) 和 xzs-student （學生端）執(zhí)行下面兩個命令。
1.下載相關(guān)依賴
? npm install
2.啟動項目
? npm start
直接查看 package.json 下的相關(guān)腳本，就知道前端項目是如何啟動和打包部署的了。
使用體驗
1、配置數(shù)據(jù)源。
這里可以支持多數(shù)據(jù)源，目前內(nèi)置 mysql, elasticsearch sql, kudu impala, http 四種。
2、寫 SQL 配置數(shù)據(jù)集。
數(shù)據(jù)源配置完成之后，我們即可使用數(shù)據(jù)源，這里以 mysql 數(shù)據(jù)源為例。
3、拖拽生成大屏。
新增大屏設(shè)計
通過拖拽的方式來設(shè)計大屏
后記
學姐比較喜歡王者榮耀里面的 武漢 eStarPro 戰(zhàn)隊，每次比賽 武漢 eStarPro 戰(zhàn)隊輸了，她還專門去武漢 eStarPro 官博下安慰。抽了一次獎，結(jié)果就讓她給抽中了。
本身她的獎品是只有鍵盤的，結(jié)果這人跑去找官博說自己不想要鍵盤，想要簽名照。武漢 eStarPro 戰(zhàn)隊官博也是豪爽，直接簽名照+鍵盤都給她安排了。簽名照+鍵盤都有了！這是什么神仙運氣。。。
我現(xiàn)在最后悔的就是帶她入坑王者榮耀了，簡直比我癮還大！菜還愛玩！
參考資料
Flyway: https://flywaydb.org/
[2]《直接在 Windows 上設(shè)置 Node.js 開發(fā)環(huán)境》: https://docs.microsoft.com/zh-cn/windows/dev-environment/javascript/nodejs-on-windows
我是 Guide哥，一個工作2年有余，接觸編程已經(jīng)6年有余的程序員。大三開源 JavaGuide，目前已經(jīng) 100k+ Star。未來幾年，希望持續(xù)完善 JavaGuide，爭取能夠幫助更多學習 Java 的小伙伴！共勉！凎！點擊即可了解我的個人經(jīng)歷。
歡迎點贊分享。咱們下期再會!