如何使用微搭低代码快速搭建请假系统应用原创

呃，各位直播间的小伙伴大家晚上好，我是V大的产品架构师贺崇威，然后今天由我带大家来使用呃V大地代码来搭建一个表单收集的一个应用，然后我们现在开始一个实战的演演示，就是我们会我们今天的一个功能演示，会以一个请假的一个应用的一个场景出发啊，大家看呃，给大家来搭建一个。请假应用的请假，这么请假系统的一个搭建过程，然后我们这个请假系统的话，总共是会包括两个应用，一个是我们的一个H5端的C端应用，就是给我们的学生用来在我们手上来提交我们的一个请假记录，然后我们还会有一个是我们的一个PC端的一个管理端，呃，管理应用，用来我们来管理我们的一个。管理和查看我们的一个请假记录，所以这个大家现在看到的屏幕就是咱们V大D代码的一个控制台，然后我们我们V达的话，V达。呃呃，是由是一个由数数据模型驱动的一个编码平台，所以我们开发应用之前，我们的我们需要先来创建我们的一个业务的数据源。

我们可以在这里，呃，进入到我们左侧菜单栏，从我的数据模型里面可以创建一个我们的一个业务相关的一个数据模型。这个就类似于我们传统开发的一个数据建表。然后因为我们今天开发的是一个请假应用，所以我们这里先给需要给我们的这一个请假系统来创建一个数据模型。我们给它起个名字叫做。请假记录。然后可以给它自动生成它的一个标识，然后我们这里有两种方式，一种是从我们的一个空白的数据模型创建，另外一个是我们也可以从我们存量的一个Excel表来导入我们的一些存量的数据。啊，这里的话，我们创建一个空的。等会我们一个数据模型创建好了，我们可以看到这里面有会有我们存量的一些，就是自带系统自带的字段，这些我们平常是不需要我们手动去设置的，我们可以将它收起来，我们可以点击编辑来创建我们的，添加我们的一个业务字段，我们要收集我们的一些请假记录，首先我们肯定是要收集我们一个。

学生的姓名。然后它也是可以自动生成它的一个标识，然后我们要选择选择一下它的数据类型，我们这里是有很多种常用的一些数据类型，我们姓名的话直接使用的一个文本。就OK了，然后格式是一个文本。然后下面可以我们是可以设置它这个字段我们是否需要必填，或者是是否是唯一，在我们新增之后，新增之后不可修改，然后还可以将它设置成我们的一个主列，因为默认的话是使呃会有给会给我们的这个每一条数据创建一条ID作为它的主列，我们可以手动将我们的其他的一些业务字段设置为这一个数据表的主页。

然后保存一下，一个是我们学生姓名，我们再添加，接下来接下来一个我们请假，除了登记姓名，我肯定还还需要登记一个请假的时间，请假的一个开始时间。这里的话，我们可以将这个数据类型选择为一个日期时间的一个字段，然后我们是精确到日期就可以了。那同样的也我们也非必填。那我们继续添加一个。请假的结束时间。同样的是一个时间日期的数据类型，然后精确到日期。然后我们肯定还需要一个描述，描述一下我们请假的一个事由。

这里我们就选它同样是文一个文本类型，然后它是可能要我们需要一个长文本。然后这样的话，我们一个一个基础，我们基础的一个业务字段，这几个能够覆盖到我们业一个请假场景的基础的业务字段，我们就已经创建好了，创建好之后我们点击确定，保存这保存这个数据模型，接下来我们就可以基于这个数据模型来创建我们的应用。我我们会到我们应用管理页源应用列表，我们可以点击新建应用，这里面以看到我们有四种新建方式，上面的两种都是以它的一个创建方式，可以选择从从一些呃，固定的一些场景或者是模板来新建，也可以从从零开始创建我们的一个应用，然后我们看到下面有两种类型的应用，一种是我们的模型应用，一种是我们的自定义应用，这两种应用，这两种应用的区别就是我们的模型应用一般是用于我们的PC的管理后台，然后我们的自定义应用，呃，可以同时兼容得到我们的一个H5PC端以及我们的小程序。

