怎么做导航网站,国外建筑设计网站,wordpress是是是,建设银行有没有全球门户网站1 什么是 amis amis 是一个低代码前端框架#xff0c;它使用 JSON 配置来生成页面#xff0c;可以减少页面开发工作量#xff0c;极大提升效率。 看到amis一句话的介绍#xff0c;感觉就是JSON2WEB要找的前端框架。 amis是百度开源的框架#xff0c;毕竟是大厂#xff0c…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 langzhheadmeta charsetUTF-8 /titleamis demo/titlemeta http-equivContent-Type contenttext/html; charsetutf-8 /metanameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1/meta http-equivX-UA-Compatible contentIEEdge /link relstylesheet hrefsdk/sdk.css /link relstylesheet hrefsdk/helper.css /link relstylesheet hrefsdk/iconfont.css /!-- 这是默认主题所需的如果是其他主题则不需要 --!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11如果要支持 IE11 请引用这个 css并把前面那个删了 --!-- link relstylesheet hrefsdk-ie11.css / --!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果所以可能有细节功能用不了如果发现请报 issue --stylehtml,body,.app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}/style/headbodydiv idroot classapp-wrapper/divscript srcsdk/sdk.js/scriptscript typetext/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 relstylesheet hrefsdk/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: 52175217.com},context: {name: 白龙马}},// 注意是第四个参数{theme: ang});2.6 设置语言
// props 中可以设置语言默认是中文 let amisScoped amis.embed(#root,amisJSON,{// 设置语言 props 中可以设置语言默认是中文locale: en-US,// 这里是初始 propsdata: {email: 52175217.com},context: {name: 白龙马}},// 注意是第四个参数{theme: ang});其它行为和属性用到时在慢慢研究吧。
3 创建另一个页面World.html
直接复制hello.html的内容稍微改一下主题 和 页面title修改完以后 Hello.html是这样的
World.html是这样的 World.html的完整代码
!DOCTYPE html
html langzhheadmeta charsetUTF-8 /titleWorld/titlemeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1 /meta http-equivX-UA-Compatible contentIEEdge /link relstylesheet hrefsdk/sdk.css /link relstylesheet hrefsdk/helper.css /link relstylesheet hrefsdk/iconfont.css /link relstylesheet hrefsdk/ang.css /!-- 这是默认主题所需的如果是其他主题则不需要 --!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11如果要支持 IE11 请引用这个 css并把前面那个删了 --!-- link relstylesheet hrefsdk-ie11.css / --!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果所以可能有细节功能用不了如果发现请报 issue --stylehtml,body,.app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}/style
/headbodydiv idroot classapp-wrapper/divscript srcsdk/sdk.js/scriptscript typetext/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: 52175217.com},context: {name: 白龙马}},// 注意是第四个参数{theme: ang});})();/script
/body/html4 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}
}简介完。
