Git Product home page Git Product logo

toy-maker's Introduction

toy-maker

基于 Vue3.x 编写的可拖拽落地页工具生成工具,可直接部署到 GitHub Pages 服务或者下载静态文件到本地进行部署

主要使用 Vue3.x Vue-Router4.x Vuex4.x Element-Plus Tailwindcss 等库开发

可视化操作,拖拽生成页面,导出HTML文件

toy-maker 是一个纯前端项目,数据采用腾讯云CloudBase存储

预览地址

toy-maker image image image

安装入门

git clone https://github.com/lzq920/toy-maker.git
cd toy-maker
npm install  //安装依赖包
npm run generator //生成落地页组件包
npm run serve //本地开发预览
npm run build //构建生产环境资源

腾讯云 CloudBase 配置

  • 数据库集合

    • toy-maker-form-data 所有用户可读,仅管理员可写 表单收集表
    • toy-maker-pages 仅创建者及管理员可读写 落地页数据表
    • toy-maker-publish 仅创建者及管理员可读写 发布记录表
  • 安全域名配置

    • toy-maker 项目部署的域名
    • toy-maker 落地页发布的域名
  • 云函数

    • getFormList.js 获取所有的表单数据
        'use strict';
        const cloudbase = require("@cloudbase/node-sdk");
        const app = cloudbase.init({
        env: cloudbase.SYMBOL_CURRENT_ENV
        });
        const db = app.database();
        const $ = db.command;
        exports.main = async (event, context) => {
                const { userInfo } = await app.auth().getEndUserInfo();
                const { openId, appId, uid, customUserId } = userInfo;
                const res = await db.collection('toy-maker-pages').aggregate().match({
                    _openid: uid
                }).lookup({
                    from: "toy-maker-form-data",
                    localField: "_id",
                    foreignField: "pageId",
                    as: "formList"
                }).project({
                    allItems: 0,
                    canvasSetting: 0,
                    dataSource: 0,
                }).end()
                return res.data;
        };
    • submit.js 表单提交 (需要配置 http 服务,并修改 src/components/blocks/form/index.vue 中的提交地址)
      'use strict';
      const cloudbase = require("@cloudbase/node-sdk");
      const app = cloudbase.init({
      env: cloudbase.SYMBOL_CURRENT_ENV
      });
      const db = app.database();
      exports.main = async (event, context) => {
              if (event.httpMethod === "POST") {
                  const res = await db.collection("toy-maker-form-data").add(JSON.parse(event.body))
                  return res
              } else {
                  return '非法请求'
              }
      };

主要功能介绍

  • 元素自由拖拽、放大、缩小
  • 可添加图片、单行文本、多行文本、视频、音频、矩形、图表、表单、二维码、Lottie动画组件(更多组件拓展中)
  • 组件自动吸附,实时参考线
  • 撤销、重做 ( Ctrl + Z / Ctrl + Y )
  • 组件复制、粘贴 ( Ctrl + C / Ctrl + V )
  • 组件删除 ( Backspace / Delete )
  • 组件层级上移下移( Alt + ↑ / Alt + ↓ )
  • 组件预览 (Ctrl + P)
  • 画布大小自适应组件位置
  • 上传 PSD 文件自动解析
  • 默认配置数据源, 可通过 #{{path.path}}默认填充指定数据
  • 一键导出 HTML 文件
  • 一键发布到Github Pages
  • 接入第三方图库以及视频库
  • 组件动画
  • 落地页发布记录
  • 落地页表单数据收集

toy-maker's People

Contributors

lzq920 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

toy-maker's Issues

关于本地储存方案

你好,我注意到本项目中一开始使用了 GoDB,但后来切换为了 jsstore,因此想了解一下这么做的原因,从而帮助我改进 GoDB,谢谢!

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.