所以我们这里，呃，我们就需要创建两个应用，分别创建一个，一个是我们的自定应用，来创建我们的一个，呃，学生端的一个H5，用来用来登记我们的请假信息，然后另一个就是我们模型应用，就是给我们的管理员和我们的老师来后台查看我们的学生的一些申请，呃，请假申请，所以我们先创建一个我们的资金应用。给他起个名称，我们叫学生请假。H5，我们可以看到我们这里面可以选择多个支持的平台，我们可以选择这个是一个小程序应用，或者是一个外部端应用，或者我们也可以选择同时支持我们的小程序和外部的应用。这里我们先创建一个。Web端应用。然后这样的话，它会自动给我们拉起一个我们码编辑器的一个窗口。稍等一下，我们等待编辑加载一下。啊，我们需要创建一个新的一个，创建一个第一个初始初始化的页面，看到我们这个编辑器已经是加载完成了，这一个就是我们的低码的，呃，微大的低码编辑器，它一共主要是分为三大块，一个是我们左边，左左边会有我们存量的，我们官方的这些UI组件，我们直接拖拉拽来就可以进行使用，而且它是可以做到同时兼容，兼容响应，响应式的兼容不同屏幕的尺寸，从PC端到呃。

小程序到H5，然后从大屏幕的电脑屏幕，到我们的pad，到我们的小屏手机，都可以做到响应式的一个监控效果。然后我们我们要，我们要我们现在要做的是一个请假的一个H5应用，我们这是，所以我们需要创建一个表单，我们需要一个表，我们可以选择这里在我们的表单下选择一个我们的表单容器。然后我们在这个表单容器里面，我们可以选择我们的表单场景是新增，然后选基于咱们刚刚创建的一个数据模型，我们增进的呃，新建的这一个请假记录管理的这个数数据模型来生成我们这一个，生成我们的这个表单，我们可以看到当我们选中我们这个请假的数据模型之后，我们已经一键生成了我们这个表单，根据我们刚刚在数据模型里面创建的字段，还是自动生成给我们提交好了表单，同时同时将我们的整个提交的一个。

动作也都已经是。配置好了。然后这是一个这种是一键式的，不需要开呃不写，不需要写任何代码的一个开发方式，然后可能可能大家可能大家在可以会有疑问，我们在实际开发中，我们可能会碰到更加更加呃更加复杂的业务，可能并不是说我只是简单简简单单提交一下，填几个字段提交一下就完事了。比如说呃，可能会有一些前端的交互业务，我们就可以使用我们的整个一个订单码编写来快速来实现我们的一个这样一个业务，接下来我会演示一下，就是呃，比如说如果我们有一个请假类型。

我们可以再拖入一个下下下拉选择。然后我们将这个下拉选择拖入到我们的。这一个内容插槽里面这样看，嗯。然后我们的再将它拖到最下面来，这是我们一个拖拉拽的像搭积木的一方，是一个完全是一个完全可视化的一个编编排，不需要我们写任何代码，然后我们看到我们这里是可能我们添加一个请假类型的字段。我们给它叫做。这段标题我们可以给他确认。请假类型。然后我们可以在下面来自定义我们的一些选项的一些选项的可选项的内容。比如说我们要新增一个。先做一个请假类型，这个请假类型我们给他设置两个选项。一个选项是我们的病假。它可能是一个。

