前言

大家很多时候都会听到json这个词，json也就是数据的一种格式，在我们的日常编码中，后端接口数据的返回就是一种json格式，而json scheme也是一种数据格式。今天我们主要讲两点，json schema是什么，用的时候是怎样使用的。

json schema是什么

jsonschema是描述你的JSON数据格式；JSON模式（应用程序/模式+ JSON）有多种用途，其中之一就是实例验证。验证过程可以是交互式或非交互式的。 例如，应用程序可以使用JSON模式来构建用户界面使互动的内容生成除了用户输入检查或验证各种来源获取的数据。

其实说白了就是一种交互或者非交互的验证模式，用json schema可以在页面上构建出一套简单的验证实例来，用户可以进行静态页面上的一种验证，也可以用于与后端的一种交互验证。

使用方式

其实json scehma 在前端中的使用很简单，你可以看成是一种基于vue + elementui的一种组件，这种组件就是用来做简单的表单验证的。

官网地址：vue-json-schema-form.lljj.me/zh/guide/#准...

安装：

复制代码

npm install --save @lljj/vue-json-schema-form

复制代码

2.全局注册

javascript 复制代码

import VueForm from '@lljj/vue-json-schema-form';
import Vue from 'vue';

// 全局注册 或者可以在组件内注册
Vue.component('VueForm', VueForm);

3.简单的使用：

css 复制代码

<template>
    <vue-form
        v-model="formData"
        :ui-schema="uiSchema"
        :schema="schema"
    >
    </vue-form>
</template>

<script>
export default {
    name: 'Demo',
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName',
                    'age',
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名',
                        default: 'Liu.Jun',
                    },
                    age: {
                        type: 'number',
                        title: '年龄'
                    },
                    bio: {
                        type: 'string',
                        title: '签名',
                        minLength: 10,
                        default: '知道的越多、就知道的越少',
                    }
                }
            },
            uiSchema: {
                bio: {
                    'ui:options': {
                        placeholder: '请输入你的签名',
                        type: 'textarea',
                        rows: 1
                    }
                }
            }
        };
    }
};
</script>

页面如下：

可以看到VueForm是集合成的一个组件，这个时候，我们只需要通过绑定数据，就可以渲染出简单验证界面。

当然这里可能会有以下几个疑问：

1.取消和保存对应的事件怎么由前端来控制

2.如果是特殊的校验我要怎么处理，比如说处理上传的图片，上传的图片有格式和大小控制，其他的校验也可以吗

3.界面上我想做一些个性化的展示行不行

第一个问题：

其实官网给出了对应的API

ini 复制代码

 <vue-form
      v-model="formData"
      :ui-schema="uiSchema"
      :schema="schema"
      @on-change="change"
      @on-cancel="cancel"
      @on-submit="submit"
    >

是的，官网给出了这三种API，只要按照这三种方式就可以进行特定事件的处理

举个例子：

xml 复制代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-form
      v-model="formData"
      :ui-schema="uiSchema"
      :schema="schema"
      @on-change="change"
      @on-cancel="cancel"
      @on-submit="submit"
    >
    </vue-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      formData: { userName: "eweew", age: "", bio: "" },
      schema: {
        type: "object",
        required: ["userName", "age"],
        properties: {
          userName: {
            type: "string",
            title: "用户名",
            default: "Liu.Jun",
          },
          age: {
            type: "number",
            title: "年龄",
          },
          bio: {
            type: "string",
            title: "签名",
            minLength: 10,
            default: "知道的越多、就知道的越少",
          },
        },
      },
      uiSchema: {
        bio: {
          "ui:options": {
            placeholder: "请输入你的签名",
            type: "textarea",
            rows: 1,
          },
        },
      },
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    cancel() {},
    submit() {
      console.log(this.formData);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

当你的输入发生改变时，就会触发change事件，当点击"取消"按钮时就会触发cancel事件，当点击保存时，就会触发submit事件。

第二个问题：

官网给出了一个详细的答案：form.lljj.me/schema-gene...

可以看出官网给出了很多常见的例子。

第三个问题：

其实很多组件的灵活性都是很大的，常常可以用插槽来处理你常见的额外需求。