一、開源項(xiàng)目簡介

Cola-Designer 是一個 基于VUE，實(shí)現(xiàn)拖拽 + 配置方式生成數(shù)據(jù)大屏，為簡化開發(fā)、提高效率而生。

二、開源協(xié)議

使用GPL-2.0開源協(xié)議

三、界面展示

概覽

部分截圖：

???

四、功能概述

特性

0 代碼

• 實(shí)現(xiàn)完全拖拽 + 配置式生成大屏，設(shè)計即生產(chǎn)。（動態(tài)數(shù)據(jù)需要后端提供API接口）

快速開發(fā)&部署

• 項(xiàng)目采用行業(yè)流行架構(gòu)：SpringBoot+Vue，開發(fā)\部署方便。

組件豐富

• 內(nèi)置element、dataV、echarts等優(yōu)秀開源的報表常用組件，滿足基本的設(shè)計需求。

自定義

• 設(shè)計器沒有想要的組件？自己動手，豐衣足食。詳細(xì)文檔介紹5分鐘可開發(fā)一個自己想要的組件。

五、技術(shù)選型

快速開始

在開發(fā)環(huán)境中項(xiàng)目中使用cola-designer。

開發(fā)環(huán)境

開發(fā)版本

推薦版本

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 +

項(xiàng)目結(jié)構(gòu)

使用技術(shù)：SpringBoot + SpringSecurity + Mysql + MyBatis-Plus + Redis + Vue + ElementUI

前端目錄：

├── dist                                   打包目錄
├── public
├── src
    ├── api                              后端接口
    ├── assets                           靜態(tài)資源
    ├── components                       組件目錄
        ├── gallery.vue                      圖庫組件
        ├── option.js                        組件可配置項(xiàng)配置
        ├── registerCpt.js                   自定義組件配置
        ├── registerOption.js                自定義組件屬性配置
    ├── router
    ├── utils
    ├── views
        ├── designer                            設(shè)計器
        ├── manage                              管理端
        ├── preview                             預(yù)覽/訪問頁
├── env.js                           環(huán)境配置
├── LICENSE
├── README.md

后端目錄：

├── sql             數(shù)據(jù)庫腳本
├── src
├── pom.xml                        

運(yùn)行前端

1. 拉取項(xiàng)目
2. 切換到前端項(xiàng)目目錄執(zhí)行：yarn install
3. install完成后執(zhí)行：yarn run dev

注意事項(xiàng)

• 運(yùn)行后端項(xiàng)目前需自行創(chuàng)建數(shù)據(jù)庫并運(yùn)行數(shù)據(jù)庫腳本，同時修改application.yml相關(guān)配置
• 后端項(xiàng)目默認(rèn)端口：6882
• 前端配置詳見 vue.config.js

注意事項(xiàng)：項(xiàng)目默認(rèn)使用接口模式，完整功能需要連接后端程序，若只想體驗(yàn)設(shè)計器部分可將env.js中active改為preview（本地緩存模式），然后訪問http://localhost:8009/#/design ，本地緩存模式暫時不能使用圖片上傳

六、源碼地址

cola-designer: 基于vue2.0，拖拽式網(wǎng)站設(shè)計器、大屏設(shè)計器文章來源地址http://www.zghlxwxcb.cn/news/detail-738335.html

到了這里，關(guān)于[開源]基于Vue的拖拽式數(shù)據(jù)報表設(shè)計器，為簡化開發(fā)提高效率而生的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！