百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

AppBoxFuture(低代码快速开发框架): 前端组件化可视化开发

ccwgpt 2024-10-17 08:13 27 浏览 0 评论

当初框架的设计目标是:前端、后端、存储端统统一锅端,为什么这么设计,一方面是想减少开发人员对于开发环境及各类工具的安装配置时间,另一方面是想消除各端之间的集成调试问题,使开发人员更多的关注数据结构、业务逻辑、用户界面的设计与开发。为了达成这一目标,作者在框架的前端开发尝试过类似于拖拉方式的界面生成,但发现灵活性受到了极大的限制。后来学习了Vue等项目,确认了框架集成Vue及ElementUI来用于前端用户界面开发的方案。

一.实现思路

由于框架的IDE是基于Web的,如何实现带智能提示的代码编辑及如何实现界面的即时预览成为一个小小的挑战(作者熟悉skia,gdi+等方式画用户界面,但不熟悉web前端)。

  • 实现代码编辑器

作者一开始想到VS Code是基于Electron的就看了一下源码,结果发现微软从VS Code剥离了代码编辑器monaco-editor项目,具备了实现一个在线代码编辑器所需要的所有功能,而且惊喜的是monaco editor自带了Html\JS\CSS着色与智能提示。

  • 实现即时预览

在大体了解了Vue的原理后,作者在IDE的视图设计器内实现了在线将Vue组件的代码编译转换为运行时代码,类似于Webpack分别将模版、脚本、样式编译然后组合在一起形成一个js包,设计时发给预览窗口动态加载,运行时则通过Vue的异步组件功能按需加载。

二.实现效果

1.组件开发

每个组件通过ViewModel关联,开发完全等同于在线Vue组件开发,这里不再过多描述。需要注意的是样式统一为Vue的局部样式(scoped)。

Tip1: 在代码编辑内CMD+S保存, CMD+1,CMD+2,CMD+3分别切换模版、脚本、样式编辑;

Tip2: 点击顶部"Preview"在右侧显示预览窗口;

Tip3: 框架集成的ElementUI组件均注册为全局组件,且前缀为e-xxxx,非默认的el-xxxx。

2.组件组合

组合其他子组件时,需要先在脚本内注册局部组件,如下图所示:

然后在模版内放置注册的子组件,如下图所示:

3.组件路由

每个视图模型默认是不加入路由表的(sys.Home例外是默认的主页),如果在运行时需要通过浏览器地址栏直接访问视图模型,必须将视图模型加入路由表,如下图所示:

Tip1: 自定义路径如果为空,则使用默认路径,如http://地址/app/index.html#/sys/EmploeeList;不为空则为http://地址/app/index.html#/{自定义路径};

Tip2: 自定义名称支持多级,如: PersonInfo/Address。

4.服务集成

框架支持两种方式调用服务模型进行业务逻辑处理:

4.1 异步await方式:

4.2 异步Promise方式:

export default class Home extends Vue { 
 onclick() { 
 sys.Services.HelloService.SayHello()
 .then(res => { this.$message.info(res); })
 .catch(err => { this.$message.error(err); }); 
 } 
}

5.组件调试

本想跟服务模型一样在服务端跑一个调试进程,但考虑实现复杂暂直接利用浏览器的调试功能。另由于作者的半吊子Web前端水平,暂没有搞定sourcemap,所以浏览器调试器内显示的源码是视图设计器编译转换过后的,比较丑陋,具体参考下图所示:

Tip: 在调试器Sources面板快捷键CMD+p然后输入{应用名}.{视图名}如sys.Home.js可以快速定位编译转换后的源码。

三.本篇小结

目前实现的部分用来开发网站、中后台系统、微信公众号之类的应用是没有问题的,待将来Google开源了Hummingbird后作者还想在IDE内实现移动App的用户界面开发。如果您有问题或Bug报告,请留言或在https://github.com/enjoycode/appbox.deploy提交Issue。

相关推荐

RACI矩阵:项目管理中的角色与责任分配利器

作者:赵小燕RACI矩阵RACI矩阵是项目管理中的一种重要工具,旨在明确团队在各个任务中的角色和职责。通过将每个角色划分为负责人、最终责任人、咨询人和知情人四种类型,RACI矩阵确保每个人都清楚自己...

