在UI定义上基于没什么变化，只是调整一下对应的url地址，在这里多了一下completed事件，这个事件主要是通过接口加载UI信息才会触发的。对应功能的javascript代码
data(){ return { register: new beetlexAction('/register', {}), checkConfirmPassword: (rule, value, callback) => { var password = this.$refs.login.getField('Password'); var cpassword = this.$refs.login.getField('ConfirmPassword'); if (password.value != cpassword.value) callback(new Error('确认密码不正确!')); else callback(); }, } }, methods: { onCompleted(){ this.$refs.login.getField('ConfirmPassword').rules.push({ validator: this.checkConfirmPassword, trigger: 'blur' }); }, }, mounted() { this.register.requested = (r) => { alert(JSON.stringify(r)); }; }
代码主要是定密码和确认密码的对比验证，接下来看一下后台注册对应的接口
[Post] public RegisterDto Register(RegisterDto register) { Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(register)); return register; } public class RegisterDto { [Input(Label = "用户名", Eof = true)] [Required("用户名不能为空")] [DataRange("用户名的必须大于3个字符", Min = 3)] public string Name { get; set; } [Input(Label = "邮箱地址", Eof = true)] [Required("邮件地址无效", Type = "email")] public string Email { get; set; } [Input(Label = "密码", Eof = true, Type = "password")] [Required("输入密码")] public string Password { get; set; } [Input(Label = "确认密码", Eof = true, Type = "password")] [Required("输入确认密码")] public string ConfirmPassword { get; set; } [GenderInput(Label = "性别", Value = "男", Eof = true)] public string Gender { get; set; } [Required("选择所在城市")] [CityInput(Label = "城市", Eof = true)] public string City { get; set; } [HobbyInput(Label = "爱好")] [Required("选择爱好", Type = "array", Trigger = "change")] public string[] Hobby { get; set; } }
服务代码也没太多的变化，只是通过一些标签来标记一下相关属性的数据源和输入要求.具体运行效果如下:
数据列表
有应用中除了数据输出外更多的数据列表，auto-grid即是专门用于处理列表的一个控件，这个控件提供分页，选择，编辑和删除的功能；接下来做一个简单的雇员列表示例:
<auto-grid url="/employees" @completed="employees.get()" @itemchange="onItemChange" @itemdelete="onItemDelete" @command="onCommand" :data="employees.result" size="mini" edit="true" delete="true"> </auto-grid>
这个列表提供编辑和删除功能，相关脚本代码如下:
data(){ return { employees: new beetlexAction('/employees', {}, []) } }, methods: { onCommand(e){ this.$open('models-employee', e.data); }, onItemChange(item){ if (confirm('是否要修改' + item.data.FirstName + '?')) { item.success(); } }, onItemDelete(item){ if (confirm('是否要删除' + item.data.FirstName + '?')) { item.success(); } }, }, mounted() { }
接下来的工作就是在服务端定义api来输出结果
[Column("FirstName", Type = "link")] [Column("LastName", Read = true)] [Column("Title")] [Column("HomePhone")] [Column("City")] [Column("Address")] public object Employees() { return DataHelper.Defalut.Employees; }
动态查询
实际应用中需要提供查询条件输入，这个时候就可以把auto-form和auto-grid整合起来，以下通过一个简单的订单查询来展示这两个控件结合使用
<auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()"> </auto-form> <auto-grid url="/orders" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini"> </auto-grid>
可以在auto-form的fieldchange事件中自动执行查询,对应的脚本代码如下:
data(){ return { orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] }) }; }, methods: { onPageChange(page){ this.orders.data.index = page; this.orders.get(); }, }, mounted(){ }
接下来需要实现服务端代码，由于方法需要描述输入和列表所以对应的标签比较多
data(){ return { orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] }) }; }, methods: { onPageChange(page){ this.orders.data.index = page; this.orders.get(); }, }, mounted(){ }
插件详细代码https://github.com/IKende/BeetleX-Samples/tree/master/Web.AutoUI