通俗易懂学MOBI

通俗易懂学MOBI

• 前言
• 低代码开发平台魔笔
• 免费体验

• 开通服务

• 创建应用
• 用户管理

• 用户实体
• 用户列表页

• 登录页面

• 添加登录页
• 添加登录实体
• 绑定登录逻辑
• 丰富逻辑流
• 为首页添加事件
• 测试前端登录逻辑

• 发布
• 写在最后

前言

在介绍MOBI之前，我们首先需要知道什么是MOBI，也就是什么是低代码开发平台魔笔？

低代码开发平台魔笔

什么是低代码开发平台魔笔呢？低代码开发平台（LCDP）英文全称为Low-Code Development Platform，它是一种软件开发方法，可以更快地以最少的手工编码交付应用程序。通过在图形界面中使用可视化建模来组装和配置应用程序，开发人员可以跳过所有基础架构，直接进入每个应用程序的定制业务研发。对于开发者来说可以降低研发成本，提升效率；对于业务人员甚至可以直接操作和配置系统开发软件。这就是MOBI。

免费体验

开通服务

在体验魔笔之前，我们首先需要开通服务，服务入口：【开发者绿色通道：免费版账号限时体验】

这里所有的内容都用默认的即可，勾选服务协议，点击【立即购买】

点击【支付】，那么低代码开发平台魔笔服务就开通成功了，下面我们开始体验魔笔吧。

创建应用

打开魔笔控制台：https://mobi.console.aliyun.com/home 点击【添加应用】

输入应用名称，点击【确定】，应用创建成功，如图

用户管理

用户实体

用户管理页面涉及到注册用户的相关信息，因此我们需要先创建用户的实体，单击【数据模型】-【全局数据模型】

在打开的页面按顺序操作 1 2 3

依次添加登录名（唯一）、用户名、年龄字段，添加完成后如图

这里我想再添加一个性别字段，可以通过枚举值的方式，添加方式和上面一样，字段类型需要选择ENUMERATION

点击【添加】，在弹出页面添加枚举值 【男】 【女】

点击【确定】之后

选中刚才添加的枚举【性别】，点击【保存】，实体保存成功。

点击【一键生成页面】，调整字段展示位置

点击【下一步】进入布局选择，这里我的布局选择不做改动，默认的即可，然后点击【生成】，页面生成成功

用户列表页

点击【页面管理】符号，修改刚才生成的三个页面的名称，方面后面区分

修改完成之后点击【用户-列表页】打开用户列表页

如果想要编辑列表页面展示内容可以点击【大纲树】，选中文本框即可修改

但是这里注意到一点，【添加Entity】想修改成【添加用户】却无法修改，那么这应该是我们创建用户实体的时候没有改实体名称，那么我们删除现有的一套页面，重新更新一下用户实体名称生成一套新的列表页，编辑页，查看页。删除操作如下图

观测新生成的一套页面就符合我想要的了

点击右上角【预览】可以看到应用信息

点击【访问应用】，可以看到【用户-列表页】

登录页面

比如我们管理后台的登录页面是这样的，我们想要做一套自己的登录页面

如果我们想要添加我们的应用登录页面，那么我们可以这样操作。

添加登录页

点击【页面管理】-【添加新页面】

输入名称 登录页，选择【登录】模板，点击【创建页面】

登录页面创建成功以后可以修改或者删除登录页面中的任何元素

这里有一点需要注意，我添加完登录页面之后，想删除当前登录页面总是删除不成功，比较疑惑？？

还有就是在【资源管理】-【上传】资源图片之后遇到过一次上传失败，但是同样的图片后来就上传成功了，当时的情况未及时截图

然后是刚才多次删除不成功的登录页，再次回到【页面管理】却已经消失不见了，如图

不明白多次删除页面会提示删除失败，但是过一会儿需要删除的页面又没了？？重新按照步骤添加登录页如图，登录页中的元素可以根据个人业务需要删除

