GoView 低代码数据可视化

纯前端 分支: master

👻 携带 后端 请求分支: master-fetch

📚 GoView 文档 地址:https://www.mtruning.club/

项目纯前端-Demo 地址:https://vue.mtruning.club/

项目带后端-Demo 地址:https://demo.mtruning.club/

Cloud IDE 代码在线预览地址:https://idegitee.com/dromara/go-view

🤯 后端项目看这里!

后端地址(社区实现,仅供参考):

JAVA https://gitee.com/MTrun/go-view-serve (当前使用)

.NET https://gitee.com/sun_xiang_yu/go-view-dotnet

NODE https://gitee.com/qwdingyu/led

Docker 镜像 https://gitee.com/AHEAD4/go-view-docker

GO-goframe https://gitee.com/bufanyun/go-view-server

GO-gin https://gitee.com/ls1990/go-view-serve

整体介绍

框架:基于 Vue3 框架编写,使用 hooks 写法抽离部分逻辑,使代码结构更加清晰;

类型:使用 TypeScript 进行类型约束,减少未知错误发生概率,可以大胆修改逻辑内容;

性能:多处性能优化,使用页面懒加载、组件动态注册、数据滚动加载等方式,提升页面渲染速度;

存储:拥有本地记忆,部分配置项采用 storage 存储本地,提升使用体验;

封装:项目进行了详细的工具类封装如:路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等

可视化:基于开源图表库ECharts 和 VChart 编写,具有丰富的图表类型和适配大屏的主题效果;

入选 NaiveUI 社区精选资源推荐:查看 NaiveUI 推荐列表

安装

推荐使用 pnpm 管理项目,并使用 nrm 切换到阿里镜像,整体安装步骤如下:

1. 安装 pnpm

bash 复制代码
npm install -g pnpm

2. 安装 nrm

bash 复制代码
npm install -g nrm

3. 使用 nrm 添加阿里镜像

bash 复制代码
nrm add taobao  https://registry.npmmirror.com/

4. nrm 查看镜像列表

bash 复制代码
nrm ls

5. nrm 应用对应镜像

bash 复制代码
nrm use taobao

安装项目依赖

推荐使用 pnpm

bash 复制代码
pnpm install

或 yarn

bash 复制代码
yarn install

启动

bash 复制代码
# 推荐使用 pnpm
pnpm dev
bash 复制代码
# 或 yarn
yarn dev

或 Makefile(需要自行配置系统环境,谷歌 make 命令环境搭建)

bash 复制代码
make dev

编译

bash 复制代码
# 推荐使用 pnpm
pnpm run build
bash 复制代码
# 或 yarn
yarn run build
bash 复制代码
# 或 Makefile
make dist

浏览器支持

开发和测试平台均在 Google 和最新版 EDGE 上完成,暂未测试 IE11 等其它浏览器,如有需求请自行测试与兼容。

Pro 部分功能展示

体验地址: https://ai.goviewlink.com/saas/




0_init_db.sql

bash 复制代码
DROP DATABASE IF EXISTS springbootv2;
CREATE DATABASE springbootv2;
CREATE USER 'root'@'%' identified by 'root';
GRANT ALL PRIVILEGES ON *.* to 'root'@'%';
FLUSH PRIVILEGES;

使用docker-compose.yml进行部署

bash 复制代码
version: '3.4'

# 公共日志配置
x-logging:
  &default-logging
  driver: "json-file"
  options:
    tag: "{{.ImageName}}/{{.Name}}/{{.ID}}"
    labels: "application.name,application.type"

# 公共资源限制配置
x-resource:
  &default-resource
  resources:
    limits:
      memory: 1536M

