【JSON2WEB】04 amis低代码前端框架介绍

news2024/9/21 4:36:40

1 什么是 amis

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

看到amis一句话的介绍，感觉就是JSON2WEB要找的前端框架。
amis是百度开源的框架，毕竟是大厂，有保障。

用 JSON 写页面有什么好处
为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：

不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会
JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的； 不受前端技术更新的影响：百度内部最老的
amis 页面是 6 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被
Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高； 享受 amis 的不断升级：amis
一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改； 可以 完全 使用 可视化页面编辑器
来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。

更详细的介绍参阅 amis管网 https://aisuda.bce.baidu.com/amis/zh-CN/docs/index

2 快速开始

amis 有两种使用方法：

JS SDK，可以用在任意页面中 React，可以用在 React 项目中 SDK 版本适合对前端或 React 不了解的开发者，它不依赖
npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。

我是啥都不懂，只挺多了这些名词。我就采用 JS SDK的方式开始学起吧。

2.1 先下载SDK

下载方式：
1 github 的 releases，最新版 文件是 sdk.tar.gz。 https://github.com/baidu/amis/releases
2 直接下载6.1版 sdk.tar,gz

3 使用 npm i amis 来下载，在> node_modules\amis\sdk 目录里就能找到。

在这里插入图片描述
拉到下面
在这里插入图片描述

下载解压后，在node_modules\amis\sdk目录下就是amis的sdk
新建一个文件夹amissdk,把sdk目录全部拷贝到amissdk目录下，在VScode的目录结构：
在这里插入图片描述

2.2 新建hello.html

在amissdk目录下新建一个hello.html文件，从官网拷贝如下代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="sdk/sdk.css" />
    <link rel="stylesheet" href="sdk/helper.css" />
    <link rel="stylesheet" href="sdk/iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
      html,
      body,
      .app-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="root" class="app-wrapper"></div>
    <script src="sdk/sdk.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>
</html>

注意：修改一下引用的css和js的文件的目录：

在这里插入图片描述
还有这里：
在这里插入图片描述

2.3 打开运行一下看看效果

在这里插入图片描述
这里Email还带校验功能

在这里插入图片描述
是不是很哇塞！

2.4 切换主题

引入主题css

  <link rel="stylesheet" href="sdk/ang.css" />

调用css

let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 这里是初始 props
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );

预览一下：
在这里插入图片描述
按钮颜色等不同了。

2.5 设置初始值

还是 amis.embed的第三个参数，传入data参数或 context参数，

可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。

3.1.0 开始可以传入 context 数据，无论哪层都可以使用到这个里面的数据。适合用来传递一些平台数据。

let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 这里是初始 props
          data: {
          	email: '5217@5217.com'
          },
          context: {
            name: '白龙马'
          }
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );

在这里插入图片描述

2.6 设置语言

