likes
comments
collection
share

把UI库变成低代码工具，LowCode 应该成为程序员的开发利器

作者站长头像
站长
· 阅读数 47

把UI库变成低代码工具

近几年“低代码”这个词非常火，不过有一些模糊的地方，比如“低代码”和“低代码平台”的区别、低代码的适用人群等。经常容易混淆，然后带来一些误解。

相关文章

低代码平台（LCDP）

低代码开发平台（LCDP）是无需编码（0 代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法（参考可视编程语言），使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。 低代码开发平台（LCDP）的正式名称直到 2014 年 6 月才正式确定，整个低代码开发领域却可以追溯到更早前第四代编程语言和快速应用开发工具。

上面是在网上找到的低代码平台的解释，不过大家不要被误导，首先这说的是“平台”，其次可视化、拖拽并不是重点，如果这些是重点的话，那么Dreamweaver、Visual Basic、Delphi、Webform 等是低代码吗？显然并不是，虽然他们都有可视化和拖拽的功能。

本篇要介绍的不是“低代码平台”，而是一种“低代码”的实现方式。（注意，不是使用方式）

低代码（LowCode）

低代码，并不只有开发平台的形式，也可以是一种开发工具，或者是一种“引擎”，介于“UI库”和“业务组件”之间。

可以用低代码实现一个开发平台，也可以用低代码直接开发项目。

那么低代码的正确打开方式是什么呢？其实很简单 —— 用更少的代码实现更多的功能！

看看编程语言的发展史，其实就是在不断的“减少”代码。（想想汇编需要写多少代码，C语言需要多少代码，如果没有SQL，那么访问关系型数据库需要写多少代码？）

还有各种层出不穷的类库、框架等，都在帮助我们“少”写代码，比如：（以前端为例）

  • jQuery，不用考虑浏览器的兼容问题。
  • vue，不用考虑如何设置dom的问题。
  • 各种 UI库，不用考虑css和js脚本的问题。
  • 其他

这些都拥有“低代码”的特点，但是还差了一点点，我们可以站在“巨人的肩膀上”整合一下，加上一点自己的代码，然后适合程序员的低代码就诞生了！

下面以后台管理类项目为例，简单介绍一下。（不扯大道理，尽量捞干的）

用低代码的方式实现列表

如果要做一个商品列表，那么如何实现呢？

  1. 直接使用 table，需要我们自己管理dom。
  2. 使用UI库里的 xx-table，设置属性即可。
  3. 依赖 json 渲染，管理好json即可。

选项一是以前的方式，选项二是我们现在常用的方式，选项三就是我要说的低代码的方式。

那么具体如何实现呢？

  • 选择一个前端框架，比如Vue3
  • 选择一个UI库，比如 element-plus
  • 定义一个 json 结构
  • 基于el-table进行二次封装。
  • 加载 json，调用列表控件。

定义列表用的的json

{
  "gridMeta": { 
    "moduleId": 143,
    "idName": "ID",
    "colOrder": [
      150, 151, 152, 153,
      160, 161, 162, 163, 164
    ]
  },
  "height": 400,
  "stripe": true,
  "border": true,
  "fit": true,
  "highlight-current-row": true,
  [可以增加其他属性],
  "itemMeta": {
    "90": {
      "id": 90,
      "colName": "kind",
      "label": "分类",
      "width": 140,
      "title": "分类",
      "align": "center",
      "header-align": "center"
    },
    "100": {
      "id": 100,
      "colName": "area",
      "label": "多行文本",
      "width": 140,
      "title": "多行文本",
      "align": "center",
      "header-align": "center"
    },
    其他字段
  }
}
  • gridMeta 里面是低代码需要的属性，
  • itemMeta 是列表里列的属性集合。
  • 其他的属性对应 el-table 的属性，可以通过 $attrs 传递和绑定。

基于 el-table 二次封装控件，实现依赖json渲染

  <el-table
    ref="gridRef"
    :height="height"
    :stripe="stripe"
    :border="border"
    :fit="fit"
    :highlight-current-row="highlightCurrentRow"
    v-bind="$attrs"
    :data="dataList"
    :row-key="gridMeta.idName"
    @selection-change="selectionChange"
    @current-change="currentChange"
  >
    <!--显示选择框-->
    <el-table-column
      type="selection"
      width="55"
      align="center"
      header-align="center"
    >
    </el-table-column>
    <!--显示字段列表-->
    <el-table-column
      v-for="(id, index) in gridMeta.colOrder"
      :key="'grid_list_' + index + '_' + id"
      :min-width="50"
      :column-key="'col_' + id"
      v-bind="itemMeta[id]"
      :prop="itemMeta[id].colName"
    >
    </el-table-column>
    <!--右面的操作列-->
  </el-table>

