30分钟教会你搭建低码平台开发完整业务应用

30分钟教会你搭建低码平台开发完整业务应用

引用

CSDN

1.

https://blog.csdn.net/weixin_43267012/article/details/144207229

低代码开发平台通过集成各种组件或样板脚本，让开发者能够不写或者少写代码，通过配置或图形化界面完成应用程序的开发和搭建。本文将通过一个简单的用户管理应用案例，详细介绍如何使用amis和magic-api这两个开源低代码框架来构建完整的业务应用。

关于低代码平台

低代码是一种软件开发的方法，通过集成各种组件或样板脚本，让开发者或者用户能够不写或者少写代码，通过配置或者图形化界面完成应用程序的开发和搭建。国内搭建低码平台的大厂也很多，也足以看出对其的重视，比如腾讯的微搭，阿里的宜搭，百度的amis，华为的应用魔方等，都在探寻如何快速地去搭建页面应用，实现降本增效。

平台和数据库选择

通过对比各平台的优缺点，这里将使用amis和magic-api这两个开源的低码框架的去构建业务应用。如果对其他平台感兴趣的话，也可以通过这篇文章对比自己实践。

magic-api简介

之前我们开发一个接口，至少需要编写Controller，Service，Dao，Mapper文件，还需要各种配置，搭建启动springboot项目，发布完成，接口才算完成。而magic-api可以通过UI界面动态的配置一下接口路径，出入参，点击保存，接口发布完成，即可访问，不需要编写代码，只需要简单配置，还支持事物，分页，http请求等数据库操作。对于一些非核心的字典以及静态数据使用是非常方便的，可以实现快速接口开发。对比一些后端代码生成工具，它的优势在于无需去复制粘贴代码，保存之后即发布，不用再去部署项目。

amis-editor简介

amis 是百度研发的一个低代码前端框架，它可以完全通过可视化编辑器去生成页面和页面的json文件，让我们不用去关心底层代码的实现，就能够快速地去搭建一个页面。同时百度内部也在使用，更新，优化他们自己的组件库，在我的视角来看，他们的组件库确实做得越来越符合直觉，这也是我推荐它的一点。

项目构建

这里先放出amis和magic-api项目的项目地址，大家可以从这里引入项目进行实践。接下来将从前后端低码平台和数据库的构建开始，然后介绍他们的使用方法，带大家从搭建平台到实现业务应用。

magic-api项目构建

引入上述项目中的magic-api-example，项目引入之后目录结构如下。

引入项目之后我们需要先去建立一个数据库，这里命名为magic，然后需要在数据库中初始化以下两张表之后才能使用。

CREATE DATABASE magic;