// props 中可以设置语言，默认是中文

 let amisScoped = amis.embed(
        '#root',
        amisJSON,
        {
          // 设置语言 props 中可以设置语言，默认是中文
          locale: 'en-US',
          // 这里是初始 props
          data: {
            email: '5217@5217.com'
          },
          context: {
            name: '白龙马'
          }
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );

在这里插入图片描述
其它行为和属性用到时在慢慢研究吧。

3 创建另一个页面World.html

直接复制hello.html的内容，稍微改一下主题 和 页面title，修改完以后
Hello.html是这样的：
在这里插入图片描述

World.html是这样的：
在这里插入图片描述
World.html的完整代码：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>World</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="stylesheet" href="sdk/sdk.css" />
  <link rel="stylesheet" href="sdk/helper.css" />
  <link rel="stylesheet" href="sdk/iconfont.css" />
  <link rel="stylesheet" href="sdk/ang.css" />
  <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
  <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
  <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
  <style>
    html,
    body,
    .app-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="root" class="app-wrapper"></div>
  <script src="sdk/sdk.js"></script>
  <script type="text/javascript">
    (function () {
      let amis = amisRequire('amis/embed');
      // 通过替换下面这个配置来生成不同页面
      let amisJSON = {
        type: 'page',
        title: 'World表单页面',
        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,
        {
          // 设置语言
          locale: 'en-US',
          // 这里是初始 props
          data: {
            email: '5217@5217.com'
          },
          context: {
            name: '白龙马'
          }
        },
        // 注意是第四个参数
        {
          theme: 'ang'
        }
      );
    })();
  </script>
</body>

</html>

4 App多页应用

基于 amis 渲染器，快速搭建自己的管理系统。

4.1 下载模板

官方提供了一个amis-admin的开发模板 ，基于 amis 的后台项目前端模板
下载解压后能看如如下目录结构：
在这里插入图片描述

4.2 安装依赖

打开cmd窗口，切换到模板解压目录，请运行下面的命令：
在这里插入图片描述

安装依赖
npm i
打开服务
npm start

安装成功后大概这样：
在这里插入图片描述
模板目录里多了node_modules目录：
在这里插入图片描述

4.3 启动服务

执行 npm start
在这里插入图片描述

4.4 看效果

复制 如下代码

http://localhost:3000

到浏览器地址栏，可开到如下效果：

在这里插入图片描述

5 amis可视化编辑器

5.1 在线体验

https://aisuda.github.io/amis-editor-demo/#/hello-world
在这里插入图片描述

5.2 下载到本地

https://github.com/aisuda/amis-editor-demo
在这里插入图片描述

安装依赖 npm i
编译
npm run dev
等编译完成后本地打开页面看效果

在这里插入图片描述
可以在本地编辑amis的代码了，代码编辑页如下：
在这里插入图片描述

代码如下：
在这里插入图片描述
页面JSON代码：

{
  "type": "page",
  "title": "REST-POST",
  "body": [
    {
      "id": "u:612babdc2ee4",
      "type": "form",
      "title": "表单",
      "mode": "horizontal",
      "dsType": "api",
      "feat": "Insert",
      "body": [
        {
          "name": "p_id",
          "label": "P_ID",
          "type": "input-number",
          "id": "u:d3ef30e81b7c"
        },
        {
          "name": "f_dm",
          "label": "代码",
          "type": "input-text",
          "id": "u:829c62cc55b6"
        },
        {
          "name": "s_mc",
          "label": "名称",
          "type": "input-text",
          "id": "u:980fb033d498"
        }
      ],
      "api": {
        "url": "http://127.0.0.1:5217/rest/atop",
        "method": "post",
        "requestAdaptor": "",
        "adaptor": "",
        "messages": {
          "success": "新增成功！",
          "failed": "新增失败！"
        },
        "dataType": "json",
        "silent": false
      },
      "actions": [
        {
          "type": "button",
          "label": "取消",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "cancel",
                  "componentId": "u:612babdc2ee4"
                }
              ]
            }
          },
          "level": "default",
          "id": "u:1a7dc864f018"
        },
        {
          "type": "button",
          "label": "重置",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "reset",
                  "componentId": "u:612babdc2ee4"
                }
              ]
            }
          },
          "level": "default",
          "id": "u:1f959996d975"
        },
        {
          "type": "button",
          "label": "提交",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "submit",
                  "componentId": "u:612babdc2ee4"
                }
              ]
            }
          },
          "level": "primary",
          "id": "u:c3f95ad62dde"
        }
      ],
      "resetAfterSubmit": true
    }
  ],
  "id": "u:9c6de6042af0",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  }
}

简介完。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于若依的ruoyi-nbcio流程管理系统基于form-generator的表单设计器增加子表单的一种简单方法（一）

基于若依的ruoyi-nbcio流程管理系统基于form-generator的表单设计器增加子表单的一种简单方法（一）

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/n…
阅读更多...
社交媒体教育：Facebook在数字时代的社交学习

社交媒体教育：Facebook在数字时代的社交学习

随着数字时代的到来&#xff0c;社交媒体已经深刻地改变了我们获取信息、进行交流的方式&#xff0c;同时也在教育领域崭露头角。作为全球最大的社交媒体平台之一&#xff0c;Facebook在数字时代发挥着越来越重要的社交学习作用。本文将深入探讨Facebook在教育领域的角色&#…
阅读更多...
力扣细节题：二叉树前序遍历

