这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和

整合了AI 等技术的业务流程管理系统突出后端流程定义和数据整合能力,一般用于解决的跨系统业务流程。 Tip:低代码平台还可以根据其他维度进行,比如全栈平台还是仅前端页面,通用领域还是聚焦于 erp,crm,供应链等专业领域,开源的还是收费的,国内的还是国外的等等。 Tip:在选择低代码平台的时候,这些指标可以给我们提供参考。 易用性 易用性是低代码平台的关键指标,指在不写代码的情况下能完成功能的多少。 用户体验 这个指标能够决定最终用户对开发者的评价。 比如给企业的客户或供应商的项目对用户体验的要求会高于企业内部用户使用的项目,对于内部应用程序,简单的 web 表单或许就已满足。 数据建模和管理的便利性 这个指标就是通常所讲的”模型驱动“,模型驱动能够提供满足数据库设计范式的数据模型设计和管理能力。开发的应用复杂度越高,系统集成越高,这个能力就越关键。 流程与业务逻辑开发能力和效率 这个能力包含两点: ① 该低代码平台能否开发出复杂的工作流和业务。决定了项目是否可以成功交付 ② 开发这些功能的便利性和易用性。决定了项目的开发成本。 开发平台的生态系统 低代码平台的本质是开发工具,内置的,开箱即用的功能无法覆盖全部的应用场景。这时,就得基于该平台的生态系统来提供更深入,更全面的开发能力。很多开发平台都在建立自己的插件机制,这也是平台生态的一个典型体现。 编程接口和系统集成能力 为避免数据孤岛,企业级应用通常需要与其他系统进行集成,协同增效。此时,内置的集成能力和编程接口就变得至关重要。除非确认在可预期的未来,项目不涉及系统集成和扩展开发。 支持更先进的架构和技术 开发出来的应用是否支持更先进的架构,比如对接IoT,机器学习 此时深入了解低代码平台产品的架构就尤为重要 服务质量 服务质量指通常所说的”无故障使用时间“。 用户模型与软件生命周期的支持 软件开发整个生命周期,除了开发和交付,还有设计,测试,运维等环节。比如系统开发早期的用户模型建立和验证过程通常需要快速模拟和迭代,投入的开发力量甚至不少于正式开发。 如果一套低代码平台具备全生命周期所需的各项功能,将会大大简化开发者的技术栈,进一步提高工作效率。 开发的系统规模越大,这一能力就越重要。 开发管理 开发管理用于帮助开发团队负责人,降低软件开发管理过程中的各种人为风险。例如代码库权限管理,版本权限管理,发布权限管理。

现代软件开发中的敏捷开发能否在低代码中落地,也是衡量开发管理的重要指标。 安全与合规 该功能的具体体现有:支持本地部署,全SSL数据传输,密码强度策略,跨域访问控制,细粒度的用户权限控制等等 在这些供应商中: 85% 的供应商认为自己是覆盖了用户体验,逻辑和数据的,而不是专门处理应用程序的一部分 96% 的供应商认为自己提供了,而不仅仅是设计和开发的加速器 88% 的供应商提供了,62% 的供应商提供了能力 84% 的供应商提供了 WebIDE,30% 的供应商提供了桌面 IDE 78% 的供应商将作为其工具的一部分 47% 的供应商生成的代码在大多数情况下可以进行 79% 的供应商提供的用户界面,62% 的提供移动应用程序界面,而 5% 不到的提供了聊天机器人 95% 的供应商目标客户是业务线开发人员的前三个开发人员角色,而 40% 的供应商选择的头部开发人员角色是业务高级用户 55% 的供应商的主要终端用户类型是 B2E 和 B2C 的占比分别为 20% 和 25% 实践出真理。我们尝试使用 amis 做一个后台系统。 amis 是什么 amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。—— amis 官网 此刻在 github 上有 的 Star。 amis 是百度的一个低代码平台。它,仅处理应用程序的一部分,也就是前端页面。 终端用户类型,他专注于中后台页面。虽然提供了大量常规UI组件,但对于面向普通客户的页面,往往追求个性化的视觉效果。 方面,通过 json 配置来生成页面。 目标用户包括和,据官网介绍: 没写过前端页面的人员可以做出专业且复杂的后台界面,做出来的页面不需要经过二次开发就能直接上线。 支持扩展。支持90%低代码,10%代码开发的混合模式,既提升效率,又不失灵活。 文档介绍 文档直接看amis 官网。文档内容很多,光组件倘若每个都用一下,至少得一天以上,笔者就不一一介绍,这里稍微提几个我们就马上开始实战: 快速开始 amis 有两种使用方法,笔者这里使用 的方式: amis-api-start.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 比如要实现某个样式的表单,需要的 json 配置文件就在右侧的处: amis-api-form.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 接口请求 得发送接口出去,所以 API 这一篇得看一下: amis-api-api.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 主题样式 amis 提供了4种主题样式,比如选择,样式变黑了: amis-api-theme.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 项目需求 项目初始化 amis 提供两种使用方法:一种是用在 react 项目中,一种是对前端不甚了解的开发者。

