一文看懂MOBI

简介: 简述什么是MOBI以及基于MOBI搭建登录流程应用

前言

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

低代码开发平台魔笔

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

免费体验

开通服务

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

image.png

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

image.png

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

创建应用

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

image.png

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

image.png

用户管理

用户实体

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

image.png

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

image.png

依次添加登录名(唯一)、用户名、年龄字段,添加完成后如图

image.png

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

image.png

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

image.png

点击【确定】之后

image.png

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

image.png

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

image.png

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

image.png

用户列表页

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

image.png

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

image.png

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

image.png

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

image.png


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

image.png

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

image.png

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

image.png

登录页面

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

image.png

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

添加登录页

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

添加登录实体

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

image.png

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

image.png

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

image.png

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

image.png

绑定登录逻辑

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

image.png

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

image.png

点击【添加】

image.png

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

丰富逻辑流

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

为首页添加事件

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

image.png

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

image.png

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

image.png

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

image.png

测试前端登录逻辑

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

image.png

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

image.png

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

发布

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

这里比较疑惑??后来我点击了一下

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

但是拿着添加的test2023去登录仍然提示当前登录用户不存在,这里不太明白,可能是首次使用不太熟悉的缘故,后续继续排查。

写在最后

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

另外,由于博文有限,魔笔的模块管理没有详细写操作,基本操作和体验过程中的操作可以复用,也就是提供了模块化的管理方案,方便后续相同模块的引用,提高开发效率。物料管理我这边不能用不知道什么情况

image.png

无法点击【添加物料】按钮。不过后续这些功能官方一定会继续升级改善的,在此也祝MOBI越来越好,感谢官方技术团队为提升开发效率不断提升付出的心力和不断的创新。

相关文章
|
数据挖掘
【SPSS】回归分析详细操作教程(附案例实战)(下)
【SPSS】回归分析详细操作教程(附案例实战)
4058 0
|
存储
【数据结构】连通图、连通分量与强连通图、强连通分量—区别在于强,强强在哪里?
【数据结构】连通图、连通分量与强连通图、强连通分量—区别在于强,强强在哪里?
12048 1
【数据结构】连通图、连通分量与强连通图、强连通分量—区别在于强,强强在哪里?
|
SQL 分布式计算 大数据
大数据新视界 --大数据大厂之Hive与大数据融合:构建强大数据仓库实战指南
本文深入介绍 Hive 与大数据融合构建强大数据仓库的实战指南。涵盖 Hive 简介、优势、安装配置、数据处理、性能优化及安全管理等内容,并通过互联网广告和物流行业案例分析,展示其实际应用。具有专业性、可操作性和参考价值。
大数据新视界 --大数据大厂之Hive与大数据融合:构建强大数据仓库实战指南
|
11月前
|
运维 监控 供应链
Alibaba交易平台TMF2.0介绍
2017双11交易峰值达32.5万笔/秒,面对高并发与复杂业务需求,阿里推出TMF2.0框架,通过业务与平台分离、全链路可视化、配置化发布等创新,实现需求开发周期缩短至12天,支撑多业务快速试错与复用,构建可配置、可监控、可运维的电商技术新体系。
1376 5
Alibaba交易平台TMF2.0介绍
|
4月前
|
决策智能
首发!Qoder 内置模型已支持 Qwen3.7-Max
Qoder已同步首发阿里云全新旗舰模型Qwen3.7-Max!该模型在Arena全球盲测中居国产第一,专为Agent优化,编程与推理能力卓越,支持复杂开发、多智能体协作及办公自动化。即刻通过Qoder全系产品体验!
|
10月前
|
人工智能 供应链 搜索推荐
国内知名AI Agent智能体全解析:从技术原理到顶尖产品,一篇读懂
凌晨三点,财务实习生还在手动粘贴数据?市场经理苦于海量反馈无法分析?2025年,AI Agent正悄然改变职场:它能听懂指令、跨系统操作、自动生成报告,成为真正“会干活”的数字员工。从实在Agent的实用落地,到百度“伐谋”的自我演化,再到讯飞星火、通义千问、飞书Aily的行业深耕,智能体已进入金融、制造、医疗一线。成本降本、效率翻倍、决策更准——这不是未来,是正在发生的现实。了解国内主流智能体产品与真实应用场景,掌握这场“人工智能+”变革的关键入口。
1807 0
|
机器学习/深度学习 监控 安全
102_灾难性遗忘:微调过程中的稳定性挑战
在大型语言模型(LLM)的微调过程中,我们常常面临一个关键挑战:当模型学习新领域或任务的知识时,它往往会忘记之前已经掌握的信息和能力。这种现象被称为"灾难性遗忘"(Catastrophic Forgetting),是神经网络学习中的经典问题,在LLM微调场景中尤为突出。
1027 1
解决java.lang.IllegalStateException: Failed to load ApplicationContext错误~
解决java.lang.IllegalStateException: Failed to load ApplicationContext错误~
1749 0
|
XML 前端开发 测试技术
Postman
Postman是一款功能强大的API开发和测试工具,被广泛应用于软件开发的各个阶段
1122 57
|
缓存 前端开发 JavaScript
前端项目性能优化:使用vite的分包策略
【8月更文挑战第4天】Vite性能优化-分包策略
1067 2
前端项目性能优化:使用vite的分包策略