5分钟就能搞懂的低代码前端框架,0基础开发测试平台轻松实现一并超

作者对性能测试充满热情,决定开发自己的测试平台,但作为前端新手感到困扰。发现amis——百度的开源低代码前端框架,该框架允许无需HTML/CSS/JS知识即可创建界面。通过amis的拖拽编辑器,作者已开始搭建平台并创建出web界面,对未来的功能完善和业务逻辑实现充满期待。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我非常热爱性能测试,对其热爱程度,有时甚至疯魔。这不,我又想自己开发一款性能测试平台了。

但是,我是前端小白啊!

01

让我开发桌面客户端软件,没有什么样式要求,这还可以(实际上,我经常自己开发一些桌面工具),现在要开发一个平台,要有web界面,这不得有前端知识,还需要耗费大量时间调整界面样式吗?没个好看的界面,用户都不愿意用到这东西。而且前端技术很多,最起码得懂HTML\CSS\JS吧。

我的天啊,做做梦吧,也许更容易实现。

放弃吧,兄弟!

但是,我已经疯魔了,谁的话,都听不进去,誓有不撞南墙不回头的架势。成功与否,样子得做足了,你说,是不!

02

皇天不负有心人,真让我找到了一个神器--amis。

amis,是百度开源的一款前端低代码框架。

“低代码”,看这词,多吸引人啊!少写代码!

此时的我,已经两眼放光了,饿狼,遇到了孤羊。想着都留口水。

于是,我一个饿狼捕食,一头咋进了amis的官方文档中,这不看不知道,一看更让我笑开花。这玩意,可以是:

完全没有HTML\CSS\JS等任何前端知识的人都能使用

生成的代码是json

还有编辑器,通过拖拽,所见即所得

百度自己公司,大量网站都使用这个框架

我的妈呀,为啥没有早点遇到你啊!

03

于是乎,我兴奋的抬起头,开始搭建我的性能测试平台的脚手架。

然后,把在大脑中设计好的每一个页面,用amis的编辑器,拖拽出来。满意之后,再把整个页面的json,拷贝出来,放到我的项目里,运行项目。

就这么简单,一个页面就做出来了。

全程,我都没有自己手写HTML,更是一句css和js都没有写。

一个页面做出来了,再多做几个页面,难吗?

我很兴奋,你呢?

接下来,我们来剧透一下,这个还只完成了约三分之一的性能测试平台吧!

没有任何前端基础,已经写出了web界面,下一步,就是不断完善功能,实现平台的更多业务逻辑了。

兴奋的期待,早日实现。

最后: 下方这份完整的软件测试视频学习教程已经整理上传完成,朋友们如果需要可以自行免费领取【保证100%免费】

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

此版本更新内容包括:Feature :sparkles: 新增 sortBy 和 topAndOther filter (#1378) (#1379) api 新增 responseData 配置 (#1379) 添加季度选择器 Quarter (#1382) Container 支持设置样式 (#1411) 加入 ecStat, Apache ECharts (incubating) 的统计和数据挖掘工具 (#1419) Form 支持 feedback (#1420) 新增仿 antd 主题 (#1421) Enhancement jssdk 支持外部监控路由变化重新切换页面 (#1373) 选择类表单项 selectFirst 跳过 disabled 的选项 (#1393) iconfont 发布到 sdk 里 (#1395) api mock 地址替换 (#1408) Echarts 没数据时显示 loading (#1409) Breaking :翻译文件的 key 不再是中文,如果有修改过英文翻译,需要换成新 key (#1416) (#1418) 拆解 factory.tsx,添加 RootRenderer,并能 处理部分 action, 直接渲染个按钮也能弹窗,发ajax了 (#1425) Text 配置 source 样式优化 (#1429) 更换 autobind,继承时 this 不错乱 (#1433) Bugfix 修复 表单项在不配置 name 的时候,value 属性失效问题 (#1372) 修复 Excel 导出的列顺序依照配置的顺序,而不是数据源 (#1377) 修复 ChartRadios tooltip 问题. (#1378) 修复 位置选择组件在新版百度地图 api 下无法使用问题 (#1381) 修复 表单项有多个的时候,回车不提交问题 (#1387) 修复 helper 中 white-space 不正确问题 (#1390) 修复 Excel 导出不支持嵌套 name 和 tpl 问题 (#1424) 修复 收起状态导航菜单不可点击跳转问题 (#1428) 修复 Checkbox 无 disabled 样式问题 (#1414)amis前端低代码框架是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+ 页面。amis前端低代码框架特点1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis 页面是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种页面组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+ 页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有过 1 万行 JSON 配置
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+ 页面。 特点: 1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis 页面是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种页面组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+ 页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有过 1 万行 JSON 配置。   amis前端低代码框架 更新日志: v1.1.7 Feature Wrapper 组件 style 支持动态获取 数据映射支持 cookie 获取 内置 filter 新增 map 方法 Rating 组件支持清空 Tabs 的 activeKey 支持变量 Excel 导出支持自定义文件名 数据映射的 key 可以支持 . 或者 [] 来指定路径 Tree-Selector 支持懒加载 升级 ECharts 到 5.1.1 升级 Monaco-Editor 到 0.24.0 Enhancement 升级 mst 到 3 的最新版本 开发使用 concurrently 避免新开一个窗口 data-link 优化 Wizard 组件新增 startStep 配置项 按钮 tooltip 整理,支持 disabledTip Each 组件空状态时文字居左,同时将空数组状态也认为是空状态 去掉 Tab line 模式下顶部的 padding Uuid 有值时不设置,没值自动设置 TextArea 组件最小行数限制 & 静态展示出等 Form 远端校验显示报错时,可以再次提交 Nav 的 mapTree 需要 depthFirst Checkboxes 分组样式优化 DateTime-Range下拉增加 popoverClassName 属性,可以自定义弹框的 className; 父级有缩放比时弹框宽度计算问题修复; Date 快捷键支持上月底 autoFill 支持多选 CRUD 的 toolbar 默认不再将最后一个组件放右边 接口兼容多种 json 返回格式 CRUD filterable 判断是否选中不要那么严格 Button-Group disabled 统一使用透明度的方式来实现,不然无法区分选中状态是哪个 调整日期按钮位置顺序 和 Dialog 统一 Bugfix 修复 Audio should not call load method at first render 修复 文档多余描述 修复 CRUD filter Combo模式不能清空查询条件 修复 初始状态 autoFill 不同步的问题 修复 文档样例错误 修复 Audio 组件 src 属性不符合预期的行为 修复 表单联合校验问题 修复 PopOver 宽度计算问题 修复 图片表单项 disabled 影响放大功能的问题 修复 Transfer selectTitle resultTitle 不生效的问题 修复 Tree 组件问题 修复 Fiule 组件错误提示样式问题 修复 Select 组件自定义菜单模式下无法全选问题 修复 Number 最大最小值校验问题 修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题 修复
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值