啥是低代码?感觉很熟悉的样子
共 3100字,需浏览 7分钟
·
2021-04-12 12:31
一、前言
2021 开年“低代码”成了热门话题,各大云厂商都在加码。作为普通企业的我们是否有也可以深度定制一套自己的“低代码”平台呢?
二、云厂商的低代码平台阿里推出了易搭,通过简单的拖拽、配置,即可完成业务应用的搭建。旨在为广大中小企业提供一套低成本的企业应用搭建解决方案。应用无缝植入钉钉企业工作台,随时随地、高效协同。
![ebe31a961acf5d989afea1a274acc081.webp](https://filescdn.proginn.com/91db2dc35fa3840177285cb9b82ceb96/ebe31a961acf5d989afea1a274acc081.webp)
腾讯则是推出了微搭,通过行业化模板、拖放式组件和可视化配置快速构建多端应用(小程序、H5 应用、Web 应用等),打通了小程序、云函数。
![9d7bce2be98cdc804219f78a7ca39a68.webp](https://filescdn.proginn.com/dee750148aff944455a5ef35a4586bb4/9d7bce2be98cdc804219f78a7ca39a68.webp)
回到前言中的问题,我们是否可以基于开源项目来快速搭建我们自己的低代码平台呢?答案是肯定的,目前已经有很多非常不错的开源项目,apijson、dataway 还有后面我要重点介绍的 magic-api 都是非常不错的低代码开源项目。下面大家请跟着我一起来看看今天我要推荐的三个低代码开源项目:百度 amis、h5-Dooring 和 magic-api。
3.1百度 amis(前端)
百度 amis 是一套前端低代码框架,通过 JSON 配置就能生成各种后台页面,极大减少开发成本,甚至可以不需要了解前端。
![efffa7640774feaba8969fe680a6fcc0.webp](https://filescdn.proginn.com/4bad90b0b29b046d5220f1bc5369b3dc/efffa7640774feaba8969fe680a6fcc0.webp)
3.2 h5-Dooring(前端)
h5-Dooring,让 H5 制作像搭积木一样简单, 轻松搭建 H5 页面, H5 网站, PC 端网站, 可视化设计。
H5 页面拖拽生成:
![f92a78f75700d4ac6eef8ad3caa18cac.webp](https://filescdn.proginn.com/a8afedf144bd01c81a64a242a2a5c636/f92a78f75700d4ac6eef8ad3caa18cac.webp)
新建数字大屏:
![ed4b36eae9846679337b77536184f9d7.webp](https://filescdn.proginn.com/862ca83d9a5f26aa448bc6cff915a17a/ed4b36eae9846679337b77536184f9d7.webp)
数字大屏效果:
![97f3ca7466888b22e3e893381a8c405b.webp](https://filescdn.proginn.com/7b52b5966ed7de652e1e0ac660f1255b/97f3ca7466888b22e3e893381a8c405b.webp)
更多请查看官网http://h5.dooring.cn
3.3 magic-api(后端)
magic-api 是一个基于 Java 的接口快速开发框架,编写接口将通过 magic-api 提供的 UI 界面完成,自动映射为 HTTP 接口,无需定义 Controller、Service、Dao、Mapper、XML、VO 等 Java 对象即可完成常见的 HTTP API 接口开发。
在线开发调试 UI:
![33bd26f831122285a5f87696d5640f25.webp](https://filescdn.proginn.com/8eedef52415427653f6a656b357a5db5/33bd26f831122285a5f87696d5640f25.webp)
自 magic-api 在开源中国开源,笔者一直在关注此项目。magic-api 搭建比较简单,跟着官方仓库快速开始即可。
4.1 加入依赖
<!-- 以 spring-boot-starter 的方式引用 -->
<dependency>
<groupId>org.ssssssss</groupId>
<artifactId>magic-api-spring-boot-starter</artifactId>
<version>1.0.1</version>
</dependency>
4.2 添加配置
server.port=9999
#配置 web 页面入口
magic-api.web=/magic/web
#配置文件存储位置。当以 classpath 开头时,为只读模式
magic-api.resource.location=/data/magic-api
4.3 效果
![b872bc19422dc28af90f1c0ac2b80568.webp](https://filescdn.proginn.com/97df8b376da808bc0cc31da09669a8e1/b872bc19422dc28af90f1c0ac2b80568.webp)
4.4 添加接口
![2e94f4ab75c952c6010adbd3089d7db4.webp](https://filescdn.proginn.com/013160daacc75eba90bba34c02a33345/2e94f4ab75c952c6010adbd3089d7db4.webp)
点击执行就可以看到效果,这里不做展示,magic-api 官方做了大量的各种各样的功能演示,大家可以去体验体验。地址:http://140.143.210.90:9999/magic/web/index.html
![3c8d75a41215d048fb8e93fcaf32caf8.webp](https://filescdn.proginn.com/2bb40c02809fd2b56fd616129cf77ce8/3c8d75a41215d048fb8e93fcaf32caf8.webp)
4.5 magic-api 核心之 magic-script
magic-api 底层使用的是作者(小东)自研的 magic-script 来执行脚本,他是一个语法类似 js 的 JVM 脚本语言。作者开发很多好用的功能, 其中的linq功能就是非常🐂💨的一个。
示例:
var list = [{
sex : 0,
name : '小明'
},{
sex : 1,
name : '小花'
}]
return select * from list t where t.sex = 0
结果:
{
"sex": 0,
"name": "小明"
}
五、结合 mica 使用5.1 加入 mica-bom 依赖
<dependencyManagement>
<dependencies>
<dependency>
<groupId>net.dreamlu</groupId>
<artifactId>mica-bom</artifactId>
<version>${mica.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
5.2 mica-logging 无缝接入
mica-logging 的接入比较简单加入依赖即可:
![9cf56f92c7e6ff1dcab6fdf080d33a2d.webp](https://filescdn.proginn.com/729a5a15e25132fd1b457822dfd16a76/9cf56f92c7e6ff1dcab6fdf080d33a2d.webp)
注意:更多配置,如 json 日志和 logstash 日志收集请查看 mica 文档。
5.3 mica-captcha 验证码
base64 验证码:
![c2f72d8f9210018f20b462c104b8b6b9.webp](https://filescdn.proginn.com/c7db3ce7761e50779006c5dc509c3200/c2f72d8f9210018f20b462c104b8b6b9.webp)
5.4 mica-ip2region ip 转位置信息
![7d98945a30f7bce3c134a8d3406491e7.webp](https://filescdn.proginn.com/7d4a34da067dc08f8cfb589d7a3f1c6f/7d98945a30f7bce3c134a8d3406491e7.webp)
示例项目源码:https://gitee.com/596392912/magic-api-example
从 mica 的接入可以看出,magic-api 的扩展性非常好,更多的自定义配置和扩展我们可以查看官方文档:
![282a233db830462a817d68bce5da1237.webp](https://filescdn.proginn.com/f63e572e1856e6cdc55f73eaf5a16807/282a233db830462a817d68bce5da1237.webp)
前端:
amis(百度前端低代码框架):https://github.com/baidu/amis
Sortable:https://github.com/SortableJS/Sortable
码良:https://gitee.com/ymm-tech/gods-pen
h5-Dooring:https://github.com/MrXujiang/h5-Dooring
后端:
apijson:https://github.com/Tencent/APIJSON
dataway:https://gitee.com/zycgit/hasor
magic-api:https://gitee.com/ssssssss-team/magic-api
七、总结基于 magic-api 等开源项目我们也可以搭建自己的低代码平台。当然开发这个低代码平台我们还是需要些工作量,主要是打通 web ui 和后端接口的 api。笔者曾经也经历过一个电商项目,很多活动都是周五下午接到需求,周一就必须要上线。借助 magic-api 这类低代码工具我们可以快速完成这类需求。最后,希望这篇文章对大家有所启发。
![aaeb5f63b9b30877a9d04d3f31a3b352.webp](https://filescdn.proginn.com/14851f215b4b3cecfa442fd2452641c3/aaeb5f63b9b30877a9d04d3f31a3b352.webp)
![920d3dbd5093e5367cc3b4ed9f12ee52.webp](https://filescdn.proginn.com/c35ba1c0636fae7499ec86331beb35ba/920d3dbd5093e5367cc3b4ed9f12ee52.webp)
![221a4f3c8be9aab46f2ae5ab1eabbcd4.webp](https://filescdn.proginn.com/6622e5d48758340d506ed3346e3190d0/221a4f3c8be9aab46f2ae5ab1eabbcd4.webp)
![b4b4a3ee95532b4a7fc9bdadefc94e4e.webp](https://filescdn.proginn.com/0842b90a6577996e0b4a4e824ce0e0bf/b4b4a3ee95532b4a7fc9bdadefc94e4e.webp)
Jenkins Pipeline动态使用Git分支名称的技巧,可以触类旁通的那种
![b60cba8dffad9ea6f3e88d7fc23cd447.webp](https://filescdn.proginn.com/43cc2d0e1ae6c2a920e89403e7d82ca4/b60cba8dffad9ea6f3e88d7fc23cd447.webp)