Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >表单&试卷零代码搭建平台正式上线,支持源码部署

表单&试卷零代码搭建平台正式上线,支持源码部署

作者头像
徐小夕
发布于 2024-07-04 04:52:31
发布于 2024-07-04 04:52:31
22900
代码可运行
举报
文章被收录于专栏:趣谈前端趣谈前端
运行总次数:0
代码可运行

hi, 大家好, 我是徐小夕.

之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:

  • H5-Dooring(页面可视化搭建平台)
  • V6.Dooring(可视化大屏搭建平台)
  • 橙子6试卷(表单搭建引擎)
  • Nocode/WEP 文档知识引擎

最近终于设计出了橙子试卷商业模式的最终方案, 我会在接下来的内容中和大家介绍。

橙子试卷主要用于可视化的搭建表单, 试卷等场景, 让不懂技术的人也能拖拽式创建自己的表单和试卷.

上线测试了2个月,目前已经有500+用户使用,也做了很多使用的表单问卷模板:

为了让更多个体和中小企业能拥有自己的表单问卷搭建系统,我最近设计了私有化部署服务,提供源码授权 + 技术培训,价格定位在4999元,如果感兴趣可以在文章末尾联系交流。

接下来和大家分享一下橙子试卷的技术架构和技术实现, 如果你也在调研零代码, 低代码, 或者表单引擎等技术, 那么这篇文章也许可以给你带来一些灵感.

体验地址: https://turntip.cn/form-engine

文末会附技术交流wx, 感兴趣的朋友可以加入交流讨论.

技术栈

之前在开发 H5-dooring 零代码搭建平台时我采用的是React技术栈, 因为用 react 写复杂逻辑会更顺手, 好在 vue3 也支持了函数式的写法, 也提供了 hooks 机制, 让我们写逻辑驱动的应用更加方便, 所以橙子试卷 采用了国内最流行的 vue3 作为前端框架. 具体技术栈如下:

  • Vue3 前端框架
  • Vite 工程化工具
  • Typescript 类型加强
  • arco-design 精美的前端UI
  • pinia 状态管理库
  • axios 请求库
  • json schema 数据存储规范
  • xijs 面向业务场景的js工具库
  • vue-echarts 数据分析图表库
  • koa2 服务端数据支持
  • koa-jwt 基于koa封装的jwt鉴权库

当然还有一些第三方组件这里就不一一介绍了. 我们的核心在于从零完整设计一套 MVP 的零代码搭建引擎, 所以后端部分, 大家可以替换成自己熟悉的 java, go, python 等语言.

技术架构

因为零代码表单引擎设计的核心是如何构造一套低成本且可扩展的组件库, 并快速应用到实际业务场景, 所以设计的核心就包括如下部分:

  • 可扩展的组件库系统
  • 灵活的拖拽搭建模式
  • 统一标准的DSL数据结构和数据规范
  • 一套可插拔的分析管理系统

接下来我会详细介绍这几块的技术实现, 当然实现思想和技术栈无关, 我们仍然可以把它应用到不同的技术体系中.

具体功能实现

1. 构造可扩展的组件库系统

因为我们的搭建场景是问卷, 试卷, 微页面, 所以组件库会围绕表单来扩展, 比如常用的:

  • 文本, 图片
  • 单选, 多选, 图片选择
  • 下拉框
  • 文本输入框
  • 文件上传
  • 电子签名
  • 评分

等等, 这些组件当然不能满足所有客户的业务场景, 所以我们要设计一种可扩展组件库, 并且开发成本较低的方案.

我们可以参考常见的低代码平台的设计思路:

简言之就是把核心UI和逻辑作为组件的主文件, 同时暴露标准的 的 可配置属性和可配置逻辑.

之所以强调“标准”, 是为了让不同组件能共用一套属性配置引擎, 从而让组件二开的成本大大降低(专注于组件的开发, 而不是配置的兼容).

其次为了尽可能让组件的配置更灵活, 我们需要提供一套标准的组件默认属性, 让用户可以根据默认属性来配置自己的个性化的样式, 那么我们的组件就需要这么来设计:

这里以橙子试卷文本组件给大家举个例子.

文本组件的主文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div
    :class="{
      text: true,
      justify: editorStore.data[index].align == 'justify',
      [editorStore.data[index].animation]: true,
    }"
    :style="{
      paddingTop: editorStore.data[index].padding[0] + 'px',
      paddingRight: editorStore.data[index].padding[1] + 'px',
      paddingBottom: editorStore.data[index].padding[2] + 'px',
      paddingLeft: editorStore.data[index].padding[3] + 'px',
      color: editorStore.data[index].titleColor,
      fontSize: editorStore.data[index].titleSize + 'px',
      fontWeight: editorStore.data[index].titleWeight,
      textAlign: editorStore.data[index].align,
      animationDelay: editorStore.data[index].delay,
      animationIterationCount: editorStore.data[index].number,
      cursor: 'pointer',
    }"
    @click="jump(editorStore.data[index].link)"
  >
    {{ editorStore.data[index].titleText }}
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from "@/store";

