rw战队|SpringBoot + Vue 开发的一款前后端分离实战项目!可视化拖拽设计( 二 )


后端环境搭建使用 IDEA 或者其他工具打开后端项目report-core
? cd report-core
? idea .

找到bootstrap-dev.yml 修改数据库配置 。 将图中关于 MySQL 的连接配置信息换成你使用的 IP

如果要使用上传功能的 , 还需要修改下面这两个配置 。

这些配置信息修改完成之后 , 我们就可以启动后端项目了!下图是我本地启动后的效果 。

前端环境搭建前端项目本地环境启动就比较简单了 。 不过 , 这一步需要你的本地有Node开发环境 。
如果你不知道如何搭建Node 开发环境的话 , Windows 用户可以看 Microsoft 的《直接在 Windows 上设置 Node.js 开发环境》[2
这篇文章 , 介绍得非常详细 。

Mac 用户的话就比较简单了 , 推荐直接使用Homebrew 安装即可:brew install node (NPM 已经默认包含在了 Node 环境中) 。
安装完成之后 , 建议你测试一下本地是否成功安装Node 和 NPM :

  • Node : node -v
  • NPM : npm -v

Node 环境搭建好了之后 , 我们就开始正式搭建本地 Web 环境了!
Web 端代码在uexam/source/vue 下 , 我们需要首先进入这个目录然后分别对 xzs-admin (管理端) 和 xzs-student (学生端)执行下面两个命令 。
1.下载相关依赖
? npm install

2.启动项目
? npm start

直接查看package.json 下的相关脚本 , 就知道前端项目是如何启动和打包部署的了 。

使用体验1、配置数据源 。
这里可以支持多数据源 , 目前内置 mysql elasticsearch sql kudu impala http 四种 。

2、写 SQL 配置数据集 。
数据源配置完成之后 , 我们即可使用数据源 , 这里以 mysql 数据源为例 。

3、拖拽生成大屏 。
新增大屏设计

通过拖拽的方式来设计大屏





【rw战队|SpringBoot + Vue 开发的一款前后端分离实战项目!可视化拖拽设计】更多有关项目的介绍 , 以及项目地址 , 关注+转发后私信小编【666】获取项目地址哦!