听一下。然后我们设在设置一个选项，值是一。我们再下一个，再设一个。普通啊普通事。来设这个选项值是二。在我们保存添加到我们已经新增了一个请假类型的下拉框，我可以看到现在已经出出现了我们一个病假和我们请假呃，普通事假的一个下拉框，然后我们可能会有碰到一些逻辑，比如说当我们选选中我们的病假的时候，是需要上传我们的一个呃入院证明，或者是一些一些证明的材料，图片之类的，然后当我们的普通试驾的话，我们可能不需要这一个呃图片上传的这个插件，所以我们可以在在正面我们可以先拖入一个。图片上传的一个。表单组件。然后我们可以给这个表单组件设置，设置一个条件展示的一个绑定，条件展示的一个主任。

因为我们整个整个微达的，呃，微达的微达前端开发方式，呃，前端开发方式也是基一个基于数据驱动的，是类似于咱们一个react和咱们VE的一个开发方式，就是基于咱们的一个数据驱动，所以我们所有的所有的属性组件的属性，以及所有的页面是展示的一些UI，呃，UI效果我们都可以通过我们的数据来驱动，所以我们我们需要绑定的数据，我们就可以点击，从我们的上面右上角，这左上角可以看到我们有一个变量，我们刚才创建我们的变量，在我们的创建我们全局变量，或者是我们的页面变量，通过这些变量来驱动我们的一个数据展示和我们的一个页面交互效果，所以我们这里可以创建一个。变量叫做。是否是病假，嗯。我们给它起个名字。病价，然后它是一个普通变量，我们这个变量的类型也是通过有有有三种，一种是我们的数据模型变量，可以直接通过这个变量来查询我们，呃，数据模型里面的一些。

数据的数据的值。然后另一种就是我们的普通变量，就是我们业务中常用的我们的一个普通的变量，用来用来绑定给我们的页面的组件，来驱动我们一个页面的一个展示效果。还有一个就是我们的参数变量，参数变量是用我们页面跳转的时候，用来给我们的在我们的URL上进行一个呃参数传递的一个变量。我们这里只要创建一个普通的变量，然后它是一个。数字类型。然后我们有个初始值是一，我们给它保存一下。然后我们可以将这个变量绑定给我们这个上传图片的条件展示，然后通过这个变量的值来判断，呃，判断这个图片是否需要这个上传图片的这个组件是否需要展示。

我们可以写一个表达式，然后从我们的变量这里获取到我们的变量路径，然后写货币过来，我们这里可以写一个当当，我们的这一个椅子，椅子并价等于。等于等于一的时候，我们才需要展示这一个图片上传的组件。然后看到我们现在可以尝，我们已经绑定好了，我们现在可以尝试将它的一个默认值改成二试一下。可以看到我们将它改超之后，我们这一个上传图片它就被隐藏掉了，这样的话我们就可以完成一个，我们就完成了一个通过我们的数据来驱动，呃，驱动我们的一个UI效果的一个变化的一个这样一个效果，然后接下来我们要做的事情就是我们可以把这一个当我们这一个请假类型的这个下拉框的值进行变化以后，我们可以将将这一个值，这一个变量的例子，病价的这个变量的值给他更新，然后从而达到一个更新我们呃呃，突然达到一个我们页面上的一个交互效果，我们这里可以选中我们的这个。

下拉选择这个请假类型的下拉选择这旁边右边会有我们的属性配置，这里下面会有一个行为，我们点击这个行为，我们会有一个直变化的一个行为，我们将这个变化行为的时候。呃，当我们的值变化触发的时候，我们要执行接下来这里面的一个变量赋值的一个动作。我们选中我们当前这个页面的这里面一个有一个我们刚刚用来控制我们图片是否是否是并价的这个变量。然后我们可以将我们当前的组件的当前组件的值传递进去，我们当前这个下拉框的组件的值，就是我们刚刚在在我们的下拉选项里面配置的那每一个选项的一个。