const editorStore = useEditorStore();

const jump = (link: string) => {
  window.location.href = link;
};

defineProps(["index"]);
</script>

文本组件的可配置属性:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default class Text {
    component: TextPropType;
    constructor(id: string) {
        this.component = {
            component: 'text',
            type:'editor.text',
            id,
            check: true,
            titleText: 'https://turntip.cn/form-engine',
            titleColor: 'black',
            titleSize:16,
            titleWeight:'500',
            padding: [0, 0, 0, 0],
            margin: [10, 10, 10, 10],
            animation:'',
            direction: 'center',
            link:'https://turntip.cn/formManager',
            delay:2,
            attrbite: [
                {
                    name: 'editor.titleText',
                    field: 'titleText',
                    component: 'textarea'
                },
                {
                    name: 'editor.padding',
                    field: 'padding',
                    component: "padding",
                    props: {
                        min: 0,
                        type:'padding'
                    }
                },
                {
                    name: 'editor.margin',
                    field: 'margin',
                    component: "padding",
                    props: {
                        min: 0,
                        type:'margin'
                    }
                },
            ]
        }
    }

}

通过这种方式, 我们只需要根据业务需求实现自己的组件, 编写组件可配置的属性json, 即可通过配置引擎来动态生成组件的可编辑面板, 从而让非技术人员轻松编辑组件.

通过以上的方式, 我们可以轻松开发各种自定义的组件, 提供给用户使用:

2. 灵活的拖拽搭建模式

对于表单场景, 我们不需要特别复杂的布局交互, 所以这里我才用拖拽排序来实现页面的搭建, 同时支持组件快捷复制和删除.

目前 vue3 的比较成熟的拖拽组件有:

  • vuedraggable
  • vue3-draggable-resizable

这里选择vuedraggable 来实现拖拽排序, 并对其进行上层封装, 实现体验更好的组件搭建排序效果.

当然还有很多优秀的拖拽库, 如果大家对vue3-draggable-resizable 感兴趣, 也可以试试, 它支持网格布局和自由布局, 可以实现更自由的布局搭建效果:

3. 统一标准的DSL数据结构和数据规范

在组件库设计中我们为了统一管理和维护组件和组件的属性配置, 需要定义统一化的 DSL 结构, 这个结构包含了组件的如下信息:

  • 组件元数据
  • 位置信息
  • 样式信息
  • 事件 / 交互
  • 埋点定义(高级配置)

后4个都好理解, 这里介绍一下组件元数据, 它的价值在于定义组件的基本信息:

  • 组件类型
  • 组件名称
  • 图标
  • 初始化数据
  • 组件路径 (高级, 可选)
  • 状态 / 版本 (高级, 可选)

通过对 元信息 的定义, 我们可以很方便的建立更系统的组件库, 比如支持组件分类, 组件版本切换, 组件加载(通过路径元信息来加载远程组件).

所以我们需要尽可能规范统一的定义组件的通用规则和自定义规范, 以便让不同组件都遵行统一的规则来实现零代码搭建引擎的设计.

这里还是以橙子试卷为例子, 来介绍一下我们统一的DSL:

首先我们看看文本的元信息:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    name: 'editor.text', // 组件名称
    component: IconLanguage, // 组件图标
    type: 'text' // 组件类型
}

这是一个简单的元信息, 它可以帮我们快速识别组件, 并为画布提供组件更具体的渲染信息, 不同组件都通过统一的配置来定义, 可以让我们的渲染器更加高效的渲染组件, 并降低组件维护成本.

在介绍组件的内容中我已经介绍了组件接受的 json 配置结构, 这里分享一个由多个组件组成的完整页面的 DSL 结构和实际代码:

案例代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "id": "5137706621235472",
    "title": "2024前端笔试题",
    "author": "徐小夕",
    "desc": "页面描述",
    "icon": "",
    "bgColor": "",
    "bgImage": "",
    "isLogin": false,
    "data": [
        {
            "component": "sign",
            "type": "editor.sign",
            "id": "JelhSP",
            "check": false,
            "titleText": "请在此处签名",
            "titleColor": "black",
            "margin": [
                10,
                10,
                10,
                10
            ],
            "limit": 1,
            "btnColor": "#165DFF",
            "titleSize": 15,
            "titleWeight": "500",
            "analysis": ""
        },
        {
            "component": "math",
            "type": "editor.math",
            "id": "3-U9XA",
            "check": true,
            "titleText": "数学题目:5^9>\\pi",
            "titleColor": "#D41C1C",
            "options": [
                {
                    "label": "A",
                    "value": "苹果"
                },
                {
                    "label": "B",
                    "value": "香蕉"
                }
            ],
            "symbol": "A,B,C...",
            "direction": "horizontal",
            "optionsColor": "black",
            "analysis": "",
            "auto": "",
            "margin": [
                10,
                10,
                10,
                10
            ],
            "scores": 0,
            "required": false
        },
    ]
}

