百度开源 低代码前端框架（百度html源代码）
ccwgpt 2024-10-24 09:18 35 浏览 0 评论
amis 是百度开源的低代码前端框架，提供了一种高效的页面开发方式，特别适合需要快速迭代开发的项目。通过 json 配置，amis 简化了开发流程，使得开发者可以专注于业务逻辑和用户体验。
amis 包含布局、分页、选项卡、导航、表单、表格、富文本编辑器、二维码、文件上传、日历、图表等 130+ 组件
amis 的工作原理是将编写好的 json 数据转化成对应的 react 组件，先通过 json 的 type 属性去找到 component，然后把其他属性作为组件的 props 传递过去，最终完成渲染。
通过简单的 json 配置就能实现一个常用组件
示例代码：
table crud
json 配置
{
"type": "page",
"body": {
"type": "crud",
"api": "/amis/api/mock2/sample",
- [x] "syncLocation": false,
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "engine",
"label": "Rendering engine"
},
{
"name": "browser",
"label": "Browser"
},
{
"type": "operation",
"label": "操作",
"buttons": [
{
"label": "详情",
"type": "button",
"level": "link",
"actionType": "dialog",
"dialog": {
"title": "查看详情",
"body": {
"type": "form",
"body": [
{
"type": "input-text",
"name": "engine",
"label": "Engine"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser"
}
]
}
}
},
{
"label": "删除",
"type": "button",
"level": "link",
"className": "text-danger",
"disabledOn": "this.grade === 'A'"
}
]
}
]
}
}可视化编辑器：
amis 提供可视化编辑工具，通过点击拖拽的方式，生成自定义页面，复制对应的 json 数据到项目文件中，即可完成页面开发功能
使用方法：
原生 js 中使用
<body>
<div id="root" class="app-wrapper"></div>
<script src="amis.js"></script>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '表单页面',
body: {
type: 'form',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: 'Name',
type: 'input-text',
name: 'name'
},
{
label: 'Email',
type: 'input-email',
name: 'email'
}
]
}
};
let amisScoped = amis.embed('#root', amisJSON);
})();
</script>
</body>react 中使用
class AMISComponent extends React.Component<any, any> {
render() {
return renderAmis(
// 这里是 amis 的 Json 配置。
{
type: 'page',
body: {
type: 'form',
api: '/api/form',
body: [
{
type: 'input-text',
name: 'name',
label: '姓名'
},
{
name: 'email',
type: 'input-email',
label: '邮箱'
}
]
}
}
);
}
}
class APP extends React.Component<any, any> {
render() {
return (
<>
<AMISComponent />
</>
);
}
}vue中使用
<template>
<amis :amisjson="amisjson"></amis>
</template>
<script setup lang="ts">
import amis from "../components/AmisReanderer.vue";
const amisjson={
type: 'page',
title: '表单页面',
body: {
type: 'form',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: 'Name',
type: 'input-text',
name: 'name'
},
{
label: 'Email',
type: 'input-email',
name: 'email'
}
]
}
}
</script>amis 特性
低代码开发：通过 JSON 配置而非传统编码方式，降低技术门槛。
多端适配：一套配置适用于 Web、移动端等多种平台。
丰富组件库：提供超过 120 个内置组件，覆盖大多数业务需求。
扩展性：支持自定义组件，结合低代码和传统编码方式。
可视化编辑器：支持使用可视化编辑器制作页面，提高开发效率。
《前端资源推荐》收集各种前端组件UI、插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！
GitHub：https://github.com/baidu/amis
官方文档：https://aisuda.bce.baidu.com/amis
相关推荐
- 迈向群体智能 | 智源发布首个跨本体具身大小脑协作框架
-
允中发自凹非寺量子位|公众号QbitAI3月29日，智源研究院在2025中关村论坛“未来人工智能先锋论坛”上发布首个跨本体具身大小脑协作框架RoboOS与开源具身大脑RoboBrain，可实...
- 大模型对接微信个人号，极空间部署AstrBot机器人，万事不求百度
-
「亲爱的粉丝朋友们好啊！今天熊猫又来介绍好玩有趣的Docker项目了，喜欢的记得点个关注哦！」引言前两天熊猫发过一篇关于如何在极空间部署AstrBot并对接QQ消息平台的文章，不过其实QQ现在已经很少...
- Seata，让分布式事务不再是难题!实战分享带你领略Seata的魅力!
-
终身学习、乐于分享、共同成长！前言Seata是一款开源的分布式事务解决方案，致力于提供高性能和简单易用的分布式事务服务。Seata将为用户提供了AT、TCC、SAGA和XA事务模式，为用户打造一站式的...
- 常见分布式事务解决方案（分布式事务解决的问题）
-
1.两阶段提交（2PC）原理：分为准备阶段（协调者询问参与者是否可提交）和提交阶段（协调者根据参与者反馈决定提交或回滚）。优点：强一致性，适用于数据库层（如XA协议）。缺点：同步阻塞：所有参与者阻塞...
- 分布式事务:从崩溃到高可用，程序员必须掌握的实战方案!
-
“支付成功，但订单状态未更新！”、“库存扣减后，交易却回滚了！”——如果你在分布式系统中踩过这些“天坑”，这篇文章就是你的救命稻草！本文将手把手拆解分布式事务的核心痛点和6大主流解决方案，用代码实战+...
- 谈谈对分布式事务的一点理解和解决方案
-
分布式事务首先，做系统拆分的时候几乎都会遇到分布式事务的问题，一个仿真的案例如下：项目初期，由于用户体量不大，订单模块和钱包模块共库共应用（大war包时代），模块调用可以简化为本地事务操作，这样做只要...
- 一篇教你通过Seata解决分布式事务问题
-
1 Seata介绍Seata是由阿里中间件团队发起的开源分布式事务框架项目，依赖支持本地ACID事务的关系型数据库，可以高效并且对业务0侵入的方式解决微服务场景下面临的分布式事务问题，目前提供AT...
- Seata分布式事务详解(原理流程及4种模式)
-
Seata分布式事务是SpringCloudAlibaba的核心组件，也是构建分布式的基石，下面我就全面来详解Seata@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合...
- 分布式事务最终一致性解决方案有哪些?MQ、TCC、saga如何实现?
-
JTA方案适用于单体架构多数据源时实现分布式事务，但对于微服务间的分布式事务就无能为力了，我们需要使用其他的方案实现分布式事务。1、本地消息表本地消息表的核心思想是将分布式事务拆分成本地事务进行处理...
- 彻底掌握分布式事务2PC、3PC模型（分布式事务视频教程）
-
原文：https://mp.weixin.qq.com/s/_zhntxv07GEz9ktAKuj70Q作者：马龙台工作中使用最多的是本地事务，但是在对单一项目拆分为SOA、微服务之后，就会牵扯出分...
- Seata分布式事务框架关于Annotation的SAGA模式分析
-
SAGAAnnotation是ApacheSeata版本2.3.0中引入的功能，它提供了一种使用Java注解而不是传统的JSON配置或编程API来实现SAGA事务模式的声明...
- 分布式事务，原理简单，写起来全是坑
-
今天我们就一起来看下另一种模式，XA模式！其实我觉得seata中的四种不同的分布式事务模式，学完AT、TCC以及XA就够了，Saga不好玩，而且长事务本身就有很多问题，也不推荐使用。S...
- 内存空间节约利器redis的bitmap(位图)应用场景有哪些你知道吗
-
在前面我们分享过一次Redis常用数据结构和使用场景，文章对Redis基本使用做了一个简单的API说明，但是对于其中String类型中的bitmap（位图）我们需要重点说明一下，因为他的作用真的不容忽...
- 分布式事务原理详解(图文全面总结)
-
分布式事务是非常核心的分布式系统，也是大厂经常考察对象，下面我就重点详解分布式事务及原理实现@mikechen本文作者：陈睿|mikechen文章来源：mikechen.cc分布式事务分布式事务指的是...
- 大家平时天天说的分布式系统到底是什么东西?
-
目录从单块系统说起团队越来越大，业务越来越复杂分布式出现：庞大系统分而治之分布式系统所带来的技术问题一句话总结：什么是分布式系统设计和开发经验补充说明：中间件系统及大数据系统前言现在有很多Java技术...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (52)
- java框架spring (43)
- grpc框架 (55)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)