[开源]基于Vue的拖拽式数据报表设计器,为简化开发提高效率而生

一、开源项目简介

Cola-Designer 是一个 基于VUE,实现拖拽 + 配置方式生成数据大屏,为简化开发、提高效率而生。

二、开源协议

使用GPL-2.0开源协议

三、界面展示

概览

部分截图:

   

四、功能概述

特性

0 代码

  • 实现完全拖拽 + 配置式生成大屏,设计即生产。(动态数据需要后端提供API接口)

快速开发&部署

  • 项目采用行业流行架构:SpringBoot+Vue,开发\部署方便。

组件丰富

  • 内置element、dataV、echarts等优秀开源的报表常用组件,满足基本的设计需求。

自定义

  • 设计器没有想要的组件?自己动手,丰衣足食。详细文档介绍5分钟可开发一个自己想要的组件。

五、技术选型

快速开始

在开发环境中项目中使用cola-designer。

开发环境

开发版本

推荐版本

mysql

8.0

5.7 +

jdk

11

1.8 +

node

16.13.1

12 +

npm

8.2.0

6 +

vue-cli

4.5.15

2 +

项目结构

使用技术:SpringBoot + SpringSecurity + Mysql + MyBatis-Plus + Redis + Vue + ElementUI

前端目录:

├── dist                                   打包目录
├── public
├── src├── api                              后端接口├── assets                           静态资源├── components                       组件目录├── gallery.vue                      图库组件├── option.js                        组件可配置项配置├── registerCpt.js                   自定义组件配置├── registerOption.js                自定义组件属性配置├── router├── utils├── views├── designer                            设计器├── manage                              管理端├── preview                             预览/访问页
├── env.js                           环境配置
├── LICENSE
├── README.md

后端目录:

├── sql             数据库脚本
├── src
├── pom.xml                        

运行前端

  1. 拉取项目
  2. 切换到前端项目目录执行:yarn install
  3. install完成后执行:yarn run dev

注意事项

  • 运行后端项目前需自行创建数据库并运行数据库脚本,同时修改application.yml相关配置
  • 后端项目默认端口:6882
  • 前端配置详见 vue.config.js
注意事项:项目默认使用接口模式,完整功能需要连接后端程序,若只想体验设计器部分可将env.js中active改为preview(本地缓存模式),然后访问http://localhost:8009/#/design ,本地缓存模式暂时不能使用图片上传

六、源码地址

cola-designer: 基于vue2.0,拖拽式网站设计器、大屏设计器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/97716.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot中常用注解的含义

一、方法参数注解 1. PathVariable 通过RequestMapping注解中的 { } 占位符来标识URL中的变量部分 在控制器中的处理方法的形参中使用PathVariable注解去获取RequestMapping中 { } 中传进来的值,并绑定到处理方法定一的形参上。 //请求路径:http://3333…

【好玩】如何在github主页放一条贪吃蛇

前言 🍊缘由 github放小蛇,就问你烧不烧 起因看到大佬github上有一条贪吃蛇扭来扭去,觉得好玩,遂给大家分享一下本狗的玩蛇历程 🥝成果初展 贪吃蛇 🎯主要目标 实现3大重点 1. github设置主页 2. git…

C#学习系列相关之多线程(二)----Thread类介绍