有了以上的统一 DSL 结构, 我们就可以轻松通过 JSON 来渲染页面, 同时也有更多的想象空间, 比如:

  • 通过DSL来实现跨端渲染搭建
  • 通过DSL来实现多人协作共享
  • 通过DSL来实现A出码能力
  • 通过AI学习DSL来批量自动化生产页面

4. 可插拔的分析管理系统

一个可视化零代码解决方案一定包含完整的用户使用链路, 即从搭建到投放再到信息收集的完整分析链路.

当然不同的公司业务分析需求不同, 所以需要支持纯粹的数据收集和流转, 以便供不同业务使用.

目前橙子试卷提供了一套完整的数据收集能力, 对于试卷场景, 也提供了自动打分机制, 可以一键分析数据情况:

当然这都是可以基于自身规则自己二次开发的, 橙子试卷 只是提供了一套案例参考.

应用场景和价值

  • 帮助中小企业或者个体提供一套低成本零代码表单搭建解决方案,且不止于表单/试卷
  • 基于橙子试卷的最佳实践, 轻松扩展出更多的搭建业务场景
  • 开箱即用的组件和模版管理最佳实践, 积累和沉淀内部技术资产
  • 结合AIGC, 创造更强大的生产力工具

体验地址: https://turntip.cn/form-engine

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-07-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 趣谈前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐!表单&试卷零代码搭建平台技术详解
今天就来和大家分享一下橙子试卷的技术架构和技术实现, 如果你也在调研零代码, 低代码, 或者表单引擎等技术, 那么这篇文章也许可以给你带来一些灵感.
徐小夕
2024/02/27
2130
推荐!表单&试卷零代码搭建平台技术详解
基于mathlive将数学公式编辑器集成到可视化搭建平台
hi, 大家好, 我是徐小夕. 上篇文章和大家分享了刚开发完的可视化搭建产品——橙子试卷. 收到了很多用户的反馈和建议, 其中有一个建议我觉得非常有意思, 所以花了一天时间研究和实现了这个用户需求.
徐小夕
2024/02/06
1.2K0
基于mathlive将数学公式编辑器集成到可视化搭建平台
新产品!可视化试卷搭建平台
hi, 大家好, 我是徐小夕. 之前和大家分享了很多可视化低代码和零代码的技术实现和产品设计思路, 也和大家分享了 H5-Dooring 零代码搭建平台的技术实现和未来规划, 今天继续和大家分享一下我们的新产品——橙子试卷.
徐小夕
2024/02/06
4680
新产品!可视化试卷搭建平台
如何评价Dooring低代码/零代码搭建平台?
大家好, 我是徐小夕, 之前一直在分享可视化低代码的一些实践, 围绕 H5-Dooring 零代码搭建平台也输出了很多技术文章, 最近2.7.0 版本也顺利迭代完成, 这里详细分享一下 H5-Dooring 无代码搭建平台技术方案.
徐小夕
2022/09/27
1.2K0
如何评价Dooring低代码/零代码搭建平台?
零代码可视化+AI的一些探索和实践
嗨,大家好,我是徐小夕。之前和大家分享了很多可视化,零代码的技术实践,今天继续做一个系统性的复盘,聊聊这100天,Dooring零代码都做了些什么。
徐小夕
2024/04/26
2050
零代码可视化+AI的一些探索和实践
用第三方拖拽库快速撸一个可视化搭建平台
之前一直在研究可视化和零代码搭建相关产品和技术, 最近逛 github 的时候发现一个比较有意思的拖拽开源组件, 就用 vue3 简单撸了一个拖拽搭建的小demo, 供大家参考学习.
徐小夕
2023/12/11
6300
用第三方拖拽库快速撸一个可视化搭建平台
H5-Dooring零代码搭建平台指南
嗨, 大家好, 我是徐小夕, H5-Dooring零代码搭建平台上线已经接近2年, 有很多用户提供了非常宝贵的建议和优化方向, 今天我就从产品使用的角度和大家更全面的介绍一下H5-Dooring.
徐小夕
2022/05/23
2K0
H5-Dooring零代码搭建平台指南
没灵感了,就做一个图表可视化编辑器玩玩吧
之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:
徐小夕
2024/07/04
1040
没灵感了,就做一个图表可视化编辑器玩玩吧
从零开发可视化大屏制作平台(技术拆解版)
目前很多企业或多或少的面临“信息孤岛”问题,各个系统平台之间的数据无法实现互通共享,难以实现一体化的数据分析和实时呈现。
徐小夕
2024/03/18
7110
从零开发可视化大屏制作平台(技术拆解版)
猿创征文|低代码开发15个高效开源项目推荐
低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法,使具有不同经验水平的开发人员可以通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。具体什么是低代码可以查看我这篇博客:什么是低代码 本文主要推荐15个优质的低代码开源项目。
共饮一杯无
2022/11/28
4.3K0
猿创征文|低代码开发15个高效开源项目推荐
tmagic - editor:大厂开源项目,零代码/低代码页面可视化编辑的利器,多端统一方案揭秘!如何用一套代码支持H5/PC,牛牛牛~~~
嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
小华同学ai
2025/02/17
6520
tmagic - editor:大厂开源项目,零代码/低代码页面可视化编辑的利器,多端统一方案揭秘!如何用一套代码支持H5/PC,牛牛牛~~~
Dooring-Saas低代码技术详解
hello, 大家好, 我是徐小夕, 今天和大家分享一下基于 H5-Dooring零代码 开发的全新零代码搭建平台 Dooring-Saas 的技术架构和设计实现思路.
徐小夕
2023/09/18
3710
Dooring-Saas低代码技术详解
从零设计可视化大屏搭建引擎
几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章, 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示, 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题, 详细介绍一下实现原理。
徐小夕
2022/02/09
1.4K0
从零设计可视化大屏搭建引擎
AI+可视化文档引擎,持续更新!
之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:
徐小夕
2024/06/04
1260
AI+可视化文档引擎,持续更新!
推荐20个开源的前端低代码项目
来源:低代码一哥本文约2500字,建议阅读9分钟本文分享几个值得学习和使用的前端低代码开源项目,更深入地了解什么是低代码。 近几年,在技术领域低代码是比较热门的话题,比如阿里云推出了钉钉低代码,通过简单的拖拽、配置,即可完成业务应用的搭建,腾讯云则是推出了微搭,通过行业化模板、拖放式组件和可视化配置快速构建多端应用。 低代码是基于可视化和模型驱动理念,结合云原生与多端体验技术,它能够在多数业务场景下实现大幅度的提效降本,为专业开发者提供了一种全新的高生产力开发范式。下面就来分享几个值得学习和使用的前端低代码
数据派THU
2023/03/29
4.9K0
推荐20个开源的前端低代码项目
从零开发可视化大屏制作平台
几个月前开源的H5页面制作平台H5-Dooring 收到了很多热心的反馈和交流, 顺着笔者之前的规划, 我们又做了一款可视化大屏编辑器V6.Dooring. 接下来笔者就来带大家一起看看我们的方案设计和技术实现.
徐小夕
2021/03/12
2.1K0
从零开发可视化大屏制作平台
Nocode/Doc,可视化+ 零代码打造下一代文件编辑器
hi,大家好,我是徐小夕,之前和大家分享了《用零代码的思维设计文档引擎》的内容,承诺大家在10号上线内测版可视化文档编辑器——Nocode/Doc。 今天如约而至,接下来就和大家分享一下可视化文档引擎的最新内容和技术理念。
徐小夕
2024/04/14
1860
Nocode/Doc,可视化+ 零代码打造下一代文件编辑器
建议收藏!10个前端低代码开源项目
低代码是基于可视化和模型驱动理念,结合云原生与多端体验技术,可以通过简单的拖拽、配置,即可完成业务应用的搭建。
程序员老鱼
2023/08/10
2.3K0
建议收藏!10个前端低代码开源项目
next-admin支持AI问答模块,完全开源!
hello,大家好,我是徐小夕。之前和大家分享了很多可视化,零代码和前端工程化的最佳实践,今天继续分享一下最近开源的 Next-Admin 的最新更新。
徐小夕
2024/05/14
2210
next-admin支持AI问答模块,完全开源!
从0到1设计通用数据大屏搭建平台
一直以来,许多产品平台都在尝试通过可视化搭建的手段来降低 GUI 应用的研发门槛,提高生产效率。随着我们业务的发展,数据建设的完善,用户对于数据可视化的诉求也日益增多,而数据大屏是数据可视化的其中一种展示方式,它作为大数据展示媒介的一种,被广泛运用于各种会展、公司展厅、发布会等。
2020labs小助手
2022/10/17
3.5K0
推荐阅读
相关推荐
推荐!表单&试卷零代码搭建平台技术详解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验