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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
node.js express框架简介与实现
Jul 23 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue项目实现分页效果
Mar 24 Vue.js
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
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python读写csv文件方法详细总结
2019/07/05 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
三八妇女节慰问信
2015/02/14 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
php引用传递
2021/04/01 PHP
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
使用python创建股票的时间序列可视化分析
2022/03/03 Python