【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.hqwc.cn/news/450664.html

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

相关文章

有限合伙协议书（模板）上

有限合伙协议书（模板）上

第一章 合伙的目的和合伙经营范围 第一条 合伙目的&#xff1a;为了适应市场经济的发展&#xff0c;满足市场需求&#xff0c;按照《合伙企业法》规范企业行为&#xff0c;合伙人本着公平、平等、互利的原则&#xff0c;成立 聚源企业管理中心&#xff08;有限合伙&am…
阅读更多...
回归预测 | Matlab基于OOA-LSSVM鱼鹰算法优化最小二乘支持向量机的数据多输入单输出回归预测

回归预测 | Matlab基于OOA-LSSVM鱼鹰算法优化最小二乘支持向量机的数据多输入单输出回归预测

回归预测 | Matlab基于OOA-LSSVM鱼鹰算法优化最小二乘支持向量机的数据多输入单输出回归预测 目录 回归预测 | Matlab基于OOA-LSSVM鱼鹰算法优化最小二乘支持向量机的数据多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab基于OOA-LSSVM鱼鹰算法…
阅读更多...
C#入门详解_01_课程简介、C#语言简介、开发环境和学习资料的准备

C#入门详解_01_课程简介、C#语言简介、开发环境和学习资料的准备

文章目录 1. 课程简介2. C#语言简介3.开发环境与学习资料 1. 课程简介 开设本课程的目的 传播C#开发的知识&#xff0c;让更多的人有机会接触到软件开发行业引导有兴趣或者想转行的朋友进入软件开发行业 课程内容 完整讲述C#语言在实际软件开发中的应用采用知识讲述加实例程序…
阅读更多...
全面认识DOS系统

全面认识DOS系统

目录 一、DOS系统的功能 1.执行命令和程序&#xff08;处理器管理&#xff09; 2.内存管理 3.设备管理 4.文件管理 5.作业管理 二、文件与目录 三、文件类型与属性 1.系统属性&#xff08;S&#xff09; 2.隐含属性&#xff08;H&#xff09; 3.只读属性&#xff08…
阅读更多...
第四十二周：文献阅读+机器学习方法

第四十二周：文献阅读+机器学习方法

目录 摘要 Abstract 文献阅读&#xff1a;时间序列模型在水质预测中的应用 现有问题 提出方法 ARIMA&#xff08;自回归差分移动平均模型&#xff09; K-means聚类分析 研究实验 数据集 评价指标 实验目的 实验设置 实验结果 ARIMA模型python实现 机器学习总结 …
阅读更多...
【ELK】logstash快速入门

【ELK】logstash快速入门

1.概述 1.1.什么是logstash&#xff1f; 之前我们聊了es&#xff0c;并且用docker搭建了一个eskibana的环境。es目前最普遍的用法是用来存储日志的&#xff0c;然后结合kibana对日志做一些可视化的工作。既然要收集日志&#xff0c;就面临着一个问题&#xff1a; 各个系统的…
阅读更多...
LNMP.

LNMP.

一.mysl配置 1.安装mysql yum install mysql-server -y 2.进入mysql配置文件目录 cd /etc/my.cnf.d3.编辑mysql配置文件 vim mysql-server.cnf 在[mysqld]中添加: character-set-serverutf84.启动mysql服务 systemctl start mysqld5.登入mysql mysql 6.创建数据库 cre…
阅读更多...
嵌入式学习第十八天

嵌入式学习第十八天

51单片机 51单片机是基于Intel的微处理器体系结构发展而来的。 主要由CPU、存储器、定时器/计数器、串行口等模块组成 优点&#xff1a;低功耗、低成本、高性能 开发工具&#xff1a; Keil uVision4&#xff08;支持汇编语言和C语言编程&#xff09; stc-isp-v6.92L&…
阅读更多...
Vue基础知识七

Vue基础知识七

一 路由 1.1 生活里的路由与路由器 是为了实现多台设备上网 1.2 程序里的路由与路由器 是为了实现导航区与展示区来回切换&#xff1b; SPA单页面应用&#xff1a;就像前几章节里的项目&#xff0c;整个项目只有一个html文件&#xff1b; 案例 注意&#xff0c;最开始的时候…
阅读更多...
《生成式AI与大模型核心技术开发与应用研修班》的通知

《生成式AI与大模型核心技术开发与应用研修班》的通知

Chart GPT 的发布&#xff0c;让大语言模型成了人工智能的焦点。尤其近期发布的大模型各业务场景应用应接不暇&#xff0c;为行业带来新的发展机遇&#xff0c;甚至将重构AI行业。AI行业的发展将以云平台、算力、大模型构成行业发展的三驾马车。大模型和小模型的融合使用&#…
阅读更多...
day10笔记

day10笔记

API 显示->索引->搜索框输入->回车查看信息 字符串 直接赋值进串池(会先找,有复用) new出来的在堆里面 字符串比较 ""引用数据类型比较的是地址值 一模一样的比较 忽略大小写的比较 Scanner输入的数据是new出来的 遍历字符串 public class StringDe…
阅读更多...
Ubuntu 添加字体

Ubuntu 添加字体

Ubuntu 添加字体 Ubuntu如何添加新的字体&#xff1f;似乎远远没有Windows方便呀&#xff0c;查询了一些资料&#xff0c;与大家分享。 方法1 根据字体名称直接安装 oyroy-FMVU08001:~$ sudo apt-get install fonts-wqy-zenhei [sudo] roy 的密码&#xff1a; 正在读取软件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023