推薦！表單&試卷零代碼搭建平臺技術詳解
對于可視化的搭建表單，試卷等場景，讓不懂技術的人也能拖拽式創建自己的表單和試卷。
圖片
今天就來和大家分享一下橙子試卷的技術架構和技術實現, 如果你也在調研零代碼, 低代碼, 或者表單引擎等技術, 那么這篇文章也許可以給你帶來一些靈感。
圖片
體驗地址: https://turntip.cn/form-engine
文末會附技術交流群, 感興趣的朋友可以加入交流討論。
技術棧
之前在開發 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和邏輯作為組件的主文件, 同時暴露標準的可配置屬性和可配置邏輯。
之所以強調“標準”, 是為了讓不同組件能共用一套屬性配置引擎, 從而讓組件二開的成本大大降低(專注于組件的開發, 而不是配置的兼容)。
圖片
其次為了盡可能讓組件的配置更靈活, 我們需要提供一套標準的組件默認屬性, 讓用戶可以根據默認屬性來配置自己的個性化的樣式, 那么我們的組件就需要這么來設計:
圖片
這里以橙子試卷的文本組件給大家舉個例子。
文本組件的主文件：
<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'
}
},
]
}
}
}通過這種方式, 我們只需要根據業務需求實現自己的組件, 編寫組件可配置的屬性json, 即可通過配置引擎來動態生成組件的可編輯面板, 從而讓非技術人員輕松編輯組件：
通過以上的方式, 我們可以輕松開發各種自定義的組件, 提供給用戶使用：
圖片
2. 靈活的拖拽搭建模式
圖片
對于表單場景, 我們不需要特別復雜的布局交互, 所以這里我才用拖拽排序來實現頁面的搭建, 同時支持組件快捷復制和刪除。
目前 vue3 的比較成熟的拖拽組件有：
- vuedraggable
- vue3-draggable-resizable
這里選擇vuedraggable 來實現拖拽排序, 并對其進行上層封裝, 實現體驗更好的組件搭建排序效果。
當然還有很多優秀的拖拽庫, 如果大家對vue3-draggable-resizable 感興趣, 也可以試試, 它支持網格布局和自由布局, 可以實現更自由的布局搭建效果:
圖片
3. 統一標準的DSL數據結構和數據規范
在組件庫設計中我們為了統一管理和維護組件和組件的屬性配置, 需要定義統一化的 DSL 結構, 這個結構包含了組件的如下信息：
- 組件元數據
- 位置信息
- 樣式信息
- 事件 / 交互
- 埋點定義(高級配置)
后4個都好理解, 這里介紹一下組件元數據, 它的價值在于定義組件的基本信息：
- 組件類型
- 組件名稱
- 圖標
- 初始化數據
- 組件路徑 (高級, 可選)
- 狀態 / 版本 (高級, 可選)
通過對 元信息 的定義, 我們可以很方便的建立更系統的組件庫, 比如支持組件分類, 組件版本切換, 組件加載(通過路徑元信息來加載遠程組件)。
所以我們需要盡可能規范統一的定義組件的通用規則和自定義規范, 以便讓不同組件都遵行統一的規則來實現零代碼搭建引擎的設計。
這里還是以橙子試卷為例子, 來介紹一下我們統一的DSL:
圖片
首先我們看看文本的元信息：
這是一個簡單的元信息, 它可以幫我們快速識別組件, 并為畫布提供組件更具體的渲染信息, 不同組件都通過統一的配置來定義, 可以讓我們的渲染器更加高效的渲染組件, 并降低組件維護成本。
在介紹組件的內容中我已經介紹了組件接受的 json 配置結構, 這里分享一個由多個組件組成的完整頁面的 DSL 結構和實際代碼：
圖片
案例代碼：
有了以上的統一 DSL 結構, 我們就可以輕松通過 JSON 來渲染頁面, 同時也有更多的想象空間, 比如:
- 通過DSL來實現跨端渲染搭建
- 通過DSL來實現多人協作共享
- 通過DSL來實現A出碼能力
- 通過AI學習DSL來批量自動化生產頁面
4. 可插拔的分析管理系統
一個可視化零代碼解決方案一定包含完整的用戶使用鏈路, 即從搭建到投放再到信息收集的完整分析鏈路。
圖片
當然不同的公司業務分析需求不同, 所以需要支持純粹的數據收集和流轉, 以便供不同業務使用。
目前橙子試卷提供了一套完整的數據收集能力, 對于試卷場景, 也提供了自動打分機制, 可以一鍵分析數據情況：
圖片
當然這都是可以基于自身規則自己二次開發的, 橙子試卷只是提供了一套案例參考。
應用場景和價值
- 幫助中小企業或者個體提供一套低成本零代碼表單搭建解決方案,且不止于表單/試卷
- 基于橙子試卷的最佳實踐, 輕松擴展出更多的搭建業務場景
- 開箱即用的組件和模版管理最佳實踐, 積累和沉淀內部技術資產
- 結合AIGC, 創造更強大的生產力工具
體驗地址: https://turntip.cn/form-engine
