效率开发利器--基于Vue的JSON配置式低代码组件

管理后台的前端页面开发过程中，大量的时间投入到高度类似的页面功能中，在相似的页面中复制-粘贴-修改倍感疲惫。如何高效的完成类似页面的开发，解放双手，做有意义的事-摸鱼，正是Dynamic-Vue将要解决的问题。如果您有这样的理想😍不妨继续往下看。...

weixin_40167365

2423人浏览 · 2022-08-31 21:20:20

weixin_40167365 · 2022-08-31 21:20:20 发布

管理后台的前端页面开发过程中，大量的时间投入到高度类似的页面功能中，在相似的页面中复制-粘贴-修改倍感疲惫。如何高效的完成类似页面的开发，解放双手，做有意义的事-摸鱼，正是Dynamic-Vue将要解决的问题。如果您有这样的理想😍不妨继续往下看

定位

开发–面向开发者的JSON配置式低代码页面生成组件库。
灵活–既可作为JSON配置式低代码引擎使用，也可作为通用组件库在项目中使用。
极简–极简的配置项，低学习成本，可更快速上手项目实战

描述

可实现大部分信息管理类页面包括列表信息表单信息统计图表等
可以极大的减少页面开发工作量，极大提升效率。
统一的样式，交互，便于维护
当前版本基于Vue2.6 elment-Ui

架构设计

如图所示，Dyvue整体包含为四大要素：

配置
组件
操作
数据源

结合以上架构图可知，使用Dy-Vue后开发者需要关心的将聚焦于配置、组件和数据源Api,对于常规页面通常只需要填写JSOn配置+编写数据源Api（接口）即可，当遇到特殊交互、复杂页面可以编写自定义组件、自定义操作嵌入到Dyvue中。
下面我们将分别介绍以上4大要素：

配置

Dy-Vue 设计初衷是实现配置式低代码管理后台页面开发，是借助配置驱动整个页面功能， 配置是Dyvue的大脑/中枢，配置主要分为两部分:

数据字段配置

管理页面中常见组件包括搜索栏，表格，表单都是需要和服务端交互的组件，其中大量场景中数据字段配置是相同/重叠的，所以我们将数据字段提取出来作为单独的一项配置，也为对接后台快速开发提供了便利

页面功能配置

页面功能配置包括页面布局，内容组件属性，操作行为等，配合数据字段配置实现整体功能

组件

页面是由组件组成的，Dy-Vue定义了后台管理常用的组件，包括动态表单，动态表格，动态操作栏，动态表单弹窗，动态内容弹窗，以及集成了上述组件的CURD模板组件等 组件是Dyvue的血肉机体

组件要点：

通过页面配置将组件组织起来
您既可以使用Dy-Vue提供的模板组件实现列表页面功能，也可以只使用部分功能组件实现特殊页面需求
如果需要使用自定义组件，只需要全局注册后，就可以在Dyvue中配置使用

操作

如果整体配置是大脑，组件是血肉，那么操作action就是筋骨，将全身肌体串联起来，在配置的驱动下实现页面交互功能，Dy-Vue提供了丰富多样的交互类型，合理配置能实现功能复杂的页面交互。

操作会携带页面相关数据（表格页面模板上方操作栏支持获取搜索栏数据(导出)和列表中选择的数据、列表右侧操作栏支持获取当前行数据）
操作出发时支持弹出poper层、msgBox提示
请求/下载等操作发起后支持多种回调

数据源

数据是Dyvue的灵魂，配置、组件、操作、样式都是服务于数据，数据源Api就是获取数据、操作数据的器具

数据源Api是函数，它会接收一组数据，并返回一个Promise契约，契约中就返回了页面灵魂，真正的大佬–数据 😉 😍
Dy-Vue 组件中预定义了自身的交互数据格式，复杂的表单组件中这与实际数据源需要的数据大概率并不一致，但您可以在数据源Api中进行适配，这包括处理前适配和处理后配置，使用Dy-Vue后主要的工作之一就是定义数据源Api（接口联调）

// 接口数据源
function apiSaveApi (params) {
  //请求数据适配
  params.dictId=params.dictId[0]?.id
  return request({
    url: '/api/save',
    data: params,
  }).then((res)=>{
      //响应数据适配
      return  res.data
  })
}

//本地自定义数据源
 function tableinfoListApi (params) {
    return Promise.resolve(apiListMock(fields,5));
}

简单示例

options.treeOption.data

<template>
  <DynamicCurdPage
  class="relative"
    :entityLabel="entityLabel"
    :fields="fields"
    :pageOptionsprops="pageOptions"
    :apiPromises="apiPromises"
  ></DynamicCurdPage>
</ClientOnly>
</template>
<script>
const entityLabel = '****'
//字段配置
const fields  =[
 { key: "keyWord", type: "FormInput", label: "关键字",  searchOption:true
  },
  {key:'id' ,type:'FormHide',formOption:true},
  {
    key: "name",
    type: "FormInput",
    label: "姓名",
    formOption: {
      rules:['required']
    },
    tableOption: true,
    searchOption:true
  },
   //省略其他字段
  {
    key: "remark",
    type: "FormTextarea",
    label: "备注",
    tableOption:true,
    formOption:{
      col:2
    }
  },
]
export default {
  data () {
    return {
      // form字段
      fields,
      entityLabel,
       // CURDApi配置
      apiPromises:{
        create:tableinfoSaveApi,
        bulkdelete:tableinfoDeleteApi,
        list:tableinfoListApi,
        detail:tableinfoDetailApi,
        update:tableinfoUpdateApi
      },
      // 页面配置
      pageOptions: { },
      }
    }
  }
//----------------------数据请求Api-------------------
 function tableinfoListApi (params) {
  return import("../.vuepress/components/vuePlugins/utils").then(module=>{
    return Promise.resolve(module.apiListMock(fields,5));
  })
}

 function tableinfoDetailApi (data) {
  return Promise.resolve(data)
}
</script>