百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

百度开源 低代码前端框架（百度html源代码）

ccwgpt 2024-10-24 09:18 55 浏览 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

相关推荐

ForkJoinPool的了解与使用（fork-join）

ForkJoinPool是一个强大的Java类，用于处理计算密集型任务。使用ForkJoinPool分解计算密集型任务并并行执行它们以获得更好的Java应用程序性能。它的工作原理是将任务分解为更小的子...

Netty 时间轮源码解析（时间轮java实现）

定时任务在中间件和业务系统中有很多应用，比如：注册中心中定期上报状态的心跳机制。RPC框架中定期扫描请求列表移除超时请求。延迟队列提交未来时间的任务。业务系统每日凌晨跑批处理或报表任务。Java原...

Autodesk基于Mesos的通用事件系统架构

【编者按】本文由AutodeskCloud软件架构师OlivierPaugam撰写，解释了如何集合Mesos、Kafka、RabbitMQ、Akka、Splunk、Librato、EC2等基础设施...

全局视角看技术-Java多线程演进史

作者：京东科技文涛全文较长共6468字，语言通俗易懂，是一篇具有大纲性质的关于多线程的梳理，作者从历史演进的角度讲了多线程相关知识体系，让你知其然知其所以然。前言2022年09月22日，JDK19发...

为什么应该使用Dapr来构建事件驱动的微服务?

微服务架构从本质上来说是分布式的。构建微服务总是会遇到极具挑战性的问题，比如说弹性服务调用、分布式事务处理、按需扩容以及严格一次(exactly-once)的消息处理。将微服务放在Kubernet...

WEB前端开发学习流程（web前端开发简明教程）

相对web后端开发来说,web前端开发对大部分初学编程者比较友好，而且入门门槛低，就业范围广。是大部分转行学IT的一个首选方向。web前端开发工程师，主要进行网站浏览器的开发、优化、布局的工作。在了解...

《s24z 编程指南》大纲(AI 提示词)

由于AIGC的迅速发展，本教程《s24z编程指南》，尝试用如下方法：准备《编程指南》的大纲，按章节划分，每小节由相关知识点和文字组成。每次将一小部分文本，以提示词的形式，送入Kimi或Ch...

有哪些常用的Python后端开发框架?

以下为你介绍一些常用的Python后端开发框架，包含各自的特点、适用场景与示例代码：Flask特点：轻量级、灵活，核心代码简洁，几乎不强制开发者使用特定的工具和库，开发者可按需添加扩展。适用场景...

数学分析的结构（数学分析的结构方法）

一、基础结构层实数系统与集合论数学分析的根基建立在实数连续之上，通过集合论（如公理化集合论）定义数学对象的抽象结构。例如，实数集的完备性公理是数学分析区别于其他数学分支的关键特征。此外，点集拓扑学（如...

新手在学习Web前端时需要学习的内容汇总

Web前端开发因为入行门槛低，是很多人转行IT开发行业的首选，但想要成为一名合格的Web前端开发工程师同样要具备过硬的专业技能，而且想要学成后高薪快速的就业，过硬的技术是基本条件。那么，新手小白学习W...

基于 Kotlin KMP 实现 HarmonyOS 与 Android 双平台 SDK 开发实践

背景随着鸿蒙平台的进一步发展，大家的态度也逐渐从观望转向实际投入，越来越多的公司开始考虑将自家应用迁移到鸿蒙平台。但是这一过程并非想象中的那么简单，尤其对于已经存在很多年的大型项目来说，直接投入大量人...

爱奇艺 App 中台技术实践（爱奇艺 app 中台技术实践在哪）

本文来自爱奇艺研究员在ArchSummit全球架构师峰会上的演讲整理,将为大家分享爱奇艺打造移动中台的过程。爱奇艺移动中台的建设过程可分为组件解耦、组件定制化和平台化，未来会利用平台发现、沉淀和复...

软件开发|同样的功能需求，为什么有的软件公司报价高?有的低?

最近有个朋友问我：同样的功能需求，为什么有的公司报价高？有的公司报价低？其实，有很多创业的朋友，在寻找技术开发公司的时候，经常会遇到这个困惑，一样的功能需求，不同的公司有不同的报价，有的差别还很大，那...

零基础要怎么学习Web前端?Web前端学习路径分享

Web前端因为薪资高、入行门槛低，成为很多人转行进入IT行业的首选。对于零基础的人来说，学习之前一定要想清楚为什么而学习Web前端，给自己一个清晰的定位，摆正心态。如果还不清楚学习路线，可以参考千锋武...

MICROCHIP/微芯 KSZ9031RNXIA 以太网芯片

特征o适用于IEEE802.3应用的单片10/100/1000Mbps以太网收发器oGMII/MII标准接口，3.3V/2.5V/1.8V容错I/Oo自动协商以自动选择最高链路连接速度（10/10...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表