基于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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
PHP实现的构造sql语句类实例
2016/02/03 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
语义化 H1 标签
2008/01/14 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
Python字符串处理实现单词反转
2017/06/14 Python
彻底理解Python list切片原理
2017/10/27 Python
详解flask表单提交的两种方式
2018/07/21 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python的pip安装以及使用教程
2018/09/18 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python新手学习标准库模块命名
2020/05/29 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
简述数组与指针的区别
2014/01/02 面试题
机械专业应届生求职信
2013/09/21 职场文书
家长会邀请书
2014/01/25 职场文书
先进个人自荐书
2015/03/06 职场文书
被告代理词范文
2015/05/25 职场文书
北京青年观后感
2015/06/15 职场文书
清明节随笔
2015/08/15 职场文书
学习经验交流会总结
2015/11/02 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python