vue-autoui自匹配webapi的UI控件的实现


Posted in Javascript onMarch 20, 2020

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

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

[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(){

    }

接下来需要实现服务端代码,由于方法需要描述输入和列表所以对应的标签比较多

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

    }

vue-autoui自匹配webapi的UI控件的实现

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

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

到此这篇关于vue-autoui自匹配webapi的UI控件的实现的文章就介绍到这了,更多相关vue-autoui自匹配webapi的UI控件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
微信小程序保持session会话的方法
Mar 20 #Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 #Javascript
js 闭包深入理解与实例分析
Mar 19 #Javascript
JS一次前端面试经历记录
Mar 19 #Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
浅析TypeScript 命名空间
Mar 19 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php下获取http状态的实现代码
2014/05/09 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
python妹子图简单爬虫实例
2015/07/07 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
酒店总经理助理职责
2014/02/12 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
遗失证明范文
2015/06/19 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
亲情作文之母爱
2019/09/25 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
Python函数对象与闭包函数
2022/04/13 Python
Python循环之while无限迭代
2022/04/30 Python