表单类标签讲解 FormMaking表单设计器高级功能介绍-数据源用法

发布时间：2026-07-20阅读(1)

导读FormMaking介绍FormMaking表单设计器是一款与行业无关的通用表单设计器前端解决方案，表单设计器包含设计器（MakingForm）和生成器（G....FormMaking介绍

FormMaking表单设计器是一款与行业无关的通用表单设计器前端解决方案，表单设计器包含设计器（MakingForm）和生成器（GenerateForm）两个模块，设计器主要负责表单的动态设计，可以通过拖拽的形式设计生成表单页面，生成器则负责对表单页面的渲染和数据的回写。

数据源功能

FormMaking提供了强大的数据源功能，表单中内置了 axios 库用于实现网络请求，只需要简单的几个配置就可以与后端进行交互，并且可以对响应的数据进行整理，从而得到表单需要的数据。

接下来介绍下数据源的配置和使用步骤

FormMaking的设计器组件中提供了直接配置数据源的功能

1.在【表单属性面板】中打开数据源【设置】可以进行数据源的配置。

2. 添加数据源

点击添加数据源，面板右侧会出现数据源设置项

如下图所示，我们添加了一个名称为Get Options的数据源

设置项

名称： 数据源名称，必须唯一，用于展示和选择数据源。
是否表单初始化发送请求： 默认为 true，表单 create() 生命周期进行请求；如果选择fasle，可以通过sendrequest方法进行动态请求。
请求地址： 远端接口地址。
数据处理： 可以针对接口请求发送前、成功响应和发生错误时进行处理。

对于数据源的处理，我们提供了3个配置化的入口，可以根据自己的业务情况分别对数据源请求前，数据返回时，数据请求失败的情况做自定义的逻辑处理。

请求发送前

针对请求发送前，对请求的参数、headers、地址等选项进行配置。

(config) => { //修改请求地址 config.url = 新的请求地址 //修改请求头部 config.headers = {X-Requested-With: XMLHttpRequest} //修改请求查询参数 config.params = {ID: 12345} //请求body发送的数据，不适用于GET请求 config.data = {firstName: Fred} return config; }

请求返回响应数据时#

接口请求成功后，可以对返回的数据进行处理。

(res) => { //res: 接口返回的数据，可以在这里进行处理return res; }

请求发生错误时#

(error) => { if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.Request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log(Error, error.message); } console.log(error.config);}

3. 请求测试

完成数据源配置后，可以点击请求测试，进行数据源接口验证，查看是否填写成功，返回数据是否正确。

如下图是我们的示例返回的数据结果