基于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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
javascript 函数速查表
Feb 07 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
Laravel日志用法详解
2016/10/09 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
javascript 数组操作详解
2015/01/29 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
python日志记录模块实例及改进
2017/02/12 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
会计岗位职责
2013/11/08 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
民事纠纷协议书
2016/03/23 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技