【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，一经查实，立即删除！

相关文章

新概念英语第二册（55）

新概念英语第二册（55）

【New words and expressions】生词和短语&#xff08;19&#xff09; gold n. 金子 mine n. 矿 treasure n. 财宝 revealer n. 探测器 invent …
阅读更多...
即插即用、简单有效的大语言模型推荐算法！港大联合百度推出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;通过引入文本信号…
阅读更多...
c# 正则表达式 帮助类

c# 正则表达式 帮助类

public class RegexHelper { /// <summary> /// 验证输入字符串是否与模式字符串匹配&#xff0c;匹配返回true /// </summary> /// <param name"input">输入字符串</param> /// <param nam…
阅读更多...
使用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 安装的&#…
阅读更多...
[力扣 Hot100]Day26 环形链表 II

[力扣 Hot100]Day26 环形链表 II

题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内…
阅读更多...
面试题：如何使用 Redis，打造一款 Feed 流系统？

面试题：如何使用 Redis，打造一款 Feed 流系统？

文章目录 背景相关概念什么是 feed 流feed 流分类设计Feed 流初始化推送发布/删除 Feed 流程推拉结合模式推模式两种模式总结：实现初始化 Feed 流关注的用户发布/删除新的 feed用户新增关注/取消关注最后
阅读更多...
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中的垃圾收集器使用不同的算法和策略来实现垃圾收集过程，以…
阅读更多...
VisaulStudio2022下用VB.net实现socket与西门子PLC进行通讯案例（优化版）

VisaulStudio2022下用VB.net实现socket与西门子PLC进行通讯案例（优化版）

前言 对于电气工程师来说，不仅要会PLC，还要会上位机。 此前，我写过一个VB.net下雨西门子PLC通讯案例的博文： VisaulStudio2019下用VB.net实现socket与西门子PLC进行通讯案例 但当时很多东西都理解不深，博文也写的比较浅，但我看有不少收藏，也有些朋友在底下询问，所以，…
阅读更多...
第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;而且该表的访问是在一个大事务中。加字段的时候一直在…
阅读更多...
深度解析与推荐：主流Web前端开发框架

深度解析与推荐：主流Web前端开发框架

一、引言 在信息化社会中，Web前端开发的重要性日益凸显。作为连接用户与后台服务的关键桥梁，前端界面不仅直接影响用户体验，更是企业品牌形象、产品价值传递的重要载体。随着互联网技术的飞速发展，用户对于网站和应用的交互性、响应速度以及视觉效果等方面的要求越来越高，…
阅读更多...
【Android】手机端使用NanoHTTPD搭建服务器

【Android】手机端使用NanoHTTPD搭建服务器

序言 NanoHTTPD 是一个轻量级的 Java HTTP 服务器库&#xff0c;可以在应用程序中快速搭建一个简单的 HTTP 服务器。 准备工作 引入依赖 implementation org.nanohttpd:nanohttpd:2.3.1添加网络访问权限 <uses-permission android:name"android.permission.INTERN…
阅读更多...
挑战杯 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;推荐具有…
阅读更多...
SIMD学习笔记1

SIMD学习笔记1

参考 http://const.me/articles/simd/simd.pdf https://www.intel.com/content/www/us/en/docs/intrinsics-guide/index.html#catsArithmetic&expand3904,3913,4011,34,4014,4602,4011&techsMMX,AVX_512,AMX,SVML,Other&ig_expand11 示例&#xff1a;对4个数字求平…
阅读更多...
最新文章

Copyright @ 2022~2023