力扣细节题：二叉树前序遍历

细节一&#xff1a;题目在note部分提示我们要使用malloc函数去创建数组&#xff0c;因为它没有提供给我们数组&#xff0c;而题目中的指针returnsize提醒我们这是一个变量进行传址操作用于释放之前malloc的空间&#xff0c;粗暴地按题目范围malloc空间会报错&#xff0c;所以必…
阅读更多...
端口扫描神器：御剑 保姆级教程（附链接）

端口扫描神器：御剑 保姆级教程（附链接）

一、介绍 御剑&#xff08;YooScan&#xff09;是一款网络安全工具&#xff0c;主要用于进行端口扫描。它具有直观的用户界面&#xff0c;方便用户进行端口扫描和信息收集。以下是御剑端口扫描工具的一些主要特点和功能&#xff1a; 图形用户界面&#xff1a; 御剑提供直观的图…
阅读更多...
【漏洞复现】和为顺IP-COM WiFi未授权下载漏洞

【漏洞复现】和为顺IP-COM WiFi未授权下载漏洞

Nx01 产品简介 深圳市和为顺网络技术有限公司是一家聚焦于商用级网络通信设备的研发与应用&#xff0c;为全球中小型企业提供高速、安全、易维护的网络设备产品和解决方案的公司。 Nx02 漏洞描述 深圳市和为顺网络技术有限公司IP-COM WiFi方案解决专家存在任意文件下载漏洞&am…
阅读更多...
WebSocket基础详解

WebSocket基础详解

文章目录 前言由来简介优缺点适用场景兼容性 API介绍构造函数实例方法send()close() 实例属性ws.readyState&#xff08;只读&#xff09;ws.bufferedAmount&#xff08;只读&#xff09;ws.binaryTypeextensions&#xff08;只读&#xff09;protocol&#xff08;只读&#xf…
阅读更多...
1896_Linux中free命令小结

1896_Linux中free命令小结

1896_Linux中free命令小结 全部学习汇总&#xff1a; little_bits_of_linux: 一星半点的Linux经验 (gitee.com) 查看Linux中存储的使用情况&#xff0c;我经常使用htop&#xff0c;毕竟这个命令提供的信息是十分直观的。我现在常用的一个小主机其实是我的树莓派3B&#xff0c;虽…
阅读更多...
记录 | linux下切换python版本

记录 | linux下切换python版本

查看系统中存在的 python 版本 ls /usr/bin/python* 查看系统默认的 python 版本 python --version
阅读更多...
入侵报警系统行业研究：智能化潮流助力市场维持正增长

入侵报警系统行业研究：智能化潮流助力市场维持正增长

