[开源]基于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.rhkb.cn/news/150684.html

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

相关文章

SpringBoot集成MyBatis-Plus实现增删改查

背景 因为学习工具的时候经常需要用到jar包,需要增删查改接口,所以参考文章实现了基于mybatis-plus的增删查改接口。 参考文章:第二十二节:SpringBoot集成MyBatis-Plus实现增删改查 原文中的git地址不存在,本文内容是原文代码修…

阿里云轻量应用服务器流量价格表(计费/免费说明)

阿里云轻量应用服务器套餐有的限制月流量,有的不限制月流量,限制每月流量的套餐,如果自带的免费月流量包用完了,流量超额部分需要另外支付流量费,阿里云百科aliyunbaike.com分享阿里云轻量应用服务器月流量超额收费价格…

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(() >…

LeakyReLU激活函数

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

模拟滤波器的基础知识和设计

信号处理工作中滤波器的应用是非常广泛的,可以分成模拟滤波器和数字滤波器两种,数字滤波器主要包括两种,IIR和FIR,这两种滤波器后面统一说,今天先来说一说模拟滤波器(主要是我先用Python实现了Matlab书里面…

【UE5 Cesium】15-Cesium for Unreal 加载本地地形

目录 一、加载全球无高度地形 二、加载区域DEM 效果 一、加载全球无高度地形 1. 先去如下网址下载全球无高度地形:Using a global terrain layer without height detail - #9 by RidhwanAziz - Cesium for Unreal - Cesium Community 下载后如下: 解…

MATLAB算法实战应用案例精讲-【优化算法】霸王龙优化算法(TROA)(附MATLAB代码实现)

前言 霸王龙优化算法(Tyrannosaurus optimization,TROA)由Venkata Satya Durga Manohar Sahu等人于2023年提出,该算法模拟霸王龙的狩猎行为,具有搜索速度快等优势。 霸王龙属于暴龙超科的暴龙属,是该属的唯一一种。1905年,美国古生物学家、美国艺术与科学院院士亨利奥…

【计算机视觉|人脸建模】学习从图像中回归3D面部形状和表情而无需3D监督

本系列博文为深度学习/计算机视觉论文笔记,转载请注明出处 标题:Learning to Regress 3D Face Shape and Expression from an Image without 3D Supervision 链接:[1905.06817] Learning to Regress 3D Face Shape and Expression from an I…

2023年上半年软考网工选择题易错总结

1.固态硬盘的存储介质是( )。 A.光盘 B.闪存 C.软盘 D.磁盘 答案:B 解析: 光盘CD-ROM和软盘是塑料的,磁盘的介质是磁性金属圆盘(附着铝合金),固态硬盘采用的存储介质是flash(闪存…

文件上传笔记

一、上传的简单绕过: 1、若是上传的文件只在前端的代码中进行了过滤: (1)可以直接在开发者工具中删除相关代码: (2)也可以通过 burpsuite 绕过: 上传时,先提前修改 php 文件的后缀…

8.2 JUC - 5.CountdownLatch

目录 一、是什么?二、demo演示三、应用之同步等待多线程准备完毕四、 应用之同步等待多个远程调用结束五、CountDownLatch 原理 一、是什么? CountdownLatch 用来进行线程同步协作,等待所有线程完成倒计时。 其中构造参数用来初始化等待计数…

vue3+vite+uniapp 封装一个省市区组件

一、预览图 二、使用前的一些注意事项 只支持在 uniapp vue3 项目中使用支持微信小程序和h5 (app端没有测试过)ui库用的 uview-plus省市区数据用的是 vant-ui 提供的一个赖库 vant/area-data 三、组件代码 <template><u-popup :show"show" type"botto…

iOS——仿写计算器

四则运算&#xff1a;中缀表达式转后缀表达式后缀表达式求值 实现四则运算的算法思路是&#xff1a;首先输入的是中缀表达式的字符串&#xff0c;然后将其转为计算机可以理解的后缀表达式&#xff0c;然后将后缀表达式求值&#xff1a; 中缀转后缀表达式思路参考&#xff1a;《…

现货白银图表分析的依据

现货白银的行情图表分析其实与股票的差不多&#xff0c;投资者可以结合均线、k线的变化&#xff0c;来分析实时的行情走势。当走势图的均线呈多头排列&#xff0c;即短期、中期、长期均线依次从上到下排列并向右上方运行&#xff0c;且白银价格沿各均线向右上方拉升&#xff0c…

数据产品读书笔记——认识数据产品经理

&#x1f33b;大家可能听说的更多是产品经理这个角色&#xff0c;对数据产品经理可能或多或少了解一些&#xff0c;但又不能准确的描述数据产品经理的主要职能和与其他产品的不同&#xff0c;因此通过读一些书来对数据产品经理有一个准确且全面的认知。 目录 1. 数据的产品分类…

基于生物地理学优化的BP神经网络(分类应用) - 附代码

基于生物地理学优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于生物地理学优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.生物地理学优化BP神经网络3.1 BP神经网络参数设置3.2 生物地理学算法应用 4…

Vue中如何进行图像识别与人脸对比(如百度AI、腾讯AI)

Vue中的图像识别与人脸对比 在现代Web应用程序中&#xff0c;图像识别和人脸对比技术越来越受欢迎。它们可以用于各种用途&#xff0c;如人脸识别门禁系统、图像分类和验证等。百度AI和腾讯AI是两个流行的人工智能平台&#xff0c;它们提供了强大的图像识别和人脸对比API。本文…

Sketch for mac v98.3(ui设计矢量绘图)

Sketch是一款为用户提供设计和创建数字界面的矢量编辑工具。它主要用于UI/UX设计师、产品经理和开发人员&#xff0c;帮助他们快速设计和原型各种应用程序和网站。 Sketch具有简洁直观的界面&#xff0c;以及丰富的功能集&#xff0c;使得用户可以轻松地创建、编辑和共享精美的…

【华为OD机考】统计监控、需要打开多少监控器(JAVA题解——也许是全网最优)

前言 本人是算法小白&#xff0c;甚至也没有做过Leetcode。所以&#xff0c;我相信【同为菜鸡的我更能理解作为菜鸡的你们的痛点】。 题干 OD&#xff0c;B 卷 100 分题目【OD 统一考试&#xff08;B 卷&#xff09;】 1. 题目描述 某长方形停车场每个车位上方都有一个监控…

Kafka快速实战以及基本原理详解

这一部分主要是接触 Kafka &#xff0c;并熟悉 Kafka 的使用方式。快速熟练的搭建 kafka 服务&#xff0c;对于快速验证一些基于Kafka 的解决方案&#xff0c;也是非常有用的。 一、 Kafka 介绍 ChatGPT 对于 Apache Kafka 的介绍&#xff1a; 1 、 MQ 的作用 MQ &#xff1a;…