Blazor与百度Amis的激情碰撞

Blazor与百度Amis的激情碰撞

---

---

Baidu Amis

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 生态，相关的库有 2347 个，很多功能相似，挑选成本高。

然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……

而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：

可以对数据做筛选
有按钮可以刷新数据
编辑单行数据
批量修改和删除
按某列排序
可以隐藏某些列
可以调整列顺序
自动生成顶部查询区域
可调整列宽度
开启整页内容拖拽排序
表格有分页（页数还能同步到地址栏，不过这个例子中关了）
有数据汇总
支持导出 Excel
「渲染引擎」那列的表头有提示文字
鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多
如果往下拖动还有首行冻结来方便查看表头

全部实现这些需要大量的代码。

但可以看到，用 amis 只需要 157 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。

这正是建立 amis 的初衷，我们认为：对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和工具。

1、使用Amis 创建一个页面

{
          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'
              }
            ]
          }
        }

---

2、在Blazor中使用Amis

对于上面的json定义，在c# 中可以使用匿名类来表达

@code{
	public object GetObj(){
			var data = new
			        {
			            type = "page",
			            title = "表单页面",
			            body = new
			            {
			                type = "form",
			                mode = "horizontal",
			                api = "/saveForm",
			                body = new[]
			                {
			                    new { label = "Name", type = "input-text", name = "name" },
			                    new { label = "Email", type = "input-email", name = "email" }
			                }
			            }
			        };
	}
}

使用Amis组件。

<Amis Obj="GetObj()"></Amis>

3、效果

---

4、总结

完整代码请参考https://github.com/weibaohui/blazoramis