在弱矩阵组织中,如何做好项目管理工作?「慕哲制图」

慕哲出品必属精品系列在弱矩阵组织中,如何做好项目管理工作?【慕哲制图】-------------------------------慕哲制图系列0:一图掌握项目、项目集、项目组合、P2、商业分析和NP...

Scrum模式:每日站会(Daily Scrum)

定义每日站会(DailyScrum)是一个Scrum团队在进行Sprint期间的日常会议。这个会议的主要目的是为了应对Sprint计划中的不断变化,确保团队能够有效应对挑战并达成Sprint目标。为...

大家都在谈论的敏捷开发&Scrum,到底是什么?

敏捷开发作为一种开发模式,近年来深受研发团队欢迎,与瀑布式开发相比,敏捷开发更轻量,灵活性更高,在当下多变环境下,越来越多团队选择敏捷开发。什么是敏捷?敏捷是一种在不确定和变化的环境中,通过创造和响应...

敏捷与Scrum是什么?(scrum敏捷开发是什么)

敏捷是一种思维模式和哲学,它描述了敏捷宣言中的一系列原则。另一方面,Scrum是一个框架,规定了实现这种思维方式的角色,事件,工件和规则/指南。换句话说,敏捷是思维方式,Scrum是规定实施敏捷哲学的...

敏捷项目管理与敏捷:Scrum流程图一览

敏捷开发中的Scrum流程通常可以用一个简单的流程图来表示,以便更清晰地展示Scrum框架的各个阶段和活动。以下是一个常见的Scrum流程图示例:这个流程图涵盖了Scrum框架的主要阶段和活动,其中包...

一张图掌握项目生命周期模型及Scrum框架

Mockito 的最佳实践(mock方法)

记得以前面试的时候,面试官问我,平常开发过程中自己会不会测试?我回答当然会呀,自己写的代码怎么不测呢。现在想想我好像误会他的意思了,他应该是想问我关于单元测试,集成测试以及背后相关的知识,然而当时说到...

EffectiveJava-5-枚举和注解(java枚举的作用与好处)

用enum代替int常量1.int枚举:引入枚举前,一般是声明一组具名的int常量,每个常量代表一个类型成员,这种方法叫做int枚举模式。int枚举模式是类型不安全的,例如下面两组常量:性别和动物种...

Maven 干货 全篇共:28232 字。预计阅读时间:110 分钟。建议收藏!

Maven简介Maven这个词可以翻译为“知识的积累”,也可以翻译为“专家”或“内行”。Maven是一个跨平台的项目管理工具。主要服务于基于Java平台的项目构建、依赖管理和项目信息管理。仔...

Java单元测试框架PowerMock学习(java单元测试是什么意思)

前言高德的技术大佬在谈论方法论时说到:“复杂的问题要简单化,简单的问题要深入化。”这句话让我感触颇深,这何尝不是一套编写代码的方法——把一个复杂逻辑拆分为许多简单逻辑,然后把每一个简单逻辑进行深入实现...

Spring框架基础知识-第六节内容(Spring高级话题)

Spring高级话题SpringAware基本概念Spring的依赖注入的最大亮点是你所有的Bean对Spring容器的存在是没有意识的。但是在实际的项目中,你的Bean必须要意识到Spring容器...

Java单元测试浅析(JUnit+Mockito)

作者:京东物流秦彪1.什么是单元测试(1)单元测试环节:测试过程按照阶段划分分为:单元测试、集成测试、系统测试、验收测试等。相关含义如下:1)单元测试:针对计算机程序模块进行输出正确性检验工作...

揭秘Java代码背后的质检双侠:JUnit与Mockito!

你有没有发现,现在我们用的手机App、逛的网站,甚至各种智能设备,功能越来越复杂,但用起来却越来越顺畅,很少遇到那种崩溃、卡顿的闹心事儿?这背后可不是程序员一拍脑袋写完代码就完事儿了!他们需要一套严谨...

单元测试框架哪家强?Junit来帮忙!

大家好,在前面的文章中,给大家介绍了以注解和XML的方式分别实现IOC和依赖注入。并且我们定义了一个测试类,通过测试类来获取到了容器中的Bean,具体的测试类定义如下:@Testpublicvoid...

取消回复欢迎 发表评论: