Git Product home page Git Product logo

c317dataui's Introduction

前言

想快速实现可视化页面制作,在进行大量搜索后鲁班H5夸克H5 两个项目非常适合我的需求,可用在此项目基础上继续扩展;通过对比了两个项目技术栈,发现quarkH5更符合我的需求,因此在此基础上对项目进行二开。

主要技术和环境

| node v14.16.0 | npm 6.14.11 | vue @vue/cli 4.5.11 | koa 2.0 | echarts ^4.9.0 | elementUI ^2.4.5 | mongodb

请先查阅原项目

quarkH5演示地址:传送门

quarkH5掘金文章:Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

主要修改部分:

  1. 页面
    • 修改Logo和项目名
    • 修改页面主题颜色
    • 仅支持PC页面
    • 编辑页组件库修改为折叠菜单
    • 我的数据添加图片和数据上传部分
    • 实现不同组件数据实时修改、更换
    • 删除PSD部分
  2. 可视化组件
    • 封装 Echarts 大部分图表
    • 封装 DataV 大部分图表
    • 不同组件的配置
  3. 后端接口
    • 完善图片上传和删除接口
    • 完善模板发布
    • 实现数据源连接
      • Excel文件上传数据
      • 数据库连接上传数据(仅支持可远程访问MySQL、Oracle、Sql Server)
  4. 存在问题
    • 改为PC页面只是修改了页面的 width:1920px ,height:1080px,没有做适配;所以发布的页面可能跟编辑的页面有所不同
    • Excel实时编辑操作不友好

注:数据库连接部分是Java JDBC实现的,项目地址 ,该项目不启动,数据库连接部分会报404;启动后修改 client/api/modules/jdbc.js 文件下的service

项目预览:

首页 编辑页面 数据页面 模板库

c317dataui's People

Contributors

dxnima avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.