每一个选项的这一个选项值。那到它就我们的，当我们选中病假一的时候，它的选项值是一，那我们当我们选中呃，是普通市价的时候，它的值是二。然后这样的话我们就可以，这样的话，我们可以来看一下效果，当我们选中，当我们选中定价。啊，这里因为我们刚刚设置了这里设置的这一个选项值，它实际上是一个字符串的类型，我们需要给它改成一个数字类型，我们使用表达式来绑定一个数字类型的一。然后我们将这一个值的类型也给它改变一下，我们使用表达式来绑定一个数字类型的二。我们再来看一下效果，当我们选中定价一的时候，你们可以看到我们的上传图片已经出来了，当我们是普通的试驾的时候，我们就不需要，我们就不需要这一个图片上传的这这样一个。

嗯。为了一个表单组件，接下来的话，我们这一个应用五端的应用已经开发完成了，我们可以点击发布，我们的发布的话可以有两有两套环境。一套是我们的真实环境，一套是我们的体验环境，这个也是跟我们传统开发类似，我们可以先发一个体验版，然后在在我们的体验板上进行一个呃，Debug和一个。和和一个功能测试，当功能调试OK之后，我们可以再再来发送，发布我们一个正式版的应用。我们这里可以直接发布一个正式版，然后因为发布正式版的话，我们是需要提交我们的数据模型也进行发布，所以我们在这里它会提醒我们，我们的数据模型还没发布，所以我们点击发布我们的这个请假记录的数据模型。好，这里已经发布成功了，我们接下来发布能应用。

然后这里的这里的构建过程可能会稍微要点时间，我们要我们放着放着我们放着让他在这里构建，我们接下来看一下，我们还需要另一个应用，就是我们的模型应用，就是我们的管理后台，就是我们在在我们的呃，PC端，PC端上来查看我们的一个管理后台。我们叫做。请假。管理后台。然后点击新建。我们同样的会拉起我们一个管理后台的一个码编辑窗口。然后因为我们的管理后台是基于呃，我们的数据模型应用，是需要通过绑定我们的数据模型来快速生成我们的一个增加卡查的页面，所以我们这里可以选中我们刚刚创，还是我们选中我们刚刚创建的这个请假记录管理，那我们创建页面。

啊，这里面看到我们根据我们刚刚生成的那个，我们刚刚创建的那个数据模型，生成了我们，呃，这个数据表的一个增删改查的四个页面。我们可以来预览看一下，我们点开这个预览的开关。可以看到我们已经已经完成了一个数据表的一个增删改查的功能，我们可以来试一下。不走位。该时间结束时间。我生病。我提交可以看到我们已经将这条记录已经生成进来，然后我们就可以进行一个增呃增删改查的操作，可以进行编辑。也可以进行删除。

这样的话，我们一个后台的管理应用，我们可以看到我们完全没有进行任何的一个代码开发，就已经搭建好了我们一个后台的管理应用，然后同时我们将我们的这个后台管理应用也进行一个发布。这里我们也是让他发布着，然后我们回到我们的一个请假应用，我们来这里已经发布完成了，我们刚刚的这个五端的这个应用已经发布完成了，也是他为我们生成了一个二维码，还有一个访问链接，我们可以点击访问链接进来查看一下。我们默认的是在一个P3的一个打开的效果，然后它因因为它是一个兼容式的一个响响应式的兼容，兼容展示就是当我们在手机和我们的PC端大PC端打开的时候，它都是可以有一个进入效果，可以看到当我们切换到我们一个手机的大小屏幕的时候。它有自动变成一个也会自动兼容我们的这样一个屏幕大小，然后变成一个我们H5 H5的一个兼容模式，然后在这里我们就可以进行一个我们的数据的一个新增。

我再来新增一条。就是我们要结婚。然后我们刚刚也设置了我们的一个请假类型。我们点击提交。看到我们已经提交成功了，这是一个最简单的一个提交的动作，然后我们可以回到我们的管理后台应用，嗯嗯，我们看一下我们的管理后台也发布成功了，我们可以进入到我们的一个管理后台来看一下我们发布成功了以后以后的一个效果。

