PageNow數(shù)據(jù)可視化開發(fā)平臺(tái)_開源版是基于SpringBoot+Vue構(gòu)建的低代碼數(shù)據(jù)可視化開發(fā)平臺(tái)，靈活的拖拽式布局、豐富的通用組件，幫助您快速的構(gòu)建與迭代數(shù)據(jù)大屏頁面。

目錄結(jié)構(gòu)

1、server：后端程序源碼

2、web：前端主程序源碼(基于Vue-cli3.0為基礎(chǔ)構(gòu)建的項(xiàng)目結(jié)構(gòu))

特性

1、原生支持多設(shè)備自動(dòng)適配，真正做到一次開發(fā)，多處運(yùn)行

2、拖拽式頁面布局設(shè)計(jì)器，支持框選組件、組件復(fù)制粘貼、多組件組合等靈活的設(shè)計(jì)器功能

3、運(yùn)行時(shí)樣式編輯，實(shí)現(xiàn)一切你能想象的畫面

4、運(yùn)行時(shí)自定義腳本編輯，通過豐富的API接口，助你實(shí)現(xiàn)更為豐富的頁面交互效果

5、豐富的組件進(jìn)出場動(dòng)畫，讓你的頁面不再枯燥無味

6、支持可擴(kuò)展的Echarts圖表配置

7、支持工程級(jí)別與頁面級(jí)別的圖表主題定制與切換

8、原生支持多種數(shù)據(jù)源綁定(靜態(tài)數(shù)據(jù)、API接口、數(shù)據(jù)庫腳本、CSV數(shù)據(jù)文件)

環(huán)境搭建開發(fā)工具

Git: 版本管理

DataGrip: 數(shù)據(jù)庫管理工具(Mac環(huán)境下使用)

Navicat for MySQL: 數(shù)據(jù)庫客戶端(Window環(huán)境下使用)

WebStorm: web開發(fā)工具(此為推薦使用，按個(gè)人情況選擇)

IntelliJ IDEA：server后端開發(fā)

開發(fā)環(huán)境

JDK7+

Mysql5.5+

NodeJS 最新版本

Yarn (個(gè)人推薦使用yarn而不是npm)

開發(fā)環(huán)境部署數(shù)據(jù)庫初始化使用數(shù)據(jù)庫管理工具，新建數(shù)據(jù)庫，命名為pagenow_open，然后運(yùn)行目錄server/src/main/resources/db下的pagenow_open.sql初始化腳本，開源版本總共有7張表，如下圖所示

后端程序啟動(dòng)

注意：建議JDK版本在1.7及以上，環(huán)境變量配置請自行百度。

運(yùn)行環(huán)境檢測：在cmd中運(yùn)行

java -version

使用IDEA開發(fā)工具，直接打開server目錄，然后運(yùn)行mvn相關(guān)命令安裝相關(guān)依賴包，一般IDEA會(huì)自動(dòng)下載相關(guān)依賴包

打開resources目錄下的db.properties配置文件，如下圖所示

修改相關(guān)數(shù)據(jù)庫連接配置

然后打開resources目錄下的application.properties配置文件

此配置文件中，需要修改紅框內(nèi)的配置，file.uploadFolder配置的是系統(tǒng)附件存儲(chǔ)目錄，根據(jù)您的操作系統(tǒng)環(huán)境進(jìn)行配置，項(xiàng)目啟動(dòng)前，必須先創(chuàng)建pagenowUpload文件夾，然后將絕對路徑配置到file.uploadFolder下，結(jié)尾必須帶斜杠。

然后在主文件PagenowApplication上右鍵，選擇Run 'PagenowApplication'運(yùn)行

如下圖所示，即為啟動(dòng)成功

打開瀏覽器，輸入localhost:8090驗(yàn)證是否正常運(yùn)行，如下圖所示，證明后端程序運(yùn)行成功

前端程序啟動(dòng)

使用webstorm打開web目錄，然后運(yùn)行一下命令安裝相關(guān)依賴包：

 yarn install

注意：PageNow項(xiàng)目不支持使用npm安裝依賴包和啟動(dòng)工程，否則會(huì)出現(xiàn)工程無法啟動(dòng)的問題，如果沒有安裝yarn，可以自行百度進(jìn)行安裝

修改.env配置文件

前端項(xiàng)目默認(rèn)使用8081端口啟動(dòng)，可以在vue.config.js文件中修改，運(yùn)行如下命令啟動(dòng)項(xiàng)目：

 yarn serve

 啟動(dòng)成功后，打開瀏覽器，輸入http://localhost:8081/pagenow即可訪問系統(tǒng)

注意：建議使用chrome瀏覽器訪問系統(tǒng)，以獲得更好的使用體驗(yàn)

系統(tǒng)截圖