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

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" /><metaname="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,{// 这里是初始 propsdata: {email: '5217@5217.com'},context: {name: '白龙马'}},// 注意是第四个参数{theme: 'ang'});

在这里插入图片描述

2.6 设置语言

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

 let amisScoped = amis.embed('#root',amisJSON,{// 设置语言 props 中可以设置语言，默认是中文locale: 'en-US',// 这里是初始 propsdata: {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',// 这里是初始 propsdata: {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.mzph.cn/news/671896.shtml

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

相关文章

即插即用、简单有效的大语言模型推荐算法！港大联合百度推出RLMRec

即插即用、简单有效的大语言模型推荐算法！港大联合百度推出RLMRec

论文链接&#xff1a; https://arxiv.org/abs/2310.15950 论文代码&#xff1a; https://github.com/HKUDS/RLMRec 实验室主页&#xff1a; https://sites.google.com/view/chaoh/group-join-us?authuser0 TLDR 本文从互信息最大化的理论角度出发&#xff0c;通过引入文本信号…
阅读更多...
使用No-SQL数据库支持连接查询用例的讨论

使用No-SQL数据库支持连接查询用例的讨论

简介 在本文中&#xff0c;我们将简单介绍什么是No-SQL数据库。然后我们会讨论一种使用关系数据库比较容易实现的查询&#xff0c;即连接查询&#xff0c;怎么样使用No-SQL来实现。 什么是No-SQL数据库 与No-SQL数据库相对应的是传统的关系数据库&#xff08;RDBMS&#xff…
阅读更多...
JRT监听程序

JRT监听程序

本次设计避免以往设计缺陷&#xff0c;老的主要为了保持兼容性&#xff0c;在用的设计就不好调了。 首先&#xff0c;接口抽象时候就不在给参数放仪器ID和处理类了&#xff0c;直接放仪器配置实体&#xff0c;接口实现想用什么属性就用什么属性&#xff0c;避免老方式要扩参数时…
阅读更多...
java的excel列行合并模版

java的excel列行合并模版

1.效果 2.模版 <tableborder"1"cellpadding"0"cellspacing"0"class"tablebor"id"TABLE"><tr align"center" class"bg217"><td style"background-color: #008000; color: #ffffff;p…
阅读更多...
archlinux 使用 electron-ssr 代理 socks5

archlinux 使用 electron-ssr 代理 socks5

提前下载好 pacman 包 https://github.com/shadowsocksrr/electron-ssr/releases/download/v0.2.7/electron-ssr-0.2.7.pacman 首先要有 yay 和 aur 源&#xff0c;这个可以参考我之前的博客 虚拟机内使用 archinstall 安装 arch linux 2024.01.01 安装依赖 yay 安装的&#…
阅读更多...
WebGL+Three.js入门与实战——绘制水平移动的点、通过鼠标控制绘制（点击绘制、移动绘制、模拟画笔）

WebGL+Three.js入门与实战——绘制水平移动的点、通过鼠标控制绘制（点击绘制、移动绘制、模拟画笔）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…
阅读更多...
JVM 性能调优 - 常用的垃圾回收器(6)

JVM 性能调优 - 常用的垃圾回收器(6)

垃圾收集器 在 JVM（Java虚拟机）中，垃圾收集器（Garbage Collector）是负责自动管理内存的组件。它的主要任务是在程序运行过程中，自动回收不再使用的对象所占用的内存空间，以便为新的对象提供足够的内存。 JVM中的垃圾收集器使用不同的算法和策略来实现垃圾收集过程，以…
阅读更多...
第4章——深度学习入门（鱼书）

第4章——深度学习入门（鱼书）

第4章 神经网络的学习 本章的主题是神经网络的学习。这里所说的“学习”是指从训练数据中自动获取最优权重参数的过程。本章中&#xff0c;为了使神经网络能进行学习&#xff0c;将导入损失函数这一指标。而学习的目的就是以该损失函数为基准&#xff0c;找出能使它的值达到最…
阅读更多...
一些常见的电源方案

一些常见的电源方案

开关电源&#xff1a; RM C 板&#xff1a;&#xff08;24V电压&#xff0c;10A电流&#xff09; SMBJ30CA&#xff1a;静电和浪涌保护(TVS/ESD) 一般使用NMOS管&#xff0c;因为PMOS管导通电阻与NMOS管比较会较大 模电非基础01——从一种常见的防反接&#xff0c;上电缓启…
阅读更多...
Mysql大表添加字段失败解决方案

Mysql大表添加字段失败解决方案

背景 最近遇到一个问题&#xff0c;需要在user用户表千万级别数据中添加两个字段&#xff0c;发现老是加不上去&#xff0c;一直卡死。表数据量不仅大&#xff0c;而且是一个热点表&#xff0c;访问频率特别高&#xff0c;而且该表的访问是在一个大事务中。加字段的时候一直在…
阅读更多...
挑战杯 python 爬虫与协同过滤的新闻推荐系统

挑战杯 python 爬虫与协同过滤的新闻推荐系统

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python 爬虫与协同过滤的新闻推荐系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&…
阅读更多...
【人工智能】神奇的Embedding：文本变向量，大语言模型智慧密码解析(10)

【人工智能】神奇的Embedding：文本变向量，大语言模型智慧密码解析(10)

什么是嵌入&#xff1f; OpenAI 的文本嵌入衡量文本字符串的相关性。嵌入通常用于&#xff1a; Search 搜索&#xff08;结果按与查询字符串的相关性排序&#xff09;Clustering 聚类&#xff08;文本字符串按相似性分组&#xff09;Recommendations 推荐&#xff08;推荐具有…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RichText组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RichText组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之RichText组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、RichText组件 鸿蒙&#xff08;HarmonyOS&#xff09;富文本组件&#xff0c;…
阅读更多...
【学习心得】Python好库推荐——tqdm

【学习心得】Python好库推荐——tqdm

在很多时候&#xff0c;你都需要一个进度条来告知当前程序的运行状况和进展。tqdm 是一个在Python中广泛使用的命令行进度条工具库&#xff01;下面是这个库的主页&#xff1a;https://tqdm.github.io/ 一、快速入门 &#xff08;1&#xff09;for循环中 代码&#xff1a; …
阅读更多...
句子嵌入: 交叉编码和重排序

句子嵌入: 交叉编码和重排序

这个系列目的是揭开嵌入的神秘面纱&#xff0c;并展示如何在你的项目中使用它们。第一篇博客介绍了如何使用和扩展开源嵌入模型&#xff0c;选择现有的模型&#xff0c;当前的评价方法&#xff0c;以及生态系统的发展状态。第二篇博客将会更一步深入嵌入并解释双向编码和交叉编…
阅读更多...
C语言的起源

C语言的起源

1940年代&#xff0c;最早的开始&#xff0c;编程语言是机器语言&#xff0c;用0/1表示的、计算机能直接识别和执行的一种机器指令的集合。最早的编程方式&#xff0c;就是给纸带打孔或者卡片机打孔。机器语言直接与硬件沟通&#xff0c;极具针对性&#xff0c;但是非常难于理解…
阅读更多...
IP地址如何保护网络安全

IP地址如何保护网络安全

面对网络攻击时&#xff0c;仅依靠常态化的网络安全防御系统已捉襟见肘&#xff0c;如联合使用IP地址数据可以形成多元化的安全解决方案&#xff0c;全面监控网络活动&#xff0c;发现潜在威胁&#xff0c;制定有针对性的应对措施。 网络攻击追踪 当网站或应用遭受DDoS等网络攻…
阅读更多...
基于YOLOv8的暗光低光环境下（ExDark数据集）检测，加入多种优化方式---DCNv4结合SPPF ，助力自动驾驶（一）

基于YOLOv8的暗光低光环境下（ExDark数据集）检测，加入多种优化方式---DCNv4结合SPPF ，助力自动驾驶（一）

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了暗光低光数据集检测整个过程&#xff0c;从数据集到训练模型到结果可视化分析&#xff0c;以及如何优化提升检测性能。 &#x1f4a1;&#x1f4a1;&#x1f4a1;加入 DCNv4结合SPPF mAP0.5由原始的0.682提升至…
阅读更多...
在 VMware 虚拟机上安装 CentOS系统 完整（全图文）教程

在 VMware 虚拟机上安装 CentOS系统 完整（全图文）教程

一、前期准备&#xff1a; 1.安装VMware 虚拟机软件&#xff08;不在讲解&#xff0c;可自行去下载安装&#xff09;。官网&#xff1a;https://customerconnect.vmware.com/cn/downloads/details?downloadGroupWKST-PLAYER-1750&productId1377&rPId111471 2.下载iso…
阅读更多...
【AWS】step-functions服务编排

【AWS】step-functions服务编排

文章目录 step-functionsState machine typeStandard workflowsExpress workflows design skillsError handlingsaga Transaction processing控制分布式系统中的并发性 收费 作为AWS Serverless无服务器的一个重要一环 使用step-functions方法将 AWS 服务链接在一起 step-funct…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023