services:
  ui:
    image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/go-view:latest
    restart: always
    depends_on:
      - serve
    build:
      context: ./ui
    ports:
      - "7080:80"
    volumes:
      - ./ui/http.conf:/etc/nginx/conf.d/http.conf

  serve:
    image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/go-view-serve:latest
    restart: always
    depends_on:
      - db
    build:
      context: ./serve
    environment:
      SPRING_APPLICATION_JSON: '{"fuce":{"default-base-dir":"/data/files", "upload_img_url": "/static/file_upload/"}}'
      SPRING_DATASOURCE_DRUID_MASTER_URL: 'jdbc:mysql://db:3306/springbootv2?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false'
      SPRING_DATASOURCE_DRUID_MASTER_USERNAME: root
      SPRING_DATASOURCE_DRUID_MASTER_PASSWORD: root
    logging: *default-logging
    deploy: *default-resource

  db:
    image: registry.cn-hangzhou.aliyuncs.com/qiluo-images/mysql:5.7.44
    restart: always
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: springbootv2
    volumes:
      - /data/deploy/mysql:/var/lib/mysql
      - ./0_init_db.sql:/docker-entrypoint-initdb.d/0_init_db.sql
      - ./serve/src/doc/goview_v2.sql:/docker-entrypoint-initdb.d/goview_v2.sql
    logging: *default-logging
    deploy: *default-resource

使用发布到docker hub的镜像启动

​ 首先clone源代码后进入项目根目录,命令git clone --recursive https://gitee.com/AHEAD4/go-view-docker --recursive是必须的否则会缺少源代码。

​ 运行docker-compose pull,等待镜像拉取完成。

​ 运行docker-compose up -d,启动服务后进入后台运行。

​ 使用浏览器访问http://127.0.0.1:7080/

​ 账号密码均为admin

​ 注意:数据库未做持久化,如需持久化请挂载卷或宿主机目录(参考yml中被db备注的volume配置)

3.源码目录

​ ./ui/src 前端源代码子模块

​ ./serve/src 后台服务源代码子模块

4.基本使用

bash 复制代码
docker-compose up -d 启动并进入后台运行
docker-compose build 基于配置文件指定的Dockerfile构建镜像
docker-compose ps 查看当前容器运行状态
docker-compose logs -f 容器名或ID 持续查看当前容器日志
docker-compose stop 容器名或ID 停止容器
docker-compose stop 容器名或ID 启动容器
docker-compose restart 容器名或ID 重启容器
docker-compose down 停止全部服务并销毁全部容器

5.注意事项

经测试在以下环境可成功构建并启动

macOS 12.5 X64 && Docker Desktop 3.4.0 && Engine 20.10.22

Centos 7.5 X64 && Docker Engine 19.03.12

Windows11 X64 && Docker Desktop 4.16.2 && Engine 20.10.7

注意:使用docker构建前端镜像,node环境在编译时需要大量内存,如果使用windows或者mac的桌面平台建议将Resouces中的内存分配设定高于16G,Linux平台内存不可低于16G,否则可能会出现JavaScript heap out of memory异常

相关推荐
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
LabEx7 小时前
科研数据可视化核心技术:基于 AI 与 R 语言的热图、火山图及网络图绘制实践指南
人工智能·信息可视化·r语言·r语言绘图·乐备实·labex·科研数据绘图
2301_764441331 天前
Python管理咨询数据可视化实战:收入分布与顾问利用率双轴对比图表生成脚本
开发语言·python·信息可视化
杨超越luckly1 天前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店
晨曦5432102 天前
数据可视化中常用的图表类型 及其适用场景,涵盖基础到高级,帮助你根据数据类型和展示目标选择合适的图表:
信息可视化
小白学大数据2 天前
R语言爬虫实战:如何爬取分页链接并批量保存
开发语言·爬虫·信息可视化·r语言
kaikaile19953 天前
使用Python进行数据可视化的初学者指南
开发语言·python·信息可视化
数据饕餮5 天前
Python数据分析基础03:探索性数据分析
python·信息可视化·数据分析
wx_ywyy67986 天前
《推客分销系统架构设计:从零搭建高并发社交裂变引擎》
信息可视化·推客系统·推客小程序·推客系统开发·推客小程序开发·推客分销系统