百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

百度开源 低代码前端框架 开源快速低代码开发框架

bigegpt 2024-10-10 04:40 14 浏览

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

相关推荐

Go语言泛型-泛型约束与实践（go1.7泛型）

来源：械说在Go语言中，Go泛型-泛型约束与实践部分主要探讨如何定义和使用泛型约束（Constraints），以及如何在实际开发中利用泛型进行更灵活的编程。以下是详细内容：一、什么是泛型约束？**泛型...

golang总结（golang实战教程）

基础部分Go语言有哪些优势？1简单易学：语法简洁，减少了代码的冗余。高效并发：内置强大的goroutine和channel，使并发编程更加高效且易于管理。内存管理：拥有自动垃圾回收机制，减少内...

Go 官宣:新版 Protobuf API（go pro版本）

原文作者：JoeTsai,DamienNeil和HerbieOng原文链接：https://blog.golang.org/a-new-go-api-for-protocol-buffer...

Golang开发的一些注意事项(一)（golang入门项目）

1.channel关闭后读的问题当channel关闭之后再去读取它，虽然不会引发panic，但会直接得到零值，而且ok的值为false。packagemainimport"...

golang 托盘菜单应用及打开系统默认浏览器

之前看到一个应用，用go语言编写，说是某某程序的windows图形化客户端，体验一下发现只是一个托盘，然后托盘菜单的控制面板功能直接打开本地浏览器访问程序启动的webserver网页完成gui相关功...

golang标准库每日一库之 io/ioutil

一、核心函数概览函数作用描述替代方案（Go1.16+）ioutil.ReadFile(filename)一次性读取整个文件内容（返回[]byte）os.ReadFileioutil.WriteFi...

文件类型更改器——GoLang 中的 CLI 工具

我是如何为一项琐碎的工作任务创建一个简单的工具的，你也可以上周我开始玩GoLang，它是一种由Google制作的类C编译语言，非常轻量和快速，事实上它经常在Techempower的基准测...

Go (Golang) 中的 Channels 简介（golang channel长度和容量）

这篇文章重点介绍Channels(通道)在Go中的工作方式，以及如何在代码中使用它们。在Go中，Channels是一种编程结构，它允许我们在代码的不同部分之间移动数据，通常来自不同的goro...

Golang引入泛型:Go将Interface「」替换为“Any”

现在Go将拥有泛型：Go将Interface{}替换为“Any”，这是一个类型别名：typeany=interface{}这会引入了泛型作好准备，实际上，带有泛型的Go1.18Beta...

一文带你看懂Golang最新特性（golang2.0特性）

作者：腾讯PCG代码委员会经过十余年的迭代，Go语言逐渐成为云计算时代主流的编程语言。下到云计算基础设施，上到微服务，越来越多的流行产品使用Go语言编写。可见其影响力已经非常强大。一、Go语言发展历史...

Go 每日一库之 java 转 go 遇到 Apollo?让 agollo 来平滑迁移

以下文章来源于GoOfficialBlog，作者GoOfficialBlogIntroductionagollo是Apollo的Golang客户端Apollo（阿波罗）是携程框架部门研...

Golang使用grpc详解（golang gcc）

gRPC是Google开源的一种高性能、跨语言的远程过程调用（RPC）框架，它使用ProtocolBuffers作为序列化工具，支持多种编程语言，如C++,Java,Python,Go等。gR...

Etcd服务注册与发现封装实现--golang

服务注册register.gopackageregisterimport("fmt""time"etcd3"github.com/cor...

Golang:将日志以Json格式输出到Kafka

在上一篇文章中我实现了一个支持Debug、Info、Error等多个级别的日志库，并将日志写到了磁盘文件中，代码比较简单，适合练手。有兴趣的可以通过这个链接前往：https://github.com/...

如何从 PHP 过渡到 Golang?（php转golang）

我是PHP开发者，转Go两个月了吧，记录一下使用Golang怎么一步步开发新项目。本着有坑填坑，有错改错的宗旨，从零开始，开始学习。因为我司没有专门的Golang大牛，所以我也只能一步步自己去...

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