Vue基于JSON Schema生成表单和数据校验

梦里梦外; 2023-01-22 02:50 14阅读 0赞

基于 `Vue.js`、`JSON Schema` 和 `ElementUi` 快速生成表单，支持自定义组件，支持自定义错误提示配置和校验规则...

*  源码：[vue-json-schema-form github][]
 *  演示表单：[vue-json-schema-form Demo][]

生成表单如下图：

![20210517113506679.gif][]

## JSON Schema 是什么 ##

`JSON Schema` 定义了一套规范用于描述你的数据格式，包含对数据结构的描述和约束等。各种开发语言都有相应的类库实现对schema的校验支持。

一个 `JSON Schema` 的例子：

{
        "$schema": "http://json-schema.org/draft-07/schema#",
        "type": "object",
        "required": [
            "userName"
        ],
        "properties": {
            "userName": {
                "type": "string",
                "title": "UserName",
                "default": "Name"
            },
            "age": {
                "type": "integer",
                "title": "Age",
                "maximum": 80,
                "minimum": 16
            },
            "bio": {
                "type": "string",
                "title": "Bio",
                "minLength": 10
            }
        },
        "additionalProperties": false
    }

如上 `schema` 描述了一个 `object`

*  包含 `userName`、`age`、`bio` 三个属性
 *  `userName` 为 `string` 类型且必须定义
 *  `age` 为 `integer` 类型且在 `16` 到 `80` 之间
 *  `bio` 为不小于 `10` 个长度的 `string`

> √ 正确的例子

{
        userName: 'name',
        age: 18
    }

> × 错误的例子 - ( `bio` 长度不小于10个)

{
        userName: 'name',
        age: 18,
        bio: '嘿嘿嘿'
    }

了解更多可以查看JSON Schema官方文档：[https://json-schema.org/under...][https_json-schema.org_under...]

## JSON Schema的表单生成 ##

通过 `JSON Schema` 生成form表单，数据校验校验基于 `ajv`，只需要一个必须的 `schema` 参数即可生成完整可校验的form表单。

*  JSON Schema `title` 属性作为 form表单的标题
 *  JSON Schema `description` 属性作为表单的描述
 *  可通过 `uiSchema` 配置个性化的视图显示，也可以直接配置在 `JSON Schema` 中
 *  可通过 `errorSchema` 配置表单校验错误文案，也可以直接配置在 `JSON Schema` 或者 `uiSchema` 中
 *  支持多语言
 *  支持自定义组件，自定义样式
 *  ...

> 详细的可以查看上方 github 链接

表单渲染流程大致如下图，基于组件递归的形式，逐级渲染

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70][]

一个简单的用户信息录入例子：

<template>
        <vue-form
            v-model="formData"
            :schema="schema"
        >
        </vue-form>
    </template>
    
    <script>
    import VueForm from '@lljj/vue-json-schema-form';
    
    export default {
        name: 'Demo',
        components: {
            VueForm
        },
        data() {
            return {
                formData: {},
                schema: {
                    type: 'object',
                    required: [
                        'userName',
                        'age',
                    ],
                    properties: {
                        userName: {
                            type: 'string',
                            title: '用户名',
                            default: 'Liu.Jun',
                        },
                        age: {
                            type: 'number',
                            title: '年龄'
                        }
                    }
                }
            };
        }
    };
    </script>

即可生成如下表单：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1][]

## JSON Schema表单所解决的问题 ##

遵循 `JSON Schema` 规范，可以很方便的做到跨端数据校验，这在处理一些前端可视化编辑的场景是非常有用的。

比如：

> 1.  在我们做一个可视化的活动编辑页时，当你在新增一个活动版块时，需要 `板块配置信息录入`、`板块预览组件`、`服务端配合做数据校验` 这三个部分。
> 2.  开发者重点关注 `模块预览组件` 也就是新增的模块长什么样，这里使用 `JSON Schema` 生成表单可以很好的解决 `板块配置信息录入`、`服务端配合做数据校验` 这两个问题。
> 3.  新增版块定义好 `JSON Schema` 数据即可生成配置表单，同时把 `JSON Schema` 给到后端系统即可做到服务端数据校验（这一步可以在构建或者发布流程环节来推给后端）

## 最后 ##

开发这个的目的是为了做一套可视化店铺装修系统，在考虑对页面数据配置和校验过于繁琐如何简化时所采用的方案，但并未找到太合适的开源库，所以就自己写了一个。

另外我在 github 项目仓库中包含了一个开箱即用的店铺装修可视化编辑的展示页，演示效果：[vue-json-schema-form店铺装修编辑器][vue-json-schema-form]

原文：[https://segmentfault.com/a/1190000025168152?utm\_source=tag-newest][https_segmentfault.com_a_1190000025168152_utm_source_tag-newest]

[vue-json-schema-form github]: https://github.com/lljj-x/vue-json-schema-form/
[vue-json-schema-form Demo]: https://form.lljj.me/
[20210517113506679.gif]: /images/20221020/e5b635ed76254a32be278f80359076b5.png
[https_json-schema.org_under...]: https://json-schema.org/understanding-json-schema/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70]: /images/20221020/6c1acdba7fff4de3a6e9772138067d0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZXJyeV92aWNlbnQ_size_16_color_FFFFFF_t_70 1]: /images/20221020/fca23f71eb984782a6b68c7f695afd58.png
[vue-json-schema-form]: https://form.lljj.me/vue-editor.html
[https_segmentfault.com_a_1190000025168152_utm_source_tag-newest]: https://segmentfault.com/a/1190000025168152?utm_source=tag-newest