开源项目低代码表单FormCreate中通过接口加载远程数据选项

在开源项目低代码表单 FormCreate 中,fetch 属性提供了强大的功能,允许从远程 API 加载数据并将其应用到表单组件中。通过灵活的配置,fetch 可以在多种场景下发挥作用,从简单的选项加载到复杂的动态数据处理。

源码地址: Github | Gitee

类型

以下是 fetch 属性的详细类型定义:

ts 复制代码
type Fetch = {
  //接口地址
  action: String;
  //数据插入的位置,例如 'options' 或 'props.options'
  to?: String;
  //解析接口返回的数据,返回最终需要的结果,默认取 `res.data`
  parse?: String | ((body: any, rule:Rule, fapi:fApi) => any);
  //请求方式,默认值为 'GET'
  method?: String;
  //请求时附带的数据
  data?: Object;
  //调用接口附带数据的提交方式,默认为 `formData`
  dataType?: 'json';
  //自定义请求头信息
  headers?: Object;
  //请求失败时的回调函数
  onError?: (e: Error | ProgressEvent) => void;
 }

在请求前,可以通过 options.beforeFetch 方法处理规则,例如设置 token。

自定义请求方法

在一些高级场景中,您可能需要自定义请求方式。通过重写 formCreate.fetch 方法,您可以自由定义请求的逻辑。

js 复制代码
formCreate.fetch = (options) => {
    fetch(options.action, {
        headers: options.headers,
        method: options.method,
    }).then(res=>{
        res.json().then(data=>{
            options.onSuccess(data);
        })
    }).catch(e=>{
        options.onError(e);
    })
}

示例

通过接口加载数据

html 复制代码
<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'select',
          field: 'city',
          title: '城市',
          value: '陕西省',
          options: [],
          effect: {
            fetch: {
              action: 'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json',
              to: 'options',
              method: 'GET',
              parse(res) {
                return res.rows.map(row => {
                  return {
                    label: row.name,
                    value: row.adcode
                  }
                })
              }
            }
          }
        }
      ]
    }

  }
}
</script>

通过自定义方法加载数据

html 复制代码
<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'cascader',
          field: 'city',
          title: '省市',
          value: ['陕西省', '西安市'],
          props: {
            options: []
          },
          effect: {
            fetch: {
              //自定义请求
              action: () => {
                function tidy(list) {
                  return list.map(val => {
                    return {
                      value: val.name,
                      label: val.name,
                      children: val.children ? tidy(val.children) : undefined
                    }
                  })
                }

                return new Promise((resolve) => {
                  fetch('https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China@2.4.0/dist/pc-code.json').then(res => {
                    console.log(res)
                    res.json().then(res => {
                      resolve(tidy(res));
                    })
                  })
                })
              },
              to: 'props.options',
            }
          }
        }
      ]
    }

  }
}
</script>

自定义请求头信息

js 复制代码
const rules = [
    {
        type: 'select',
        field: 'product',
        title: '选择产品',
        fetch: {
            action: '/api/products',
            to: 'options',
            headers: {
                Authorization: 'Bearer your-auth-token'
            },
            parse: (res) => res.data.map(product => ({ label: product.name, value: product.id })),
            onError: (error) => console.error('加载产品数据失败:', error)
        }
    }
]

在请求前设置 Token

在发送 API 请求之前,动态添加 Authorization token 到请求头中。

js 复制代码
// 配置表单创建的全局选项
const formOptions = {
    // 在请求发送前的钩子
    beforeFetch: (options) => {
        // 动态设置请求头中的 Authorization token
        const token = 'your-auth-token'; // 这里的 token 可以从任何存储中获取
        options.headers = {
            Authorization: `Bearer ${token}`
        };
    }
};
// 创建表单
const rules = [
    {
        type: 'select',
        field: 'product',
        title: '选择产品',
        fetch: {
            action: '/api/products',
            to: 'options',
            parse: (res) => res.data.map(product => ({ label: product.name, value: product.id })),
            onError: (error) => console.error('加载产品数据失败:', error)
        }
    }
];

详细步骤

  1. 设置全局 formOptions: 通过设置全局的 beforeFetch 方法,可以确保在所有带有 fetch 的组件中,都会执行这个钩子。

  2. 动态获取 token: 在 beforeFetch 中,我们可以从存储、Vuex 或其他来源动态获取 token,然后将其添加到请求头中。

  3. 创建表单并使用 fetch: 表单组件中的 fetch 会自动触发 beforeFetch 方法,附加上设置的 Authorization token。

重写内置请求方法并设置 Token

在表单的所有 API 请求中,自动附加 Authorization token 到请求头中,以确保所有请求都携带有效的身份验证信息。

js 复制代码
import formCreate from '@form-create/element-ui'; // 假设使用 Element UI

// 重写 formCreate 的内置 fetch 方法
formCreate.fetch = (options) => {
    // 获取或生成 Token
    const token = 'your-auth-token'; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取

    // 设置请求头,附加 Authorization token
    const headers = {
        ...options.headers,
        Authorization: `Bearer ${token}`,
    };

    // 发起请求
    fetch(options.action, {
        method: options.method || 'GET', // 默认请求方法为 GET
        headers: headers,                 // 包含 Authorization 的请求头
        body: options.method !== 'GET' ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法,添加请求体
    })
    .then(response => response.json())  // 解析响应为 JSON
    .then(data => {
        if (options.onSuccess) {
            options.onSuccess(data);  // 成功回调
        }
    })
    .catch(error => {
        if (options.onError) {
            options.onError(error);  // 失败回调
        }
    });
};

// 创建表单
const fApi = formCreate.create([
    {
        type: 'select',
        field: 'product',
        title: '选择产品',
        fetch: {
            action: '/api/products',
            to: 'options',
            parse: (res) => res.data.map(product => ({ label: product.name, value: product.id })),
            onError: (error) => console.error('加载产品数据失败:', error),
        },
    },
], {
    // 其他表单配置
});

详细步骤

  1. 重写 fetch 方法: 在初始化时,重写 formCreate.fetch 方法,确保所有请求都使用这个自定义的方法。

  2. 设置 Authorization token: 在每次请求中,从存储中获取或生成 token,并将其附加到 headers 中。

  3. 发起请求并处理响应: 根据 options 中的 method、action、data 等参数,发起请求并处理响应数据。

相关推荐
热爱跑步的恒川5 小时前
【论文复现】基于图卷积网络的轻量化推荐模型
网络·人工智能·开源·aigc·ai编程
ClkLog-开源埋点用户分析8 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
BPM_宏天低代码11 小时前
低代码 BPA:简化业务流程自动化的新趋势
运维·低代码·自动化
funnyZpC11 小时前
quartz集群增强版🎉
java·分布式·开源·集群·定时任务
vvw&17 小时前
如何使用Netdata部署高性能的服务器监控平台
linux·运维·服务器·docker·开源·服务器监控·netdata
Goboy1 天前
0帧起步:3分钟打造个人博客,让技术成长与职业发展齐头并进
程序员·开源·操作系统
Kagol1 天前
🎉TinyVue v3.19.0 正式发布!Tree 组件终于支持虚拟滚动啦!UI 也升级啦,更更符合现代审美~
前端·vue.js·开源