json 里的数据 可以通过 props 和 $attrs 传入组件，然后绑定 el-table 的属性。

用 v-for 遍历 el-table-column，实现列表，是不是很简单。

具体实现方式可以看这里：juejin.cn/post/710598…

在项目里的使用方式

  • 加载json
  • 调用列表控件
  • 设置属性
  • 搞定
<template>
  <!--表单控件-->
  <nf-grid
    v-grid-drag="gridMeta"
    v-bind="gridMeta"
    :dataList="dataList"
    :selection="selection"
    size="small"
  />
  {{selection.dataId}}<br>
  {{selection.dataIds}}<br>
  {{selection.row}}<br>
  {{selection.rows}}<br>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import _gridMeta from './grid.json'  // 列表用的 json 文件
  import _formMeta from '../form/form.json'

  export default defineComponent({
    name: 'nf-elp-grid-page',
    setup(props) {
      // 设置列表控件需要的属性
      const gridMeta = reactive(_gridMeta)
      // 设置单选和多选时选择的记录
      const selection = reactive({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })

      // 根据 meta 创建演示数据
      const _dataList = createDataList(_formMeta.itemMeta, 10).reverse()
      const dataList = reactive(_dataList)

      return {
        dataList,
        selection,
        gridMeta
      }
    }
  })

</script>

是不是很简单。

用低代码的方式实现表单

列表搞定了，那么表单呢？当然也可以，还是上面的套路，具体实现方式可以看这里：

juejin.cn/post/711484…

juejin.cn/post/711225…

表单控件的效果：

  • 双列表单

把UI库变成低代码工具，LowCode 应该成为程序员的开发利器

  • 分栏的多tab形式：

把UI库变成低代码工具，LowCode 应该成为程序员的开发利器

  • 分栏的Card形式：

把UI库变成低代码工具，LowCode 应该成为程序员的开发利器

做一个维护 JSON 的工具

其实上面说的都不是重点，因为可能您早就这么做了，然后发现一大堆问题，最后不得不放弃，认为这条路不对劲，一开始看着挺好，但是越走越崎岖，最后陷入泥潭。

出现这样的感觉，有多种可能：

  • 没有处理好“边界”，哪些功能由低代码实现，哪些功能由UI库实现（常规方式）。
  • 没有处理好自定义扩展，列表、表单都需要支持自定义扩展，不能一有新的需求，就去改内部代码。
  • 没有设置维护JSON的工具，JSON文件靠手撸是不现实的。
  • 其他

第一个问题需要有足够的经验和脑洞； 第二个问题，要感谢 Vue提供技术支持，我们可以通过组件、插槽等方式更方便的实现扩展； 第三个问题嘛，要辛苦一点了，不过我正在做这个工具。

把UI库变成低代码工具，LowCode 应该成为程序员的开发利器

把UI库变成低代码工具，LowCode 应该成为程序员的开发利器

通过工具维护JSON就方便多了。

和常规开发方式的无缝衔接

低代码开发还有一个“致命”的问题，使用你的低代码的方式开发项目，如果遇到实现不了的功能，怎么办？ 项目做了一大半，如果改用其他方式，是不是要推倒重来？这可扛不住！

为了避免出现这样的尴尬，我们的低代码采用了基于 Vue 和UI库的方式，所以可以和常规开发的项目实现无缝衔接。 因为本质都是 vue 的组件，设置好加载规则，可以随时切换其他组件。

点击菜单，可以加载用低代码实现的组件，也可以加载常规方式实现的组件，这样就可以无缝切换了。

万一遇到低代码搞不定的需求，也可以从容切换开发方式，前面实现的功能也不受影响。这样大家可以放心食用。

进度

现在主要的“框架”已经搭建起来，当然还有很多细节需要完善，还有好多bug要改，毕竟一个人精力有限，欢迎大家一起来完善。

源码：

ui-core （打算支持各种UI库） gitee.com/naturefw-co…

ui-elp （基于 element-plus 的二次封装） gitee.com/naturefw-co…

nf-state （轻量级状态管理） gitee.com/naturefw-co…

json 维护工具 gitee.com/naturefw-co…

json的维护工具在不断的完善中，还有一个综合性的维护平台待开发，一些基础功能模块待开发，比如权限角色、组织架构、员工账号等。

设想的比较全面，然后一步一步实现。

各种demo

俗话说的好，是骡子是马牵出来溜溜，说的那么好听，实际做的项目是什么样子呢？

这个大家不要着急，后续会做一些简单的demo来具体演示功能和效果，比如差旅费报销的小模块，当然只是简单的演示一下如何实现基础的增删改查的功能，不是财务角度的软件。

转载自:https://juejin.cn/post/7117071097425559582
评论
请登录