前言:
如今你们对“控制面板数据源”大致比较讲究,姐妹们都需要了解一些“控制面板数据源”的相关文章。那么小编也在网上网罗了一些有关“控制面板数据源””的相关资讯,希望朋友们能喜欢,朋友们一起来了解一下吧!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. 请求测试
完成数据源配置后,可以点击 请求测试 ,进行数据源接口验证,查看是否填写成功,返回数据是否正确。
如下图是我们的示例返回的数据结果
4.数据源参数
数据处理方法中内置了 args 参数。
(config, args) => { config.params['fid'] = args.fid; return config;}
5.使用数据源
我们以下拉选择框组件作为示例,在设计器中拖入一个下拉选择框组件。
在下拉框组件的属性栏中可以针对数据源做相应配置,选择我们刚刚创建的数据源。
如果需要向数据源提供参数,可以在配置中添加参数如下:
配置完成后我们就可以打开预览模式了,设计器的数据源功能会自动访问我们配置好的服务端api,并将服务器端返回的数据解析后初始化拉下选择框选项。
除了在设计器中通过可视化配置的方式使用数据源,我们还提供了更加灵活的方式,可以在JS中进行数据源的调用。
efreshFieldDataSource#
加载字段配置的数据源,可以通过该方法刷新(重新发送)数据请求。
this.refreshFieldDataSource('字段标识', { fid: '' } // 数据源参数)sendRequest#
发送数据源请求,该方法不会进行字段的绑定,需在数据返回后进行数据绑定处理。
this.sendRequest('数据源名称', { /* 数据源参数 */ }).then(data => { // data 为数据源配置中请求响应 return 的数据}).catch(e => { // 请求错误时返回错误信息})
更多关于FormMaking详情可移步:
可视化低代码表单设计器 - FormMaking
标签: #控制面板数据源