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

对于低代码平台，有些程序员会觉得它提升了开发效率，也有些程序员会对它嗤之以鼻，认为它很鸡肋，并派不上什么用处。这里我将带大家用低代码平台，从后端到前端去开发一个简单的增删改查应用，哪怕是不太会写代码的小白，也可以在实践的过程中去了解它的优点和不足之处。

关于低代码平台

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

平台和数据库选择

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

平台	描述官网
amis	前端低码平台
magic-api	后端低码平台
mysql	数据库

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的联动，更快速地去完成页面地开发。

这是我的第一篇文章，在我刚开始接触编程时，读一些文章的时候会觉得很多步骤没头没尾，向作者发问时也基本不回，所以我这里想要尽可能详细地去阐述每一步的操作，可能会显得比较啰嗦，不喜见谅。如果对我的文章有疑问的也可以直接和我沟通，一起学习进步，谢谢。