# lowcode-gateway

**Repository Path**: quinngitee/lowcode-gateway

## Basic Information

- **Project Name**: lowcode-gateway
- **Description**: Flexi 拖拽式低代码工具，配合 AI，快速生成 uni-app 、PC 前后端项目。支持 RuoYi 框架。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 31983
- **Created**: 2025-04-08
- **Last Updated**: 2025-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flexi 低代码

Flexi 低代码是一个低代码工具，目前主要聚焦uni-app 的低代码开发，后期将补充 PC 端低代码开发。

Flexi 的主要灵感来源于：

- RuoYi 框架：RuoYi 框架提供了代码生成功能，可以快速生成管理后台的前后端代码。但是，

  - RuoYi 框架是基于模板替换实现的，所以默认是基于 Mysql 的，如果想要使用 SqlServer 、Oracle 等其他数据库，需要使用单独的适配版
  - RuoYi 框架在表关系的处理上，最多能够生成主子表类型，对于 一对多、多对多关系支持较差，还是需要再写代码
  - RuoYi-App 框架没有提供 uniapp 的代码生成功能，几乎所有业务功能都得需要写代码
- diygw 低代码、可视化 uniapp2.0 等 拖拽设计平台（没用过的话可以自己搜索看看）。
  - 这些平台类似于先使用拖拽，把设计图用画布的形式展示出来，通过绑定样式、API 等进行数据绑定，最后再导出整个项目的源代码，由于作者对画布了解不足，所以并没有采用这种方式
  - 如果用户不是程序员，那么这些平台确实能有一定的帮助。但如果用户本身就是程序员，那么可能还需要额外的学习成本来学习平台的使用，可能觉得麻烦
- Cursor + claude3.7
  - AI 写代码的能力确实很强，Flexi 低代码工具的初衷是想做一个类似于拖拽设计的工具，通过拖拽组合组件来形成页面，减少代码量，但是 AI 的出现，使得作者一度怀疑拖拽设计是否还存在价值。作者目前的推荐是，使用 AI 生成代码，使用拖拽进行少量的微调
  - Cursor 等 AI IDE 确实非常好，通过设计图生成单纯的前端页面已经很棒了。但是如果是前后端代码都让 AI 来写，可能需要进行多轮对话，对于前后端一体化的大型项目，可能有些吃力（这里作者说的不一定是对的，因为作者相信 AI 有足够的能力去完全生成一个前后端配合的项目，未来可能真的不需要写代码了）
  - Cursor 重度使用的话，是需要付费的，Trae 作为替代，目前还赶不上 Cursor



## 主要界面截图

![image-20250404154808595](image-20250404154808595.png)



## 交流群

QQ 群：1032180858



## 快速入门：基本用法教程

1、下载代码到本地

```
git clone https://gitee.com/renjianzhi/lowcode-gateway.git
```

2、在 `ruoyi-admin/src/main/resources/application-lowcode.yml` 中配置 appid、服务器地址，如果没有 appid，联系QQ 535170096 获取

3、运行项目（同 RuoYi-Vue 的启动方式）

可参考 https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

4、下载 uni-app 的基础模板项目，支持以下项目

- RuoYi-App `git clone https://gitee.com/y_project/RuoYi-App.git`
- Flexi 提供的基础模板 (后续公布)

5、将 uni-app 项目在 HbuilderX 中打开，并运行到浏览器，得到预览地址 url

6、在 Flexi 低代码页面新建项目，点击 「UI 设计 - 方案列表 - 新增 - 填写项目信息 - 确定」

7、在方案列表中，点击「设计」按钮，进入下方页面

![image-20250404141929327](image-20250404141929327.png)

8、准备一个页面设计图

<img src="Xnip2025-03-12_19-17-16-3748399.jpg" width="30%">

9、让 AI 写出代码，以 Cursor 为例，使用以下指令

```
根据这个图片，生成 uni-app 的页面
只能使用 uni-app 提供的基础组件以及 uni-ui 提供的组件
优先使用 uni-ui 的组件而不是从最基础的组件实现
页面代码的标签层级要尽可能少
只生成 vue 页面文件即可，不需要生成其他项目文件
```

然后把图片直接拖入聊天框

![image-20250404144024470](image-20250404144024470.png)

等待 AI 生成代码，然后复制整个代码内容

![image-20250404144257434](image-20250404144257434.png)

10、导入到 Flexi 低代码中，点击图层编辑器中的「AI / 导入」按钮

![image-20250404144506418](image-20250404144506418.png)

导入完成后，可以在图层编辑器中看到内容

<img src="image-20250404144633635.png" width="50%">

11、设置 tabbar 便于快速查看生成效果，点击 应用全局配置中的「底部 tabBar 配置」按钮

由于 Ruoyi-App 已经定义了 3 个 tabbar，所以把个人中心页面配置到图标 4 上

<img src="image-20250404144851989.png" width="70%">


12、查看 AI 生成的效果

由于导入的操作会解析页面内容、样式，但不会把数据导入进去（因为数据往往需要来自接口），所以我们可以把 Cursor 生成的代码，粘贴到 HBuilderX 中的对应页面中，然后在 Flexi 低代码中进行预览，来快速查看 AI 生成的代码是否满足要求，如果不满足要求，可以再跟 AI 进行对话，让他修改。

修改完的效果可以再次粘贴到 HBuilderX 中，进行效果检查，直到满足要求后，再次进行导入。

<img src="image-20250404145826900.png" width="50%">

13、最终导入满意后，进行数据绑定处理

我们可以先检查 Cursor 生成代码的数据部分，已上述过程中产生的代码为例

![image-20250404150635485](image-20250404150635485.png)

![image-20250404150805536](image-20250404150805536.png)

这些数据是绑定在某个标签上的，我们在图层编辑器中找到绑定此数据的标签，然后点击标签进行编辑

![image-20250404150844749](image-20250404150844749.png)

点击数据选项卡，进行数据绑定，数据绑定分为静态数据、动态接口数据两种

如果数据需要是静态数据，首先把原始数据转换为 json 字符串

![image-20250404152031402](image-20250404152031402.png)

然后填入，保存即可，保存后可重新预览页面效果

![image-20250404152103054](image-20250404152103054.png)

如果数据是来自于接口的

- 把接口 js 文件放在在 项目的 api目录中
- 按照 `api:js 文件名称:js 中的接口名 `的格式进行配置
  - 如果需要传参 `api:js 文件名称:js 中的接口名:参数 `，这里的参数指的是`js方法名(括号中的所有内容才是参数)`

例如：![image-20250404154047327](image-20250404154047327.png)

代表的是，请求

![image-20250404154138329](image-20250404154138329.png)

最终生成的代码为

```
import {all as CategoryAll} from '@/api/Category'

...

methods: {
      loadData() {
        CategoryAll('food').then(data => {
...
```

这样一来，配合后端代码生成，就只需要进行一下数据绑定就可以了，当然，真正的使用过程中还有好多细节要处理，如自定义页面方法、下拉刷新、上拉加载等，会在后续的完整文档中说明。