PageNow（基于SpringBoot+Vue构建的数据可视化开发平台）

介绍

基于SprigBoot+Vue构建的数据可视化开发平台，灵活的拖拽式布局、支持多种数据源、丰富的通用组件，帮助您快速的构建与迭代数据大屏页面。

官方网站：PageNow官网

演示地址（演示系统为企业版本，开源版删减了部分功能）：http://139.9.101.78:8080/pagenow/login 演示用户账号：user/123

目录结构

1. server：存放系统后端程序JAR包与数据库初始化脚本等其他相关部署文件
2. web：前端主程序源码（基于Vue-cli3.0为基础构建的项目结构）

后端架构选型

（备注：开源版本后端源码不开放）

前端架构选型

特性

1、原生支持多设备自动适配，真正做到一次开发，多处运行 2、拖拽式页面布局设计器，支持框选组件、组件复制粘贴、多组件组合等灵活的设计器功能 3、运行时样式编辑，实现一切你能想象的画面 4、运行时自定义脚本编辑，通过丰富的API接口，助你实现更为丰富的页面交互效果 5、丰富的组件进出场动画，让你的页面不再枯燥无味 6、支持可扩展的Echarts图表配置 7、支持工程级别与页面级别的图表主题定制与切换 8、原生支持多种数据源绑定（静态数据、API接口、数据库脚本、CSV数据文件）

环境搭建

开发工具

• Git: 版本管理
• DataGrip: 数据库管理工具（Mac环境下使用）
• Navicat for MySQL: 数据库客户端（Window环境下使用）
• WebStorm: web开发工具（此为推荐使用，按个人情况选择）

开发环境

• JDK7+
• Mysql5.5+
• NodeJS 最新版本
• Yarn （个人推荐使用yarn而不是npm）

资源下载

请自行上网下载，如果找不到相关资源，请联系我。

开发环境部署

数据库初始化

使用数据库管理工具，新建数据库，命名为pagenow_open，然后运行server目录下的pagenow_open.sql初始化脚本，开源版本总共有7张表，如下图所示

后端程序部署

注意：建议JDK版本在1.7及以上，环境变量配置请自行百度。

• 运行环境检测：在cmd中运行

java -version

• 注意：建议将server目录中的pagenow_serve-0.0.1-SNAPSHOT.jar文件拷贝出来，放到其他盘符某个非中文指定目录下，例如：如果您是window系统，那么建议在任意盘符下新建一个pagenow目录，然后将jar包拷贝至此目录下，然后同样在此目录下新建一个文件夹，命名为pagenowUpload，用于存储上传附件

• 然后修改JAR包中的相关配置文件，MAC系统环境与Window系统环境下操作不一样，但主要目的都是为了修改下图中显示的这两个配置文件，一般window系统下使用解压软件打开jar包，将这两个配置文件拷贝出来，然后修改配置，重新覆盖即可；mac系统下就稍微有点麻烦，如果遇到问题，请联系我。

• db.properties配置文件主要用于配置数据库连接，根据您的系统环境自行配置即可

• application.properties配置文件主要配置一些系统运行环境变量，例如文件上传目录等，文件中都有相关备注，按照您的系统环境自行配置即可

• 修改完相关配置之后，cmd进入jar包所在根目录，运行如下命令：

java -jar pagenow_serve-0.0.1-SNAPSHOT.jar

看到如下图所示，及代表启动成功

• 测试运行，打开浏览器，输入http://localhost:8090，显示下图界面及代表后端程序部署成功

前端部署

• 进入web根目录，安装相关依赖包：

# 使用 npm    
npm install

# 使用 yarn    
yarn install

• 修改.env配置文件

• 前端项目默认使用8081端口启动，可以在vue.config.js文件中修改，运行如下命令启动项目：

# 使用 npm    
npm run serve

# 使用 yarn    
yarn serve

系统截图

联系方式：购买咨询，学习交流

官方客服QQ：354300651；项目负责人QQ：229041307；项目负责人微信：huangjian325（加微信请做好备注）