当前位置:网站首页>低代码平台中的数据连接方式(上)
低代码平台中的数据连接方式(上)
2022-07-06 18:34:00 【InfoQ】
1. 前言
- 在(上)篇中,我们将介绍经典的单 API 通信数据连接方式 - 简单的单 API 连接方式存在的问题 - 相应解决方案。
- 在(下)篇中,我们将介绍在低代码时代发展起来的 API 编排 - FaaS - 数据库直连等新型方案。
2. 传统手工模式下动态数据的获取和渲染
var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
url: "script.php",
method: "POST",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$( "#log" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
// 1. Import *useState* and *useEffect*
import React, {useState, useEffect} from 'react';
import './App.css';
function App() {
// 2. Create our *dogImage* variable as well as the *setDogImage* function via useState
// We're setting the default value of dogImage to null, so that while we wait for the
// fetch to complete, we dont attempt to render the image
let [dogImage, setDogImage] = useState(null)
// 3. Create out useEffect function
useEffect(() => {
fetch("https://dog.ceo/api/breeds/image/random")
.then(response => response.json())
// 4. Setting *dogImage* to the image url that we received from the response above
.then(data => setDogImage(data.message))
},[])
return (
<div className="App">
{/* 5. Using *dogImage as* the *src* for our image*/}
{dogImage && <img src={dogImage}></img>}
</div>
);
}
export default App;
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
3. 低代码最初的数据连接方式 —— 通过 API URL 进行数据通信
4. 问题产生 —— 低代码平台实际落地中的阻碍
4.1 前后端数据格式不匹配问题
{
"status":0,
"msg":"",
"data":{
...其他字段
}
}
4.2 跨域问题
5. 浏览器端的数据映射机制
6. 浏览器端请求 / 接收适配器
7. API 代理
7.1 统一 API 代理方案
7.2 后端数据映射及后端请求 / 接收适配器
- AMIS 作为一个开源项目,在许多时候可能会被作为独立依赖引入到项目中,在没有 API 代理机制的情况下前端方案可以解决一部分问题。
- 如果在配置项中指定请求为 raw: 则网络请求不会经过 API 代理发送,这时如果需要对数据进行格式化,则需要借助前端方案。
8. 小结
边栏推荐
- ROS学习(二十)机器人SLAM功能包——rgbdslam的安装与测试
- 刨析《C语言》【进阶】付费知识【二】
- sql中批量删除数据---实体中的集合
- Zhang Ping'an: accelerate cloud digital innovation and jointly build an industrial smart ecosystem
- Integrated navigation: product description and interface description of zhonghaida inav2
- Centros 8 installation MySQL Error: The gpg Keys listed for the "MySQL 8.0 Community Server" repository are already ins
- Redis configuration class redisconfig
- POJ 3177 redundant paths POJ 3352 road construction (dual connection)
- Hutool post requests to set the body parameter to JSON data
- ROS learning (24) plugin
猜你喜欢
ROS学习(24)plugin插件
ROS学习(25)rviz plugin插件
The cradle of eternity
ROS学习(26)动态参数配置
ROS学习(23)action通信机制
Blue Bridge Cup 2022 13th provincial competition real topic - block painting
ROS学习(二十)机器人SLAM功能包——rgbdslam的安装与测试
How can I code for 8 hours without getting tired.
一片叶子两三万?植物消费爆火背后的“阳谋”
ROS learning (XIX) robot slam function package cartographer
随机推荐
ROS学习(24)plugin插件
ROS学习(25)rviz plugin插件
The use of video in the wiper component causes full screen dislocation
MySQL's most basic select statement
ROS learning (23) action communication mechanism
uva 1401 dp+Trie
ROS学习(23)action通信机制
Livox激光雷达硬件时间同步---PPS方法
红外相机:巨哥红外MAG32产品介绍
CISP-PTE实操练习讲解(二)
HDU 4661 message passing (wood DP & amp; Combinatorics)
Yiwen takes you into [memory leak]
刨析《C语言》【进阶】付费知识【二】
Big guys gather | nextarch foundation cloud development meetup is coming!
蓝桥杯2022年第十三届省赛真题-积木画
String to date object
ROS学习(22)TF变换
FLIR blackfly s usb3 industrial camera: white balance setting method
机器人队伍学习方法,实现8.8倍的人力回报
Mongodb checks whether the table is imported successfully