推荐!表单&试卷零代码搭建平台技术详解

徐小夕介绍了橙子试卷——一个新开发的轻量级零代码平台，旨在帮助不懂技术的用户通过可视化拖拽方式创建表单和试卷。本文分享了橙子试卷的技术架构和实现，对零代码、低代码平台或表单引擎技术感兴趣的读者可能会获得灵感。

技术栈

橙子试卷采用了Vue3作为前端框架，并使用了Vite、Typescript、arco-design、pinia、axios、json schema、xijs、vue-echarts、koa2和koa-jwt等技术。这些技术栈的选择基于对逻辑驱动应用的便捷性和对函数式编程的支持。后端可以根据需要用Java、Go或Python等语言替换。

技术架构

核心设计包括：可扩展的组件库系统、灵活的拖拽搭建模式、统一标准的DSL数据结构和数据规范以及可插拔的分析管理系统。这些设计目的是为了构建一个低成本且可扩展的组件库，快速适用于业务场景。

具体功能实现

1. 构造可扩展的组件库系统，允许用户根据默认属性来个性化配置组件样式，减少二次开发成本。
2. 采用拖拽排序实现页面搭建，支持组件复制和删除，使用vuedraggable进行实现。
3. 定义了统一的DSL数据结构，包括组件元数据、位置、样式、事件/交互和埋点定义，使组件管理和维护更高效。
4. 提供了一套完整的数据收集能力，支持自动打分机制和基于自身规则的二次开发。

应用场景和价值

橙子试卷的主要价值在于为中小企业或个人提供一套低成本的零代码表单搭建解决方案，以及通过最佳实践轻松扩展更多搭建业务场景。此外，它还能帮助积累和沉淀技术资产，并有潜力结合AIGC创建更强大的生产力工具。