可以看到我们的一进来到我们的这样一个管理后台了，在这个管理后台就可以看到我们刚刚提交的一个请假记录，我们刚刚在我们的H5端已经提交上来的一个这一条，我们需要明天去结婚的一个管理记录，呃，一个请假记录我们已经设置好了，然后同样的也是可以进行一个增删改查，然后我们接下来会会演示一下，就是我们的一个工作流，就是我们请假肯定肯请假，不可能每一次请假都会默认，让他就能够成功，我们肯定是需要需要需要我们的老师或者我们管理员去审批，由我们的老师或管理员审批通过了我们这台，我们这台请假才算通过，所以我们可以通过基于我们的一个工作流来创建了我们这一个审批消息。我们可以进入到我们的工作流，可以看到这里面会同样的是一个可视化的引擎画布。通过拖拉拽的方式，也可以搭建我们的这样一个工作流，我们新建一条流程，叫做请假审批。

那我们看到我们这个请假审批的工作流已经创建好了，默认是只有两个节点，一个是开始，一个是结束，在我们开始的时候，我们需要设置我们一个。一个一个变量是一个我们同样的也是我们从我们这个流程需要输入的一个变量。我们可以先去设置，设置一个变量，我们添加一条同样是一个对象，然后我们选择我们的请选择请假记录管理的这条数据模型，然后给它起一个名字。叫做。起价。然后我们接下来我们当我们当我们触发这个工作，呃，这一条工作流之后，我们是需要找需要设置一个审批人员来审批我们的这个请假数据。我们可以选择新增一个节点，是一个人工任务，然后是一个审批节点。

这里我们可以看到里面可以配置我们的一些，呃，任务接收人就是我们的审批人，审批人可以通过我们的角色或者是变量来来配置我们的一个或者是用户，来配置我们一个审批人，我们选择用户，然后添加一个我们的管理员。这个是我们V大里面已经呃内置好的一个应用应用应用体系，我们可以在这里面创建我们的一些用户账号。然后我们选择默认，默认的我们一个超级管理员来审批我们这一条请假消息。然后我们同时可以配置它的一个审批的，审批的策略是签或者是会签。这样的话，我们已经添加了一个审批的节点，然后接下来我们在审批完之后，我们还需要进行，比如说。呃，比如说我们需要呃，比如说我们需要需要一个将呃审批完成之后，我们需要将一个，将我们的这条数据里面的某个字段更改成一个其他的值，我们可以选择一个。对象活动，然后这里我们可以选择更新对象，更新记录。

然后数据记录，我们选择我们从开始节点传入的这这一条，请假的，呃，请假的这一个数据，数据对象。然后我们选择设置一个赋值。比如说我们如果假设我们的字段里面会会有一个，因为我们这里需要需要给我们的这个数据模型新增一个字段，叫做。请假是否通过，所以我们我们在我们在审批完成之后，需要将这个请假是是否通过的这个字段来进行进行一个更新，我们先给先给它保存一下我们数据模型里面去。回去数据模型里面去，我们新增一个新增新增一下这条字段。我们先给它保存一下。啊，我们刚刚有一个有一个设置变量值没有保存我们。

先给我的进入我们的一个数据模型。进入到我们的这个请假记录的这个数据模型，我们点击编辑新增一个字段叫做。审批。结果。同样的，它是一个文本类型。然后我们确定。然后我们给他保存，然后我们再给他发啊发布一下。稍等一下，数据模型在更新中。

然后再回到我们的这一个工作流。点击设置赋值，我们可以这里这里我们现在可以选择，我们看到我们已经新增，新增的这个审批结果就过来了，当我们的管理员或者我们老师审批通过之后，我们就要，我们就要将这个审批结果更呃只更改成呃通过。然后当我们还要，我们还要拉一条新的分支出来，就是当我们审批，呃，审批失败以后。我们可以点击这个审批节点，然后从旁边。再拉一条，我们可以看，我们就拉，拉出了一条拒绝的分支，然后我们稍整稍微调整一下。在我们的拒绝的分支里面，我同样是需要操作我们的一个更新，更新我们的数据记录，再选择我们的这一条请假的记录，设置我们的值，将我们的这个结变成。不通过。