CREATE TABLE `magic_api_file` (
  `file_path` varchar(512) NOT NULL,
  `file_content` mediumtext,
  PRIMARY KEY (`file_path`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4

CREATE TABLE `magic_api_backup` (
  `id` varchar(32) NOT NULL COMMENT '原对象ID',
  `create_date` bigint(13) NOT NULL COMMENT '备份时间',
  `tag` varchar(32) DEFAULT NULL COMMENT '标签',
  `type` varchar(32) DEFAULT NULL COMMENT '类型',
  `name` varchar(64) DEFAULT NULL COMMENT '原名称',
  `content` blob COMMENT '备份内容',
  `create_by` varchar(64) DEFAULT NULL COMMENT '操作人',
  PRIMARY KEY (`id`,`create_date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4

接着我们需要修改resources文件下的application.yml文件，将数据库配置指向自己的创建的数据库。

server:
  port: 9999
  # 配置静态资源启用 gzip 压缩
  compression:
    enabled: true
    min-response-size: 128
# 配置主数据源
spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
  datasource:
    url: jdbc:mysql://localhost:3306/magic
    username: ****      **这里配置自己的用户名和密码**
    password: ****
magic-api:
  web: /magic/web
  resource:
    type: database  # 配置接口存储方式，这里选择存在数据库中
    table-name: magic_api_file  # 数据库中的表名
    prefix: /magic-api  # 前缀

启动项目，可以看到运行起来的magic-api的配置页面。

amis-editor项目构建

引入上述项目的amis-editor，项目引入之后目录如下。

无需修改任何配置，只需要保证开发环境有安装npm和node，且node版本最好在18.0.0以上。

在控制台执行以下代码：

npm install && npm run dev

启动后amis-editor配置界面如下。

到这里amis和magic-api的搭建就完成了，接下来将用它们去完成一个简单的业务需求。

业务应用搭建

业务描述

这里以实现用户管理页面功能为例，目的是能够通过页面实现对用户进行查询，新增，修改，删除的操作。首先去建立一张用户表，然后通过magic-api写出增删改查的接口，再通过amis-editor去完成页面的搭建以及接口的调用，从而完成用户管理的页面功能。

创建业务数据表

在刚才创建好的magic数据库中再去创建一张简单的数据库表，包含用户ID，用户名称，用户邮箱，用户电话，用户生日和激活状态。

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL,
    telephone VARCHAR(100) NOT NULL,
    birthdate DATE,
    is_active BOOLEAN DEFAULT TRUE
);

使用magic-api编写接口

首先添加用户管理分组，如下图所示：

然后在用户管理目录下添加下面四个接口，填写接口名称，路径，以及它的请求方式：

1、新增用户接口（/user/addUser）

在编辑区输入以下代码：

return db.table('users').insert(body);

然后在请求body处输入以下数据：

{
    "id":1,
    "username":"小明",
    "email":"163.xom",
    "telephone":"023-122333",
    "birthdate":"1997-01-11",
    "is_active":true
}

点击右上角运行按钮可以在看到执行结果，请求成功之后可以看到users表中已经成功添加刚才请求的这条数据。

2、查询用户接口（/user/getUserPage）

在编辑区输入以下代码：

return db.table('users').page()

直接点击运行按钮，可以看到如下请求结果：

3、修改用户接口（/user/updateUser）

在编辑区输入以下代码：

return db.table('users').primary('id',body.id).update(body);

以id为主键，修改这条数据的姓名，电话，邮箱和状态如下：

{
    "id":1,
    "username":"小红",
    "email":"123.xom",
    "telephone":"013-122333",
    "birthdate":"1993-01-11",
    "is_active":false
}

然后点击运行按钮，可以看到如下请求结果：

再调用刚才的查询接口可知数据已经成功修改：

4、删除用户接口（/user/deleteUser）

在编辑区输入以下代码：

return db.update('delete from users where id=#{id}');

请求方式设为delete，然后再将请求参数id设为1，点击运行后结果如下：

再去查询接口发现数据已成功删除：

接口到这里已经构建完毕，接下来开始编写页面，并在页面中去调用这几个接口。

使用amis-editor构建页面

1、添加用户管理页面

2、完成用户列表

点击菜单右侧编辑按钮，进入可视化编辑页面。

将右侧的增删改查组件拖入右侧画布，接口地址填写刚才写好的分页查询数据的接口，然后将标题和对应字段的字段名填入输入框中。

点击保存后再预览如下，就完成了简单的查询页面。

3、完成新增弹窗和接口对接

选中新增按钮的组件，点击事件栏中的配置动作，再选择配置弹窗内容。

将日期参数由文本框修改为日期类型，并注意修改日期值格式。

再给是否激活项添加下拉选项。

保存之后再点击左侧栏显示json代码，将图中对应位置新增的接口修改为http://localhost:9999/user/addUser，也可以在弹窗内部用编辑器进行修改。

点击预览测试保存功能。

4、完成编辑弹窗和接口对接

选中编辑按钮，将api的url修改为http://localhost:9999/user/updateUser。

将日期和是否激活如同新增的操作一样进行修改类型和添加选项。

点击预览测试编辑功能。

4、完成删除接口对接

选中删除按钮，将api的url修改为http://localhost:9999/user/deleteUser?id=${id}。

点击预览测试删除功能。

至此，就完成了用户管理的全部功能，其中还有很多的属性和功能配置还未完善，比如说前端还需要保存时校验字段，分页配置，字段映射，还有样式的选择等等。后端也需要接口鉴权，拦截器，sql缓存，自定义函数，定时任务等等。其实这些功能编辑器也都支持，这里以一个最简单的完整应用为例，更多更完整的功能待读者自己去查看文档去完善。

后记

低代码平台的目的其实是让非技术人员，使其可以自行完成客户需求的开发工作。将技术人员从低水平的重复工作中解脱出来，同时提升了其他角色的产出，本来应该是个多赢的局面。但是现在大多数低代码平台灵活性，扩展性不理想，一些特殊的需求不能通过拖拽组合出来，需要写脚本支持，不会技术的搞不懂，会技术的会觉得使用繁琐，时间也没有节省，维护工作又增加，事与愿违。但这不是低代码的错，它只是一种工具，随着开发人员的不断更新发展，可以预见它的使用会变得越来越灵活，规范化且符合逻辑，再往后就可以展望它和AI的联动，更快速地去完成页面地开发。