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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
vue-cli常用设置总结
Feb 24 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JS控制伪元素的方法汇总
2016/04/06 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python 动态调用函数实例解析
2019/10/21 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
python缩进长度是否统一
2020/08/02 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
2014年小学植树节活动方案
2014/03/02 职场文书
婚纱店策划方案
2014/05/22 职场文书
施工工地安全标语
2014/06/07 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
企业文化学习心得体会
2016/01/21 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
k8s部署redis cluster集群的实现
2021/06/24 Redis