vue-autoui自匹配webapi的UI控件

vue-autoui 是一款基于vueelement扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-formauto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的需要.auto-formauto-grid是通过json来形貌展示的结构,在处置上要比写html标签来得利便简朴, 但这控件的最大优势并不是在这里,它最主要的功效是可以连系webapi的信息来自动输出界面,只需要调整webapi的信息结构即可完成UI的调整。

基础使用

控件可以直接在vuejs功效中使用,但需要连系json来设置详细UI展示,以下是一个简朴的例子

    <auto-form ref="form" v-model="data" size="mini" :info="info">

    </auto-form>
    <el-button @click="if($refs.form.success()){alert(JSON.stringify(data))}">确定</el-button>

功效很简朴就是显示当前输入并验证通过的数据,下面用json形貌信息输入源。

        data(){         
            return {
                info: { items: [] },
                data: { },
            };
        },
        mounted(){
            var items = [];
            items.push({
                name: 'active', label: '流动名称', rules: [
                    { required: true, message: '请输入流动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            });
            items.push({
                name: 'region', label: '流动区域', type: 'select',
                data: [{ value: '广州' }, { value: '深圳' }, { value: '上海' }, { value: '北京' }],
                rules: [{ required: true, message: '请选择流动区域', trigger: 'change' }],
                eof: true
            });
            items.push({ name: 'starttime', label: '开启时间', type: 'date', rules: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }] });
            items.push({ name: 'endtime', label: '-', type: 'date', eof: true, rules: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }] });
            items.push({ name: 'instant', type: 'switch', label: '即时配送', eof: true });
            items.push({
                name: 'nature', type: 'checkbox', label: '流动性子',
                rules: [{ type: 'array', required: true, message: '请至少选择一个流动性子', trigger: 'change' }],
                data: [{ value: '美食/餐厅线上流动' }, { value: '地推流动' }, { value: '线下主题流动' }, { value: '单纯品牌暴光' }], eof: true
            });
            items.push({
                name: 'resource', label: '特殊资源', type: 'radio', rules: [{ required: true, message: '请选择流动资源', trigger: 'change' }],
                data: [{ value: '线上品牌商赞助' }, { value: '线下园地免费' }], eof: true
            });
            items.push({ name: 'remark', label: '流动形式', type: 'remark', rules: [{ required: true, message: '请填写流动形式', trigger: 'blur' }] })
            this.info = { items: items}
        }

以上是使用json来形貌一个输出的界面,详细效果如下:

 vue-autoui自匹配webapi的UI控件

虽然用json来形貌界面会比html形貌会利便一些,但总体上来说事情量照样有些大的,在调整界面的时刻也不利便。接下先容一下若何连系BeetleX.FastHttpApi来进一步简化这些繁琐的操作。

Webapi动态输出

其实在构建vue-autoui的时刻更多是思量和BeetleX.FastHttpApi举行一个整合,通过和后端融合可以把这些UI编写的事情量大大节省下来,让开发这些功效变得更简朴利便,更主要的是api转变后界面就自动顺应。使用要求:在和BeetleX.FastHttpApi整合还需要引用BeetleX.FastHttpApi.ApiDoc插件,由于这个插件用于给接口输出对应UI的JSON信息。接下来通过几个示例来先容整合的利便性:

上岸

上岸功效是对照常见的,接下来看一下使用auto-form若何连系webapi来完成这个功效。

<div>
    <auto-form ref="login" url="/login" v-model="login.data" size="mini">

    </auto-form>
    <el-button size="mini" @click="if($refs.login.success())login.post()">
        上岸
    </el-button>
</div>