然后我们其他的也还有像，比如说像还有我们还可触发我们的自定接器来触发一个外部的API，或者我们还有一些其他的一些更加复杂逻辑，我们可以使用表达式来创建。还有像我们一些消呃抄送节点或者处理节点，也都是可以基于我们这一个工作流的节点来自由配置，这样的话我们现在就也生成了一条。呃，配置好了一条基基础的一个工作流的一个。审批流就是当我们的当我们的这个流程触发以后，我们会要需要当我们的这一个审批审批记录触发以后，我们需要设置我们的管理员来审批我们这一条记录，然后管理员如果同意，就会将这条记录的呃审批结果设置为设，设置为设设设置为通过，然后如果将如果审批员拒绝以后，我们会会将这一个审批记录的一个审批结果。设置为不通过，然后接下来我们将它保存一下，我们再来保存一下。

我们这个流程已经保存成功了。然后我们这个流程保存成功了，我们还需要去绑定一下这个流程的触，这个流程的触发一个触发机制。我们还在这个触发机制，我们还是要回到我们的一个数据模型里面来。我们看到我们数据模型里面会有个事件处理。我们进入事件处理，我们可以新增一条事件处理，这个事件处理就是可以用来配置我们的一个工作流的一个触发机制，这里可以我们选择一个触一个触发时机，就当我们的数据有新增或者更新，或者删除，或者其他的批量操作以后，来触发我们的这一个流程。然后。我们选择在这里选择我们刚刚刚刚刚刚，呃。我们看一下我们刚刚呃，配置的这个工作流叫什么名字啊，请假审批。我们选中这个请假审批，然后我们设置入，入是就是我们刚刚我们工作，呃，工作人里面配置的这个入名叫做请假。

然后我们可以选择这个，这个只是我们新增后的这一个值，这样的话我们就已经配置好了这一个，配置好了这一个流程的一个触发机制，就当我们的这个数据模型有新增的，有新增的数据之后，我们就会触发到我们的刚刚新增的，我们刚刚配置的这一条请假，请假审批的工作流，然后将我们的这条新增后的这一条记录将它传递进去。让我提交一下。然后我们回到我们的管理后台。我们刷新一下，因为因为我们的管理后台是从我们刚刚发布的结果进入的，所以我们是直接默认跳过了我们这一个登录的，登录的一个界面，我们呃呃，平常情况下，我们是通过我们是需要通过账号密码来登录来进入到我们的这个管理后台的，使用我们的超级管理员的账号密码，我们可以现在可以来试一下。

我们再来创建一条请假记录。嗯，叫张三嘛，我们张三。请假时间。结束时间，然后张三，张三也要结婚了。我提交一下。可以看到我们的。呃。啊，我们张三已经提交，提交到最后一条，可以到我们这一条，张三已经结婚了，这一条的记录已经生成生成生成成功了，我们可以进入，接下来我们可以看到进入，进入我们的一个流流程中心。我们也看到刚刚有这里就已经触发了我们一条我们的一个请假的消息通知。我们在这个流程里面可以配置我们的一个。配置我们的一个，我们是否需要通过，呃，同意或者拒绝拒绝。

我们选择同意。然后可以选择一个一个审批的一个意见啊同意。然后我们提交一下。这样的话，我们这一个请假记录的一个审批结果就已经审批完成了。啊，我们现在这样的话，我们就已经将我们刚刚提到的这一个请假系统的一个简单的一个数据收集的一个DEMO，包括它的一个数据工，呃，有一个审批流的一个功功能已经是搭建完成了。