一、线程初始化 1.无参数 static void Main(string[] args) {//第一种写法Thread thread new Thread(test);thread.Start();//第二种写法 delegateThread thread1 new Thread(new ThreadStart(test));thread1.Start();//第三种写法 lambdaThread thread2 new Thread(() >…

从零开始的C++(补充三的内容)

auto:在编译阶段根据数据的类型确认auto所代表的类型,并将auto换成对应的类型。 特点: 1、auto所能代表的类型必须是在编译阶段就能确认的。 2、auto修饰的变量必须初始化,否则编译器无法判断auto的实际类型。 3、auto会根据第一个数据来…

Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务

项目背景 一、随着公司的快速发展,企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性,公司对内部工程管理的提升提出了更高的要求。 二、企业通过数字化转型,不仅有利于优化业务流程、提升经营管理…

LeakyReLU激活函数

nn.LeakyReLU 是PyTorch中的Leaky Rectified Linear Unit(ReLU)激活函数的实现。Leaky ReLU是一种修正线性单元,它在非负数部分保持线性,而在负数部分引入一个小的斜率(通常是一个小的正数),以防…

/dev下没有video0这个文件(ubuntu无法打开摄像头)

文章目录 硬件问题一、查看虚拟机摄像头连接情况二、解决红色报错三、虚拟机硬件处理内容问题一、设备号二、视频格式问题硬件问题 一、查看虚拟机摄像头连接情况 报错详情 ERROR: cannot launch node of type [image_view/image_view]: image_view ROS path [0]=/opt/ros/m…

(Note)在Excel中选中某一行至最后一行的快捷键操作

在 Excel 中,选中一行至最后一行的快捷键是 “Shift 空格 Ctrl 方向键下”。按住 Shift 键,然后按下空格键以选中整行,接着按下 Ctrl 键保持选中状态,并按下方向键下键盘按钮以扩展选中范围至最后一行。 简要步骤如下&#xf…

应用安全系列之四十:登录常见问题以及预防方法

对于所有系统而言,登录是一个必备的而且最重要的功能。随着系统越来越复杂,服务越来越多,为了方便用户使用系统的服务,SSO应运而生,SSO虽然方便了用户使用系统,也增加了风险。因为一旦登录出现问题,就很容易通过登录访问整个系统。可见,对于登录如果没有控制好,攻击者…

Git使用【中】

欢迎来到Cefler的博客😁 🕌博客主页:那个传说中的man的主页 🏠个人专栏:题目解析 🌎推荐文章:题目大解析3 目录 👉🏻分支管理分支概念git branch(查看/删除分…

YOLOv8血细胞检测(6):多维协作注意模块MCA | 原创独家创新首发

💡💡💡本文改进:多维协作注意模块MCA,效果秒杀ECA、SRM、CBAM,创新性十足,可直接作为创新点使用。 MCA | 亲测在血细胞检测项目中涨点,map@0.5 从原始0.895提升至0.910 收录专栏: 💡💡💡YOLO医学影像检测:http://t.csdnimg.cn/N4zBP ✨✨✨实战医学影…

老卫带你学---leetcode刷题(31. 下一个排列)

31. 下一个排列 问题: 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如,arr [1,2,3] ,以下这些都可以视作 arr 的排列:[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字…

【数组】二分查找(减不减一,看初始化!)

一、力扣习题链接 704. 二分查找 - 力扣(LeetCode) 二、思路 这道题目的前提是数组为有序数组,同时题目还强调数组中无重复元素,因为一旦有重复元素,使用二分查找法返回的元素下标可能不是唯一的,这些都是…

websocket逆向

Websocket逆向技术的实际应用 前言一、websocket逆向实际应用1. 插件开发2. 弹幕互动游戏3. (半)无人直播 二、直播间常见通信技术1. http轮询2. websocket通信 三. 直播间常见消息解析技术四、 逆向直播间常用技术1. RPC远程服务调用2. 通信拦截3. API调用 五、学习路线实战1&…

复旦大学EMBA:揭秘科创企业,领略未来战略!

智能制造,国之重器。作为制造强国建设的主攻方向,智能制造的发展水平关系到我国未来制造业在全球的地位与影响力。发展智能制造,是加快建设现代化产业体系的重要手段,提升供给体系适配性的有力抓手,也是建设数字中国的…

css的gap设置元素之间的间隔

在felx布局中可以使用gap来设置元素之间的间隔&#xff1b; .box{width: 800px;height: auto;border: 1px solid green;display: flex;flex-wrap: wrap;gap: 100px; } .inner{width: 200px;height: 200px;background-color: skyblue; } <div class"box"><…

基于SSM的固定资产管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Acwing.790 数的三次方根

题目 给定一个浮点数n&#xff0c;求它的三次方根。 输入格式 共一行&#xff0c;包含一个浮点数n。 输出格式 共—行&#xff0c;包含一个浮点数&#xff0c;表示问题的解。注意&#xff0c;结果保留6位小数。 数据范围 -10000 ≤n ≤10000 输入样例: 1000.00输出样例…

ROS2 Galactic安装

ROS2 Galactic安装 ROS2 Galactic安装字体编码检查添加ros2仓库到本机安装ROS2系统测试ROS卸载ros2 ROS2 Galactic安装 字体编码检查 安装需要设置本级为UTF-8字体&#xff0c;使用如下指令检查&#xff1a; locale # check for UTF-8sudo apt update && sudo apt …

Acwing.886 求组合数Ⅱ

题目 给定n组询问&#xff0c;每组询问给定两个整数a&#xff0c; b&#xff0c;请你输出 的值。 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含—组a和b。 输出格式 共n行&#xff0c;每行输出—个询问的解。 数据范围 1<n≤10000, 1 <b<a≤105…