页面可视化设计——用拖拽的方式搭建你的系统|点点更轻松

我们一直都致力于更好，无论对于个人、团队、公司来说，追求的点是各式各样的，像是低成本、高效率、可复用、易上手、易维护等等，都是我们努力的方向。

组件和库越来越多，越来越丰富。这都是我们发展和前进的目标。

各种工具层出不穷，根本都是为了提高生产力，就像今天要讲的，也是在这个方向上进行探索，页面可视化设计，也就是所谓的低代码，可以帮助我们方便快捷的搭建一套业务系统。

概述

不同的系统有不同的理念，不同的理念会输出不同的产品，我把本套系统命名为lecen，今天通过lecen来看一下它的设计思路，以及可以做哪些事情。

我们把页面构想为三个部分：数据视图、请求链接、执行寄连。

数据视图：在页面中所有能够看到的，如：表单、表格、按钮、下拉框等等元素，以及各种交互的行为和样式。

请求链接：页面中所有的接口，比如列表的获取、表单的提交。

执行寄连：页面中用到的函数或者任意代码块。

通过这三个部分，我们就可以实现一个完整的页面。

不过本次先重点来看一下这个页面设计器。

页面设计

首先打开页面设计器：

由于目前是一个空系统，还没有任何的模板可以使用，因此可以点击加号来新增一个页面设计。

通过敲击空格，来呼出物料面板，可以看到我们用来设计页面的组件。

通过在组件右上角鼠标悬浮，可以看到相应的提示信息，表示该组件的名称。

我们把页面中所有的元素都以行列的形式进行划分，也就是整个页面都是通过行列布局嵌套行列布局来组成的。

这也就是说任何一个元素都必须要处于一个行列布局里面。

然后我们就可以添加一个按钮试试：

添加完成之后，可以更改它的一些属性，比如颜色、圆角等等。

也可以添加多列，并放置不同的元素：

甚至可以为组件设置插槽：

我们还提供了便于操作的一些功能：

比如左移、右移、移除、之前添加组件、替换当前组件、之后添加组件等等，也可以通过快捷键ctrl+上下左右来快速选中组件，以进行编辑。

还能够使用右键来操作组件，执行移动插入等操作，不同的组件或者状态有不同的可操作菜单。

同样，我们可以添加一个弹窗，并且设置它的内容：

当我们关闭了弹窗，想再次编辑它时，可以去收集箱里面找到它：

可以看到，整个页面都是页面的设计区域，做到了所见即所得，设计什么样得到的就是什么样，不会被各种面板限制空间或者占用大小。

一切都是通过点击或者快捷键来操作。

物料区包含了所有的可用组件。比较特殊的组件有行列组件、列表组件、html原生元素。

属性面板区包含了操作功能区、属性区、事件区、插槽区、自定义区。比较特殊的属性有深层样式、数据绑定和填充数据。

其中深层样式可以跟vue中的:deep一样，更改组件内部的样式，数据绑定主要是用来给表单数据做双向绑定，同vue中的v-model，填充数据主要用来给列表等添加业务数据。

用一个数据表格展示页面来做一个案例。

制作一个列表

我们重新来做一个列表，用来展示歌单。

首先，拖入一个表格到页面中：

歌单嘛，来给它添加几列，包含：歌曲名称、演唱人、时长、热度。

给表格的默认插槽添加要展示的四列，可以发现添加的时候，表格列式高亮显示的，这说明表格默认插槽中最适合插入表格列。

表格画完了，也就是我们的数据视图搞定了，那么接下来我们配置数据。

配置数据

我们将使用mock可视化生成工具，来模拟一份歌单的数据，并把这份数据作为接口的返回值，这是因为我们获取歌单是通过接口来获取的。

我们新建一个数据集，用来承载生成的数据，然后进行一些配置：

这样就生成了一个返回结果的数据。

可以看下通过可视化生成的数据的源码：

我们现在有了这个数据集：

现在就去新建一个接口，同样用我们的可视化接口生成页面：

点击右上角的新增：

简单填写一下接口信息，并在绑定数据那里，填写上一个标识，用来把数据绑定到这个名称的变量上面，比如我们就叫songList，现在我们就添加好这个接口了：

然后我们鼠标悬浮操作按钮：

点击mock功能菜单，添加上我们刚才生成的mock数据，将接口的返回值与其绑定：

这里可以预览我们的数据集：

现在让我们回到刚才的设计页面，点击添加请求链接，然后进行数据的配置：

现在页面中有请求链接了，那么让我们将表格的数据源绑定到这个接口的返回值上面：