以上是一个上岸功效UI的界说,是不是很简朴呢?通过指定url的webapi毗邻即可以自动顺应UI;这时刻只需要针对上岸接口举行一个界说即可:

        [Input(Label = "用户名", Name = "name", Eof = true)]
        [Required("用户名不能为空", Name = "name")]
        [Input(Label = "密码", Name = "pwd", Type = "password", Eof = true)]
        [Required("用户密码不能为空", Name = "pwd")]
        [Input(Label = "保留状态", Value = true, Name = "saveStatus")]
        public bool Login(string name, string pwd, bool saveStatus)
        {
            Console.WriteLine($"name:{name} pwd:{pwd} saveStatus:{saveStatus}");
            return name == "admin";
        }

vue-autoui自匹配webapi的UI控件

注册

接下来界说一个信息多些的注册界面

<div>
    <auto-form ref="login" url="/register" v-model="register.data" size="mini" @completed="onCompleted">

    </auto-form>
    <el-button size="mini" @click="if($refs.login.success())register.post()">
        注册
    </el-button>
</div>

在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));
            };
        }

代码主要是定密码和确认密码的对比验证,接下来看一下后台注册对应的接口

一文了解服务端推送(含JS代码示例)

    [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; }
    }

服务代码也没太多的转变,只是通过一些标签来符号一下相关属性的数据源和输入要求.详细运行效果如下:

 vue-autoui自匹配webapi的UI控件

数据列表

有应用中除了数据输出外更多的数据列表,auto-grid即是专门用于处置列表的一个控件,这个控件提供分页,选择,编辑和删除的功效;接下来做一个简朴的雇员列表示例:

<auto-grid url="/employees" @completed="employees.get()"
           @itemchange="onItemChange" 
           @itemdelete="onItemDelete"
           @command="onCommand"
           :data="employees.result" 
           size="mini" height="100%" 
           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;
        }

 vue-autoui自匹配webapi的UI控件

动态查询

现实应用中需要提供查询条件输入,这个时刻就可以把auto-formauto-grid整合起来,以下通过一个简朴的订单查询来展示这两个控件连系使用

    <auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()">

    </auto-form>
    <auto-grid url="/orders" height="300" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini">

    </auto-grid>

可以在auto-formfieldchange事宜中自动执行查询,对应的剧本代码如下:

        data(){
            return {
                orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] })
            };
        },
        methods: {
            onPageChange(page){
                this.orders.data.index = page;
                this.orders.get();
            },
        },
        mounted(){

        }

接下来需要实现服务端代码,由于方式需要形貌输入和列表以是对应的标签对照多

        [Input(Name = "id", Type = "select", DataUrl = "/EmployeeSelecter", Label = "雇员",NullOption =true)]
        [Input(Name = "customerid", Type = "select", DataUrl = "/CustomerSelecter", Label = "客户",NullOption =true,  Eof = true)]
        [SizeInput(Name = "size", Label = "分页纪录数")]
        [Input(Name = "index", Hide = true)]

        [Column("OrderID", Read = true)]
        [Column("EmployeeID", Type = "select", DataUrl = "/EmployeeSelecter")]
        [Column("CustomerID", Type = "select", DataUrl = "/CustomerSelecter")]
        [Column("OrderDate", Type = "date")]
        [Column("RequiredDate", Type = "date")]
        [Column("ShippedDate", Type = "date")]
        public object Orders(int id, string customerid, int index, int size, IHttpContext context)
        {
            Func<Order, bool> exp = o => (id == 0 || o.EmployeeID == id)
             && (string.IsNullOrEmpty(customerid) || o.CustomerID == customerid);
            int count = DataHelper.Defalut.Orders.Count(exp);
            if (size == 0)
                size = 20;
            int pages = count / size;
            if (count % size > 0)
                pages++;
            var items = DataHelper.Defalut.Orders.Where(exp).Skip(index * size).Take(size);
            return new { pages, index, items };

        }

 vue-autoui自匹配webapi的UI控件

插件详细代码 https://github.com/IKende/BeetleX-Samples/tree/master/Web.AutoUI

 

https://github.com/IKende/vue-autoui

原创文章,作者:admin,如若转载,请注明出处:https://www.2lxm.com/archives/1913.html