你知道吗?低代码也是可以做前后端分离

1,109 阅读4分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第3篇文章,点击查看活动详情

介绍

前后端分离的项目实施方法论,其实在传统开发以及非常流行了。我们今天就来聊聊,在低代码这个新的技术领域里面,我们如何来做前后端分离。

首先,来看看我们整体的方案架构图。

image.png

这个场景我们将使用西门子Mendix 这样的一个企业级低代码平台来实践的。

在了解这个方案之前我们需要具备以下知识。

  • Call Rest 组件
  • Published REST service 组件

首先,我们来看看服务端

image.png

ECODomain 数据模型

这个模块主要来定义我们的业务数据实体,通过他来帮助我们构建我们数据库的数据表和相应的关联关系。

这里我们将通过一套简单的商品数据模型来完成我们的实验。

image.png

ECOService API服务模块

在这里,我们讲定义我们的也逻辑,并且通过 Published REST Service 组件来构建我们的Restful接口。 这套接口将提供给前端项目消费使用。

API 接口服务

image.png

在这里我们可以具体配置接口的调用方式,接口的参数,接口的返回参数等。

image.png

这里将统一管理我们的API服务,例如:OrderMgr 就是我们的订单服务。

完成我们的API接口定义之后,运行我们的西门子Mendix应用,我们可以通过Swagger 来测试我们的API。

image.png

单击这个URL,打开我们的浏览器就可以看到我们定义好的API了。

image.png

测试我们的API可以看到下面的效果:

image.png

我们可以具体来看一下,构建一个Restful API,我们需要几个步骤。

步骤1,构建我们的VO数据模型,通过这个数据模型来暴露API接口的数据。

image.png

步骤2,构建我们的JSON 结构匹配文件

image.png

image.png

这个文件主要作用,是通过API的JSON结构,然后通过我们的匹配文件(Import mapping / Export mapping)来转化成西门子Mendix 的数据模型。

image.png

步骤3,构建数据模型的匹配文件,将西门子Mendix的数据模型转换成Json,然后消费方通过Json数据进行消费。

image.png

image.png

当然如果我们只需要开放出来3个字字段,其他字段不开放,我们也可以选择需要匹配字段属性即可。

步骤4,通过微流来定义我们API的具体业务逻辑

image.png

微流,如果大家有学习过我前面的基础教程,应该可以明白,它就是用来定义我们具体业务逻辑的,通过图形化的语言来构建。

image.png

通过简单的4步,我们就完成了我们的API的构建和发布了。下面来看一下,如何在前端应用中消费我们的API服务吧。

其次,我们来看看前端应用项目

image.png

通过下面几个步骤,我们就可以完成对API的消费了。

步骤1,构建我们的页面和数据模型

image.png

image.png

页面的数据源是通过微流获取。

image.png

步骤2,构建我们的JSON文件

image.png

步骤3,构建我们的Import mapping 文件

通过我们的Import mapping 文件,可以将我们的Json的数据与西门子的Mendix的数据模型进行匹配,类似Java开发中,将Json转换成Class的操作。

image.png

image.png

步骤4,构建微流,调用API

在微流中,我们将使用Call REST 这个组件来调用我们的API。

image.png

我们来看一下具体Call REST 这个组件里面的配置吧。

image.png

我们可以看到,这里可以配置API地址,HTTP头部,Reques信息,Response信息。

image.png

这里我们可以具体看一下,在Response中,我们配置了Import mapping 文件,这里将自动讲我们的API 返回的结果与我们的数据实体进行绑定。

image.png

通过这简单的4步,我们就完成了API的消费了。

最后,我们总结一下

通过不同的组件,结合可视化的方式,我们就可以在西门子Mendix中完成我们前后端分离的项目了,结合传统开发团队协作的优势,并且借助低代码的图形化语义来提高我们交付的效率,并且提高整体项目的可维护性。

最终我们可以发现,1+1 > 2 确实存在!