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

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

源码地址: Github | Gitee

低代码表单FormCreate

类型

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

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 方法,您可以自由定义请求的逻辑。

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);})
}

低代码表单FormCreate

示例

通过接口加载数据

<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>

通过自定义方法加载数据

<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>

自定义请求头信息

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 到请求头中。

// 配置表单创建的全局选项
const formOptions = {// 在请求发送前的钩子beforeFetch: (options) => {// 动态设置请求头中的 Authorization tokenconst 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 到请求头中,以确保所有请求都携带有效的身份验证信息。

import formCreate from '@form-create/element-ui'; // 假设使用 Element UI// 重写 formCreate 的内置 fetch 方法
formCreate.fetch = (options) => {// 获取或生成 Tokenconst token = 'your-auth-token'; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取// 设置请求头,附加 Authorization tokenconst headers = {...options.headers,Authorization: `Bearer ${token}`,};// 发起请求fetch(options.action, {method: options.method || 'GET', // 默认请求方法为 GETheaders: 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 等参数,发起请求并处理响应数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423601.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考中项(第三版) 项目成本管理总结

前言 系统集成项目管理工程师考试&#xff08;简称软考中项&#xff09;&#xff0c;其中案例分析也是很大一部分考试内容&#xff0c;目前正在学习中&#xff0c;现总结一些可能会考到的知识点供大家参考。 1.1、项目成本管理总线索 1、项目成本失控的原因 &#xff08;1&a…

每日处理250亿个事件,Canva如何应对数据洪流

在这个数据被称为“新石油”的时代&#xff0c;如何有效地处理海量信息流显得尤为重要。作为广受欢迎的设计平台&#xff0c;Canva不仅因其用户友好的界面而备受关注&#xff0c;还因其高效利用Amazon Kinesis管理每日高达250亿个事件而成为热议焦点。让我们深入探讨Canva是如何…

Java 算法:随机抽题

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…

W外链怎么做微信推广链接?

"W外链"通常指的是一种可以创建短链接或者特殊功能的链接服务&#xff0c;这些链接可以用来在微信等社交平台上进行推广。由于微信对直接链接分享有一定的限制&#xff0c;使用这类服务可以帮助绕过这些限制&#xff0c;从而实现更有效的推广。 以下是使用W外链创建微…

Mysql JSON结果不能IN

开发中遇到这样一种场景&#xff0c;举例说音乐的专辑包含歌曲&#xff0c;假设歌曲放在music表&#xff0c;专辑放在album表&#xff0c;而专辑与歌曲的绑定关系&#xff0c;要么就存一个关联表music_ablum&#xff0c;要么就存一个json字段(music_list)在album表。 存一个关…

【Unity踩坑】使用Input System后UI EventSystem的冲突

在项目中使用Input System&#xff0c;在UI中添加了元素后&#xff0c;再次运行出现下面的错误&#xff1a; InvalidOperationException: You are trying to read Input using the UnityEngine.Input class, but you have switched active Input handling to Input System pac…

关于 vue/cli 脚手架实现项目编译运行的源码解析

1.vue项目运行命令解析 在日常开发中&#xff0c;vue 项目通过vue-cli-service脚手架包将项目运行起来&#xff0c;常用的命令例如&#xff1a; npm run serve npm run build 上述执行命令实际一般对应为项目中 package.json 文件的 scripts属性中编写的脚本命令&#xff0c;在…

亚马逊、沃尔玛、敦煌网、Target塔吉特、Temu环境搭建测评技术!

海外跨境电商各大主要平台正不断力推半托管模式&#xff0c;不断对商家开出众多吸引和扶持政策。全托管是指电商平台全面负责店铺的运营&#xff0c;包括仓储、配送、售后等&#xff0c;而商家主要负责提供货品。半托管模式则基本由商家自主经营&#xff0c;平台只负责仓配物流…

延迟退休,如何影响程序员?

随着人们对长寿的期待增加&#xff0c;延迟退休的趋势逐渐成为了现实。而对于已经面临35岁危机的程序员们来说&#xff0c;延迟退休可能是一个更常见的问题。 可以对照速查一下&#xff0c;延迟法定退休年龄时间表公布&#xff0c;你什么时候能退休&#xff1f; 对照速查&…

单机快速部署开源、免费的分布式任务调度系统——Apache DolphinScheduler

本文主要为大家介绍Apache DolphinScheduler的单机部署方式&#xff0c;方便大家快速体验。 环境准备 需要Java环境&#xff0c;这是一个老生常谈的问题&#xff0c;关于Java环境的安装与配置期望大家都可以熟练掌握。 验证java环境 java -version 下载安装包并解压 使用wg…

SRT3D: A Sparse Region-Based 3D Object Tracking Approach for the Real World

基于区域的方法在基于模型的单目3D跟踪无纹理物体的复杂场景中变得越来越流行。然而&#xff0c;尽管它们能够实现最先进的结果&#xff0c;大多数方法的计算开销很大&#xff0c;需要大量资源来实时运行。在下文中&#xff0c;我们基于之前的工作&#xff0c;开发了SRT3D&…

低空经济火爆:先考个无人机飞行执照傍身

随着低空经济的火爆&#xff0c;考取无人机飞行执照成为了越来越多人的选择。这不仅是对自身技能的提升&#xff0c;更是对未来职业发展的有力支撑。以下是对考取无人机飞行执照相关信息的详细解析&#xff1a; 一、低空经济与无人机飞行执照的关联性 低空经济作为战略性新兴…

Apache DolphinScheduler 跨工作流复杂依赖功能详解

大家好&#xff0c;我叫高楚枫&#xff0c;来自阿里云 EMR 团队的开发工程师&#xff0c;同时也是 Apache DolphinScheduler 的 PMC 成员之一。 今天非常高兴能在这里和大家分享关于跨工作流复杂依赖的功能详解。 引言 在现代的数据处理和调度过程中&#xff0c;工作流的依赖…

城市治理如何提升效率?推荐搭建城市综合治理平台!

随着城市化的快速发展&#xff0c;城市治理面临着前所未有的挑战。交通拥堵、环境污染、公共安全等问题日益凸显&#xff0c;传统的治理模式已难以满足现代城市的需求。在这样的背景下&#xff0c;提升城市治理效率成为了一个亟待解决的问题。本文将探讨如何通过搭建城市综合治…

Linux下如何使用CMake实现动态库的封装与调用

一、动态库的封装 1.创建工程 首先创建一个qt工程&#xff08;这里我采用的是ui工程&#xff09; 这里选择Widget工程 名字取一个和动态库相关的即可&#xff0c;我这里取的UIDLL 这里选择CMake 这里我选择命名为Dynamic kits采用Qt 5.14.2 GCC 64bit&#xff0c;之后直接下一…

智慧人居视音频解决方案探究和技术实现

智慧人居技术背景 智慧人居是一种利用先进技术和智能化系统&#xff0c;旨在提升居住环境的舒适性、便捷性和安全性的新型居住模式。随着物联网、大数据、人工智能等技术的不断发展&#xff0c;智慧人居正朝着更加智能化、个性化、集成化的方向发展。 智慧人居通过集成各种智…

c/c++ *和后置++的优先级

有时不记得c/c里运算符的优先级&#xff0c;最简单的办法就是写一个测试程序&#xff0c;这样更能直接地了解&#xff0c;如下面这个简单的代码&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h>int main(int argc, char *argv[]) …

代码随想录刷题day32丨动态规划理论基础,509. 斐波那契数, 70. 爬楼梯, 746. 使用最小花费爬楼梯

代码随想录刷题day32丨动态规划理论基础&#xff0c;509. 斐波那契数&#xff0c; 70. 爬楼梯&#xff0c; 746. 使用最小花费爬楼梯 1.动态规划理论基础 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题…

QT 串口上位机读卡显示

目录 一. QT创建工程 二. 软件更换图标 三. QT打包 一. QT创建工程 文件新建&#xff0c;选择创建一个桌面QT。 重命名RFID,并选择工程保存路径 RFID.pro QT core gui serialport #串行串口greaterThan(QT_MAJOR_VERSION, 4): QT widgetsTARGET RFID TE…

GD - GDLink的接口引脚杜邦线接触不好,还是自己做一个转接头好些

文章目录 GD - GDLink的接口引脚杜邦线接触不好&#xff0c;还是自己做一个转接头好些概述笔记转接头使用时的连接关系转接头弄个壳子好些在转接头上&#xff0c;将线序转为自己板子SWD的防呆线序 转接头的2x5P线序和看到的GD-LINK2x5P接口相反END GD - GDLink的接口引脚杜邦线…