笔者选用 方式。先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现。 新建项目 : 通过 下载包,但报错如下: 换一种下载方式: chrome 下载失败,edge 下载成功,解压到项目根目录。 hello-world 新建文件 ,内容直接拷贝于官网: Tip:amis-test 项目结构如下: 需要更改一下 css,js 资源引用路径。更改内容: 页面效果如下: amis-hello-world.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 Tip:笔者使用 vscode 的 live Server 插件,可直接右键启动一服务预览该页面。 后端服务 为了方便演示,笔者使用 实现后端接口。 目录调整 最初目录结构如下: 执行如下操作: 新建 文件夹,并将 skd 目录,hello-world.html 放到 public 文件夹中。 修改 的配置部分 新建 。这是一个普通的 html 页面,登录成功后跳转至此页 重写服务 ,其中数据库用对象模拟,直接放于内存。 调整后的目录结构如下: 服务器 会开启一个服务,并将 目录作为对外开放,能接收前端请求,并存入数据库并返回接口数据。 登录页 测试效果 启动服务: amis-login-error.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 输入正确的用户名密码,点击登录,就会跳转到系统主页。 跨域报错 引入后台模板 amis 在 github 的 readme.md 中提供了一个后台模板,我们将其引入。 解压完毕后的目录结构如下: 将 和 拷贝到 public 目录,并将 index.html 重命名为 。 直接访问 ,界面如下: amis-admin.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 任务计划初始化 接着我们将后台模板精简一下,将任务计划初始页完成。 pages 中只有一个 js 文件,其他都是 .json 文件。 保留唯一的 js 文件和 ,其他都删除。并将 jsonp.js 重命名为 。 Tip: 是网站配置,这里只保留一个一级菜单; 是一级菜单的配置文件,这里单独提取出来,方便维护。也能写注释,.json 文件中不能写注释,页面会报错的; 最后稍微修改一下 ,比如 logo,主题改为antd: 最终效果如下图所示: amis-admin2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 任务计划列表 amis-schedule-table.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 然后编写获取任务计划的接口,接口内容直接来自官网,笔者将 id 改为动态的。 效果如下图所示: amis-schedule-table2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 amis-schedule-table3.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 授权 通常,只有登录后才能看到数据。比如我们给列表查询接口添加如下权限: 再次请求后端数据,效果如下图所示: amis-schedule-unauth.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 下面我们在发送请求时添加 token,并给 api 加上授权限制。代码如下: 如果在浏览器控制台清空 token,再次请求,就看不到任务列表数据了。 路径美化 未登录的重定向 现在存在几个问题:

登录页和主页的 url 有点丑。比如登录页是 ,希望改成 期望输入 能直接到主页去,如果没有登录,就重定向到登录页 修复共涉及 4 个文件: ,资源路劲的变化,添加一个全局响应适配器,未授权则重定向到登录页 ,资源路劲的变化,登录成功后跳转至 ,url 的修改 ,api 的修改 Tip: url 跟资源路径是没有关系的。比如请求 ,服务器却可以返回 的内容。 接下来测试: 首先在控制台执行 ,清空 token。 接着在浏览器中输入 ,你会发现浏览器首先重定向到 ,然后由于没有 token,于是在重定向到 。如下图所示: amis-url-pretty.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 输入正确的用户名和密码,登录成功,直接来到任务计划。请看下图: amis-url-pretty2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 任务计划的CURD 创建 直接将官网的代码拷贝到 中。 amis-schedule-table-add.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 点击,效果如下图所示: amis-schedule-table-add2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 修改接口,后端接收到新增的信息,在控制台中输入。代码如下所示: 再次点击“新增”,输入 和 ,点击保存,界面提示保存成功,同时表格也会刷新当前页。如下图所示: amis-schedule-table-add3.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 服务器控制台输出如下信息: 更新 参考官网的示例,将对应代码拷贝至 : amis-schedule-table-modify.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 笔者新增两个 api,一个是根据 id 查询如果不提供这个 api,amis 则使用前端的数据,一个是真正修改的 api。代码如下所示: 点击修改按钮,默认是抽屉式弹框。效果如下图所示: amis-schedule-table-modify2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 点击保存。效果如下图所示: amis-schedule-table-modify3.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 删除 参考官网的示例,将对应代码拷贝至 : amis-schedule-table-delete3.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 代码修改如下: 效果如下图所示: amis-schedule-table-delete.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 amis-schedule-table-delete2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 参考官网的示例,将对应代码拷贝至 ,主要是 和 : amis-schedule-table-query2.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 代码修改如下: 效果如下图所示: amis-schedule-table-query.png  这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和 热门话题 查询字段 和 已发送给后端。 amis 后台系统完整代码 至此,我们就用 amis 搭建了一个后台系统,包括登录页,简单的权限控制以及任务计划模块。 后续如果需要添加其他类似的模块,差不多只需要写配置。 这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和。 site.json home.html login.html 后台服务 server.js: github 这里罗列了许多低代码平台,可自行查看。


发表评论

Copyright 2002-2022 by 北京艾奇交通设施工程有限公司(琼ICP备2022001899号-3).All Rights Reserved.