基于ts的动态接口数据配置的详解


Posted in Javascript onDecember 18, 2019

需求前景

前端组件是可复用的,那么复用前端组件时从后端读取的数据源同样也需要可复用(后端api也要是配置化的方式进行),前端需要提供配置项给后端进行动态配置生成api。

具体实现流程

基于ts的动态接口数据配置的详解

名词解析

mock 规范约束

使用的ts的 interface 进行编译前校验,所有的组件接收的 mock 结构,都必须是该 Interface 的实现

解析器

将mock打平成 key,value 结构的工具
eg.

interface I_EchartOption {
 series: {
   data: {
    name: string;
    value: numberOrString;
    unit?: string;
   }[];
 name?: string;
 type: "pie";
}; // 数据集配置
}
const mock:I_EchartOption = {
 series: [
  {
   type: "pie",
   data: [
    {
     name: "中药",
     value: "2630",
     unit: "家",
     _viewData:{ // 通过组合的自定义属性
       
     }
    },
   ]
  }
 ]
}
const parsingMock=(mock:I_EchartOption):T_formInfo=>{}
parsingMock(mock)
// 返回一个 Mock 描述,见下文

mock 描述

mock 描述,功能有两个

  1. 逆向生成 mock
  2. 接收后端传递的 build_option.options,渲染控制表单。
type T_formInfo = { // mock 描述的接口
 key: string, // 值得路径嵌套
 value: string, // 解析出来的value
 build_component: string, // 承载改配置项的表单组件
 build_option: { // 传递给表单组件的参数
  options: any[], // 通过请求后端,让后端进行填充
  [key: string]: any
 },
}
[
    {
      "key": "series.0.data",
      "build_component": "seriesData",
      "build_option": {
        "options":[]
        "dataLength": 1
      },
      "formValue": "",
    },
    {
      "key": "series.0.data.0._viewData",
      "build_label": "副指标series.0.data.0._viewData",
      "build_component": "viewData",
      "build_option": {
        "options":[]
        "isShowTitle": false,
        "_viewDataMaxLength": 1
      },
    },
    {
      "key": "series.0.type",
      "value": "pie"
    }
  ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
react-router实现按需加载
May 09 Javascript
js数组实现权重概率分配
Sep 12 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
H5实现手机拍照和选择上传功能
Dec 18 #Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 #Javascript
js实现上传图片并显示图片名称
Dec 18 #Javascript
js实现多图和单图上传显示
Dec 18 #Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 #Javascript
微信小程序实用代码段(收藏版)
Dec 17 #Javascript
微信小程序修改数组长度的问题的解决
Dec 17 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
firefox下input type="file"的size是多大
2011/10/24 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
jquery移动节点实例
2015/01/14 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
canvas绘制多边形
2017/02/24 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
vue-router传参用法详解
2019/01/19 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python处理二进制数据的方法
2015/06/03 Python
Python实现身份证号码解析
2015/09/01 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python实现用户答题功能
2018/01/17 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
2014年公务员转正工作总结
2014/11/07 职场文书
学术会议通知
2015/04/15 职场文书
微观世界观后感
2015/06/10 职场文书
导游词之西安骊山
2019/12/20 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
详解MySQL集群搭建
2021/05/26 MySQL