添加登录实体

点击【数据模型】-【内存实体】添加登录表单内存实体如下

回到登录页，修改登录页图片，选择我们刚才上传的资源图片

为输入框绑定我们刚才创建的登录表单内存实体

绑定完成之后我们的登录页面元素就齐了

绑定登录逻辑

为【登录】按钮绑定后端逻辑，点击【登录】按钮，指定【调用后端逻辑流】

点击【逻辑流id】的【请选择】

点击【添加】

点击【保存】则登录逻辑的逻辑流添加成功，后面开始丰富逻辑流内容

丰富逻辑流

点击【逻辑编排】-【登录逻辑】

添加【账号操作】-【用户登录】操作并配置属性

为登录逻辑流添加判断之后，逻辑流就变成这样了

这是什么原因呢？再次回到页面就可以了，然后为判断逻辑添加表达式

为登录名或密码不满足条件时增加消息提醒，如果用户名密码符合条件则下一步

再次增加【账号操作】-【用户登录】，如果有返回当前用户则下一步，如果没有返回当前用户则给出错误提示

如果用户登录成功则显示首页，这里我们的首页设置为用户列表页

逻辑流设置完成之后就可以点击右上角【预览】了，

如果页面逻辑设计的有问题的话，可以根据预览下面提示排除错误信息后再次预览逻辑流。直到再次点击【预览】提示【检查通过】说明你的后端逻辑流设计没有明显错误。

为首页添加事件

打开我们设置的首页，为首页添加点击事件

点击【逻辑流id】的请选择

点击【添加】添加【登录状态校验】的前端逻辑流校验

添加完成之后点击一下【预览】看是否有逻辑错误

测试前端登录逻辑

完成之后回到我们设置的首页【用户-列表页】，点击【预览】生成系统访问链接

登录系统之后获取到首页链接： https://cluster-1-preview.mobiapp.cloud/18686394/mgynmk/admin/index 复制首页链接到没有登录状态的浏览器可以看到系统跳转到登录页并且附带了跳转到首页的链接

到这里我们登录相关的内容也就算完成了。

发布

首先我们可以点击右上角的【提交】按钮，提交内容信息

然后可以点击【发布】按钮

等待几分钟后，发布结果如图

点击【点击查看】可以看到发布的相关信息

点击【查看环境详情】可以看到

点击【生成密码】生成访问密码然后点击管理后台预览链接

这里我看到和我设计的登录页不太一样，感觉还是默认的登录页，但是链接title确实已经变化了，只有登录页面没有变化

这里发现这才是我设计的页面，之前发现的预览地址其实是管理后台地址，而不是应用访问地址，点击进入之后就是我设置的默认首页地址【用户-列表页】

点击任意空白位置，由于没有登录信息，所以会按照我的【前端逻辑流】跳转到登录页

直接点击登录会触发【内存实体】用户名 密码必须【必填】的提示

随便填写用户名密码会触发我们【后端逻辑流】的判断

这里我在管理后台添加了test2023用户

写在最后

通过这次体验，个人感觉低代码开发平台魔笔的应用空间很大，对于首次上手使用的人来说，仅是参考官方操作文档就可以正常操作下来，当然也不是完全顺畅，在操作过程中也有遇到各种未知的问题，已经在操作过程中提出了。单从低代码开发的角度来看魔笔的话，功能完善度以及操作简便度都相较于其他产品有很大的提升。后续希望可以增加调试的功能，比如我在最后发布之后测试登录时，不知道为什么用什么用户登录都不存在，那么这个问题是缺少用户的问题呢还是登录后端逻辑流设计的问题呢，无法定位，因为没有地方可以看到具体的执行日志，没办法逐步跟踪执行情况。
另外，由于博文有限，魔笔的模块管理没有详细写操作，基本操作和体验过程中的操作可以复用，也就是提供了模块化的管理方案，方便后续相同模块的引用，提高开发效率。