侵报警系统intruder alarm system(IAS)利用传感器技术和电子信息技术探测并指示非法进入或试图非法进入设防区域(包括主观判断面临被劫持或遭抢劫或其他危急情况时&#xff0c;故意触发紧急报警装置)的行为&#xff0c;处理报警信息、发出报警信息的电子系统或网络。 当入侵行为…
阅读更多...
如何重新安装 macOS

如何重新安装 macOS

你可以使用电脑的内建恢复系统“macOS 恢复”来重新安装 Mac 操作系统。不但简单快捷&#xff0c;而且重新安装后不会移除你的个人数据。 将 Mac 关机 选取苹果菜单  >“关机”&#xff0c;然后等待 Mac 关机。如果你无法将 Mac 关机&#xff0c;请按住它的电源按钮最长 …
阅读更多...
辛芷蕾在《繁花》中美艳照人，实力打脸于正。

辛芷蕾在《繁花》中美艳照人，实力打脸于正。

♥ 为方便您进行讨论和分享&#xff0c;同时也为能带给您不一样的参与感。请您在阅读本文之前&#xff0c;点击一下“关注”&#xff0c;非常感谢您的支持&#xff01; 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 在王家卫导演的电视剧《繁花》中&#xff0c;辛芷蕾饰演的李李…
阅读更多...
JavaScript入门学习

JavaScript入门学习

JavaScript 一.什么是JavaScript与作用 JavaScript&#xff08;简称“JS”&#xff09; 是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言 嵌入HTML中&#xff0c;与Css一样。对浏览器事件作出响应操作HTML元素及节点。可以动态操作CSS样式。在数据被提交…
阅读更多...
新年快乐，我们一起GOGOGO!

新年快乐，我们一起GOGOGO!

1. 为什么要安装Go&#xff1f; 工欲善其事必先利其器&#xff0c;通俗来讲&#xff0c;要想保留雪糕&#xff0c;那就必须把雪糕放在"冷"的环境。这其实是一个道理&#xff0c;相关其他编程语言&#xff0c;例如Java&#xff0c;它就需要安装Java的开发环境JDK。 …
阅读更多...
【element-ui】el-select下拉框el-date-picker弹出框定位问题解决方案

【element-ui】el-select下拉框el-date-picker弹出框定位问题解决方案

问题描述&#xff1a; 项目开发过程中发现el-select和el-date-picker弹出框显示时候&#xff0c;滚动屏幕&#xff0c;导致弹出框定位出现问题。 首先考虑到看一下element-ui官网提供的api&#xff0c;如下图 1、select提供了popper-append-to-body属性的配置 代码如下&#x…
阅读更多...
【网站项目】038汽车养护管理系统

【网站项目】038汽车养护管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
Linux下centos操作系统安装Mysql8.0过程及踩坑填补

Linux下centos操作系统安装Mysql8.0过程及踩坑填补

我自己有一台服务器&#xff0c;之前安装的是MySQL5.5&#xff0c;现在我想升级为MySQL8.0&#xff0c;于是我干了以下操作,既有踩坑又有干货&#xff1a; 1.先卸载MySQL&#xff1b; 2.删除跟MySQL相关文件&#xff1b; 3.安装新的MySQL8.0版本&#xff08;这里踩了一个坑&…
阅读更多...
从零开始手写mmo游戏从框架到爆炸（十）— 集成springboot-jpa与用户表

从零开始手写mmo游戏从框架到爆炸（十）— 集成springboot-jpa与用户表

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 集成springboot-jpa&#xff0c;不用mybatis框架一个是方便对接不同的数据源。第二个目前规划的游戏内容可能对数据库的依赖不是很大&#xff0c;jpa应该肯定能满足要求了…
阅读更多...
JVM 性能调优- 五种内存溢出(5)

JVM 性能调优- 五种内存溢出(5)

在介绍之前先简单介绍下 直接内存（Direct Memory）和堆内存（Heap Memory）： 关系： 直接内存并不是Java虚拟机的一部分，它是通过Java的NIO库中的ByteBuffer来分配和管理的。直接内存通常由操作系统的本地内存（Native Memory）提供支持。堆内存是Java虚拟机的一部分，用于存…
阅读更多...
re:从0开始的CSS学习之路 3. CSS三大特性

re:从0开始的CSS学习之路 3. CSS三大特性

0. 写在前面 很多的学习其实并不知道在学什么&#xff0c;学一个新东西学着学着就变成了抄代码&#xff0c;背概念。把看视频学习变成了一个赶进度的任务&#xff0c;到头来只学到了一些皮毛。 文章目录 0. 写在前面1. CSS三大特性——层叠性2. CSS三大特性——优先级3. CSS三…
阅读更多...
C语言在Visual Studio 2010环境下使用＜regex.h＞正则表达式函数库

C语言在Visual Studio 2010环境下使用＜regex.h＞正则表达式函数库

在Visual Studio 2010环境下&#xff0c;如果C语言想要使用<regex.h>头文件进行正则表达式匹配&#xff0c;则需要pcre3.dll这个动态链接库&#xff0c;可以去网上下载。 下载的网址是&#xff1a;Pcre for Windowspcre {whatisit}https://gnuwin32.sourceforge.net/pac…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023