可以看到数据已经绑定成功了，表格已经渲染出来多行数据了，只不过显示的内容为空，这是因为我们还没有指定列对应的数据key。

还记得我们的数据格式吗？

现在让我们把表格的每一列绑定到对应的属性key上面：

其中的关键就在于row#title：

由于表格绑定了数据之后，每一行和每一列都会去读取相应的值，其中row表示当前行，#表示取当前行中的一个属性，如果是两个#就标识当前行的副作用域中的数据，title就表示取数据中的title字段的值。

生成页面

点击操作区的设计完成按钮，填写页面相关信息，即可生成页面：

这样就生成了一个页面，并且可以拿来使用了。

但是它的功能远远不止这些，还有很多很多，我们来简单尝试其中的几个。

我们再加一点逻辑，比如想要按照热度进行排名。

那么我们可以在刚才的请求链接中配置上回调函数：

data.sort((v1, v2) => {
  return v2.hot - v1.hot
})

这里的data就表示接口返回的数据，可以理解为let data = res.data。

然后我们去刷新页面，看下效果：

发现已经设置成功了！

我们再在页面上添加一个按钮，用来重新获取接口刷新列表，并且简单的给它设置一点属性：

然后给按钮来添加一个事件：

我们把事件的代码写成如下所示：

function _() {
  this.R.trigger('getSongList')
}

写成一个函数，名字随便起，然后通过this对象，获取到请求对象，也就是R，然后通过调用它的trigger来执行请求链接的发送。看下这回再点击按钮的效果：

可以看到，点击按钮已经自动重新发起请求，并且自动重新渲染了列表，当我们点击按钮的时候会调出属性面板，以供编辑，如果我们只想单纯的触发事件，而不出现属性面板，那么可以按住ctrl健，然后再用鼠标单击按钮，这时就只会触发我们绑定的事件。

再假设我们还有个需求，点击按钮，获取热度超过500的歌曲。

这次我们不直接在按钮的事件里面实现逻辑，假设这个逻辑会在多个地方用到，那么在给按钮添加事件之前，我们先来新建一个执行寄连，通过执行寄连来帮助我们处理相应的逻辑。然后再通过点击按钮去调用相应的执行寄连。

执行寄连

对于需要重复执行的函数或者代码块来说，使用执行寄连最适合不过了，它可以简化我们的工作，我们来新建一个寄连：

并写入相应的寄连内容：

function _(hot) {
  return this.R.requestData.songList.filter(item => {
    return item.hot > 500
  })
}

同样写成一个函数，名字随便起，然后通过this对象，获取到请求对象，也就是R，然后通过获取它的requestData属性，来获取到所有的接口数据，从中拿到songList，然后根据条件过滤并返回。

回到页面中，给新加的按钮编写点击事件，来调用这个执行寄连：

function _() {
  console.log(this.P.runIt('getHotSong', 500))
}

通过this对象，获取到寄连对象，也就是P，然后调用它的runIt方法来调用执行寄连，第一个参数是寄连的code，第二个参数就是传递给寄连的参数，也就是我们写的那个hot值。然后我们把执行寄连的值打印出来：

一共获取到了五首热度大于500的歌曲。

上线页面

我们将上面实现的这个页面上线到业务系统中，无非就是给用户配置角色，给角色配置菜单等等方式，这里不再演示，其中新增一个菜单用来跳转这个页面，给菜单配置一个页面，即指向我们刚才设计的页面，也就是将新增的菜单和我们刚才新建的页面id绑定起来。

进入用户系统，点击对应菜单，来看一下我们的页面效果：

同时再点击按钮测试一下：

歌单展示页面已经全部完成。

最后

我们使用可视化页面设计器，快速的完成了一个歌单页面的实现，我们通过数据视图、请求链接、执行寄连的设计理念，分步完成了它们各自的设计，整个过程简单、透明、方便，并且易修改、易上手、易维护。

它远远不止演示的这些功能，表单、标签页、弹窗、抽屉、气泡、图标、树、列表等等任何组件都可以可视化设计，甚至能对原生div、span等做定制化处理。

从属性到事件，从事件到插槽，再到自定义的任何种种，可以绑定数据、设置样式、添加类名，也可以编写深层样式，以及对整个页面样式的统一管理，由于东西太多，本篇没有一一列举展示。

从数据视图到请求链接，从请求链接到执行寄连，以及可视化mock数据等等，不但极大的方便我们页面的生成，也极大的提高了可复用性和可移植性。

低代码不是我们的追求，我们的追求是提升生产力，低代码只是一种手段，让开发者能更快的产出，让非开发者能轻松的维护。