toy-maker

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

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

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

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

预览地址

toy-maker

安装入门

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 '非法请求'
        }
};

lzq920/toy-maker

toy-maker

预览地址

安装入门

腾讯云 CloudBase 配置

主要功能介绍