「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

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

介绍

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

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

目录结构

  1. server:后端程序源码
  2. web:前端主程序源码(基于Vue-cli3.0为基础构建的项目结构)

后端架构选型

1、

SpringBoot

主架构框架

2、

JFinal

基于Db的数据库操作

3、

Druid

数据库连接池

4、

Swagger2

接口测试框架

5、

Maven

项目构建管理

前端架构选型

1、

vue

mvvm框架

2、

vue-router

路由管理

3、

vuex

状态管理

4、

axios

HTTP 库

5、

echarts

可视化图表

6、

iview

UI 组件库

7、

jquery

函式库

特性

1、原生支持多设备自动适配,真正做到一次开发,多处运行

2、拖拽式页面布局设计器,支持框选组件、组件复制粘贴、多组件组合等灵活的设计器功能

3、运行时样式编辑,实现一切你能想象的画面

4、运行时自定义脚本编辑,通过丰富的API接口,助你实现更为丰富的页面交互效果

5、丰富的组件进出场动画,让你的页面不再枯燥无味

6、支持可扩展的Echarts图表配置

7、支持工程级别与页面级别的图表主题定制与切换

8、原生支持多种数据源绑定(静态数据、API接口、数据库脚本、CSV数据文件)

环境搭建

开发工具

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

开发环境

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

资源下载

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

开发环境部署

数据库初始化

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

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

后端程序启动

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

  • 运行环境检测:在cmd中运行
java -version

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

使用IDEA开发工具,直接打开server目录,然后运行mvn相关命令安装相关依赖包,一般IDEA会自动下载相关依赖包

打开resources目录下的db.properties配置文件,如下图所示

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

修改相关数据库连接配置

然后打开resources目录下的application.properties配置文件

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

此配置文件中,需要修改红框内的配置,file.uploadFolder配置的是系统附件存储目录,根据您的操作系统环境进行配置,项目启动前,必须先创建pagenowUpload文件夹,然后将绝对路径配置到file.uploadFolder下,结尾必须带斜杠。

然后在主文件PagenowApplication上右键,选择Run 'PagenowApplication'运行

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

如下图所示,即为启动成功

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

打开浏览器,输入localhost:8090验证是否正常运行,如下图所示,证明后端程序运行成功

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

前端程序启动

  • 使用webstorm打开web目录,然后运行一下命令安装相关依赖包:
yarn install

注意:PageNow项目不支持使用npm安装依赖包和启动工程,否则会出现工程无法启动的问题,如果没有安装yarn,可以自行百度进行安装

  • 修改.env配置文件
  • 前端项目默认使用8081端口启动,可以在vue.config.js文件中修改,运行如下命令启动项目:
yarn serve

启动成功后,打开浏览器,输入http://localhost:8081/pagenow即可访问系统

注意:建议使用chrome浏览器访问系统,以获得更好的使用体验

系统截图

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

「开源分享」基于SpringBoot+Vue构建的数据可视化开发平台

如果你对源码感兴趣,请点赞+转发+关注+私信【可视化开发平台】。

欢迎点赞+转发+关注!大家的支持是我分享最大的动力!!!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/100344.html

(0)

相关推荐

  • 每次吃太饱会不会不好,偶尔吃的太饱的危害

    如果你做好一件事,你可以多活20年!听起来是不是很神奇? 其实方法很简单:每顿少吃一口! 伦敦大学的一项研究表明,少吃40%可以延长你的寿命20年。少吃对预防心血管疾病、癌症和神经...

    生活 2021年10月31日
  • 精准加智能携手服务医疗,首个智慧医疗融创平台落地广东

    人工智能、大数据、5G技术等为代表的高新科技蓬勃发展,不断赋能医疗健康领域,推动健康医学科技创新发展。一个充满想象力和无限活力的智慧医疗时代正在走来。

    科技 2021年11月6日
  • 秋季养生,重点在养肺

    秋季天气转凉、气候干燥,极易出现干咳无痰、口鼻干燥、皮肤干裂等症。那我们该如何来防护呢?来听听专家怎么说。 郭安妮 肺病科副主任 主治医师 中医养生之道,讲究“天人合一”,即顺应自...

    生活 2021年9月10日
  • okex提币到火币,币安火币okex哪个好

    10月2日,火币最先发布了《关于币币与OTC交易中国大陆地区存量用户清退流程的公告》。公告一出,币安在10月13日官方发布公告《关于下架C2C CNY交易区及中国大陆地区用户清查的通知》,随即不久之后,OKEx也发布了《关于中国大陆地区监管政策的通知》,表示保持“退出中国大陆市场”的政策。

    科技 2021年10月24日
  • 中国燃料电池第一龙头,燃料电池行业龙头

    燃料电池的发展趋势:大家都知道新能源汽车对环境污染小,其中的氢燃料电池汽车才是被誉为最清洁能源的汽车。氢能被称为最环保的能源,以它为原料的汽车自然也是最环保的,除了环保,氢能源汽车还有充气快,续航时间长的特点。正因为它有这么多的好处,所以我国各大汽车企业都在纷纷加入研究氢能源汽车的方向,而且纷纷都生产出样车。

    科技 2021年10月25日
  • 双十一别乱买,续航最好的三款手机,从低端到旗舰统统都有

    双十一购物狂欢节正在如火如荼的进行当中,各大厂商的杀价力度也都非常大。同时还有一些电商给出了神券。从昨晚0点开始,相信不少网友已经入手了自己心仪的手机,也有一些网友可能在观望。每个用户的需求不一样,看中的手机也不一样,如果你希望买到一款续航非常厉害的手机,那么我推荐以下三款,从低端到旗舰都有。

    科技 2021年11月1日