推薦！表單&試卷零代碼搭建平臺(tái)技術(shù)詳解

作者：徐小夕 2024-02-21 08:07:10

通過(guò)這種方式, 我們只需要根據(jù)業(yè)務(wù)需求實(shí)現(xiàn)自己的組件, 編寫(xiě)組件可配置的屬性json, 即可通過(guò)配置引擎來(lái)動(dòng)態(tài)生成組件的可編輯面板, 從而讓非技術(shù)人員輕松編輯組件.

對(duì)于可視化的搭建表單，試卷等場(chǎng)景，讓不懂技術(shù)的人也能拖拽式創(chuàng)建自己的表單和試卷。

圖片

今天就來(lái)和大家分享一下橙子試卷的技術(shù)架構(gòu)和技術(shù)實(shí)現(xiàn), 如果你也在調(diào)研零代碼, 低代碼, 或者表單引擎等技術(shù), 那么這篇文章也許可以給你帶來(lái)一些靈感。

圖片

體驗(yàn)地址: https://turntip.cn/form-engine

文末會(huì)附技術(shù)交流群, 感興趣的朋友可以加入交流討論。

技術(shù)棧

之前在開(kāi)發(fā) H5-dooring 零代碼搭建平臺(tái)時(shí)我采用的是React技術(shù)棧, 因?yàn)橛?nbsp;react 寫(xiě)復(fù)雜邏輯會(huì)更順手, 好在 vue3 也支持了函數(shù)式的寫(xiě)法, 也提供了 hooks 機(jī)制, 讓我們寫(xiě)邏輯驅(qū)動(dòng)的應(yīng)用更加方便, 所以橙子試卷采用了國(guó)內(nèi)最流行的 vue3 作為前端框架。具體技術(shù)棧如下:

Vue3 前端框架
Vite 工程化工具
Typescript 類(lèi)型加強(qiáng)
arco-design 精美的前端UI庫(kù)
pinia 狀態(tài)管理庫(kù)
axios 請(qǐng)求庫(kù)
json schema 數(shù)據(jù)存儲(chǔ)規(guī)范
xijs 面向業(yè)務(wù)場(chǎng)景的js工具庫(kù)
vue-echarts 數(shù)據(jù)分析圖表庫(kù)
koa2 服務(wù)端數(shù)據(jù)支持
koa-jwt 基于koa封裝的jwt鑒權(quán)庫(kù)

當(dāng)然還有一些第三方組件這里就不一一介紹了。我們的核心在于從零完整設(shè)計(jì)一套 MVP 的零代碼搭建引擎, 所以后端部分, 大家可以替換成自己熟悉的 Java, Go, Python 等語(yǔ)言。

技術(shù)架構(gòu)

圖片

因?yàn)榱愦a表單引擎設(shè)計(jì)的核心是如何構(gòu)造一套低成本且可擴(kuò)展的組件庫(kù), 并快速應(yīng)用到實(shí)際業(yè)務(wù)場(chǎng)景, 所以設(shè)計(jì)的核心就包括如下部分：

可擴(kuò)展的組件庫(kù)系統(tǒng)
靈活的拖拽搭建模式
統(tǒng)一標(biāo)準(zhǔn)的DSL數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)規(guī)范
一套可插拔的分析管理系統(tǒng)

接下來(lái)我會(huì)詳細(xì)介紹這幾塊的技術(shù)實(shí)現(xiàn), 當(dāng)然實(shí)現(xiàn)思想和技術(shù)棧無(wú)關(guān), 我們?nèi)匀豢梢园阉鼞?yīng)用到不同的技術(shù)體系中。

具體功能實(shí)現(xiàn)

1. 構(gòu)造可擴(kuò)展的組件庫(kù)系統(tǒng)

圖片

因?yàn)槲覀兊拇罱▓?chǎng)景是問(wèn)卷, 試卷, 微頁(yè)面, 所以組件庫(kù)會(huì)圍繞表單來(lái)擴(kuò)展, 比如常用的：

文本, 圖片
單選, 多選, 圖片選擇
下拉框
文本輸入框
文件上傳
電子簽名
評(píng)分

等等, 這些組件當(dāng)然不能滿(mǎn)足所有客戶(hù)的業(yè)務(wù)場(chǎng)景, 所以我們要設(shè)計(jì)一種可擴(kuò)展組件庫(kù), 并且開(kāi)發(fā)成本較低的方案。

我們可以參考常見(jiàn)的低代碼平臺(tái)的設(shè)計(jì)思路:

圖片

簡(jiǎn)言之就是把核心UI和邏輯作為組件的主文件, 同時(shí)暴露標(biāo)準(zhǔn)的可配置屬性和可配置邏輯。

之所以強(qiáng)調(diào)“標(biāo)準(zhǔn)”, 是為了讓不同組件能共用一套屬性配置引擎, 從而讓組件二開(kāi)的成本大大降低(專(zhuān)注于組件的開(kāi)發(fā), 而不是配置的兼容)。

圖片

其次為了盡可能讓組件的配置更靈活, 我們需要提供一套標(biāo)準(zhǔn)的組件默認(rèn)屬性, 讓用戶(hù)可以根據(jù)默認(rèn)屬性來(lái)配置自己的個(gè)性化的樣式, 那么我們的組件就需要這么來(lái)設(shè)計(jì):

圖片

這里以橙子試卷的文本組件給大家舉個(gè)例子。

文本組件的主文件：

<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>

文本組件的可配置屬性：

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'
                    }
                },
            ]
        }
    }

}

通過(guò)這種方式, 我們只需要根據(jù)業(yè)務(wù)需求實(shí)現(xiàn)自己的組件, 編寫(xiě)組件可配置的屬性json, 即可通過(guò)配置引擎來(lái)動(dòng)態(tài)生成組件的可編輯面板, 從而讓非技術(shù)人員輕松編輯組件：

通過(guò)以上的方式, 我們可以輕松開(kāi)發(fā)各種自定義的組件, 提供給用戶(hù)使用：

圖片