# trta-lowcode-vue3

**Repository Path**: trta/trta-lowcode-vue3

## Basic Information

- **Project Name**: trta-lowcode-vue3
- **Description**: trta-lowcode-vue3 项目采用 Vue3.0、Vite、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。强大的可视化配置功能使前后端代码一键生成，支持可视化编程实现低代码、零代码快速开发!
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-03
- **Last Updated**: 2026-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
	<img alt="logo" width=200" src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/logo.png">
</p>
<h4 align="center">在线轻松驾驭99.99%编程挑战。</h4>
<p align="center">
 <img src="https://img.shields.io/badge/trtalowcode-1.0.0-red.svg" alt="Downloads">
 <img src="https://img.shields.io/badge/Spring%20Boot-2.7.18-yellow.svg" alt="Downloads">
 <img src="https://img.shields.io/badge/Vue-3.2-blue.svg" alt="Downloads">
 <img src="https://img.shields.io/badge/license-Apache 2.0-green.svg" alt="Downloads">
 <img src="https://img.shields.io/github/stars/trtalowcode/trtalowcode.svg" alt="Downloads">
 <img src="https://img.shields.io/badge/可商用-免费-purple.svg" alt="Downloads">
</p>

<div align="center">
  <p>
    💻 <strong>低代码演示：</strong><a href="http://demo.trta.cn">demo.trta.cn</a> |
     💦️ <strong>自研工作流：</strong><a href="http://flow.trta.cn">flow.trta.cn</a> |
    ☕️ <strong>技术社区：</strong><a href="http://doc.trta.cn">doc.trta.cn</a>
  </p>
</div>

## 📱 项目简介

**trtalowcode** 是一款基于SpringBoot专为企业打造的低代码开发框架，以低代码为核心，实现快速开发。提供可视化界面，拖拽组件即可搭建应用，无需复杂代码编写，极大提升开发效率。企业可免费使用，灵活适配业务需求，助力高效数字化转型，是企业降本增效的利器。
<br><br>
<img src="https://img.shields.io/badge/注意:-trtalowcode 可以用于个人或公司的项目，不允许任何形式的二次开源并且禁止售卖源代码-red.svg" alt="Downloads">

## 🎥 视频教程
点击查看视频
<table>
    <tr>
        <td ><a href="https://www.bilibili.com/video/BV1CgmtBKExE" target="_blank"><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/startup_bdkf.png"/></a></td>
        <td ><a href="https://www.bilibili.com/video/BV1F8msBdEo7" target="_blank"><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/startup_java.png"/></a></td>
        <td ><a href="https://www.bilibili.com/video/BV1zYmsB9EW7" target="_blank"><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/start_vue.png"/></a></td>
    </tr>
</table>


## 💻 代码架构

| 分支           | 简介                         | | 分支           | 简介                         |
|--------------|----------------------------|-|--------------|----------------------------|
| master       | 使用jdk8  + SpringBoot2.7.18 | | master_jdk17 | 使用jdk17 + SpringBoot3.3.1  |


``` 
com.trtalowcode  
    ├── trtalowcode-admin                      // 启动模块
    ├── trtalowcode-code                       // trtalowcode核心模块
    ├── trtalowcode-dependencies               // 项目版本依赖模块
    ├── trtalowcode-framework                  // 功能模块
    │       └── trtalowcode-excel              // Excel导入导出模块
    │       └── trtalowcode-exception          // 自定义异常模块
    │       └── trtalowcode-global             // 全局配置模块
    │       └── trtalowcode-plus               // SQL/DDL 语构建模块
    │       └── trtalowcode-tenant             // 租户模块
    │       └── trtalowcode-utils              // 工具类模块
    ├── trtalowcode-module                     // 个人业务相关（写在这个模块）
    │       └── trtalowcode-module-api         // 个人业务模块API
    │       └── trtalowcode-module-biz         // 个人业务模块
    ├── trtalowcode-service                    // 业务模块
    │       └── trtalowcode-service-bpm-api    // 流程业务模块API
    │       └── trtalowcode-service-bpm-biz    // 流程业务模块
    │       └── trtalowcode-service-infra-api  // 基础业务模块API
    │       └── trtalowcode-service-infra-biz  // 基础业务模块
    │       └── trtalowcode-service-system-api // 系统业务模块API
    │       └── trtalowcode-service-system-biz // 系统业务模块
    ├── trtalowcode-tool                       // 工具模块
```

## 👥 项目关系

| 项目 | Star                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | 简介      |
|--|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
| [trtalowcode](https://gitcode.com/trtalowcode/trtalowcode)| [![Gitee star](https://gitee.com/trtalowecode/trtalowcode/badge/star.svg)](https://gitee.com/trtalowecode/trtalowcode) [![GitHub stars](https://img.shields.io/github/stars/trtalowcode/trtalowcode.svg?style=social&label=Stars)](https://github.com/trtalowcode/trtalowcode) [![star](https://gitcode.com/trtalowcode/trtalowcode/star/badge.svg)](https://gitcode.com/trtalowcode/trtalowcode)                                                                                     | 基于 Spring Boot 多模块架构   |
| [trtalowcode-ui-admin-vue3](https://gitcode.com/trtalowcode/trtalowcode-ui-admin-vue3)| [![Gitee star](https://gitee.com/trtalowecode/trtalowcode-ui-admin-vue3/badge/star.svg)](https://gitee.com/trtalowecode/trtalowcode-ui-admin-vue3) [![GitHub stars](https://img.shields.io/github/stars/trtalowcode/trtalowcode-ui-admin-vue3.svg?style=social&label=Stars)](https://github.com/trtalowcode/trtalowcode-ui-admin-vue3) [![star](https://gitcode.com/trtalowcode/trtalowcode-ui-admin-vue3/star/badge.svg)](https://gitcode.com/trtalowcode/trtalowcode-ui-admin-vue3) | 基于 Vue3 + Element Plus + Avue 实现的后台管理 |

## 🖼️ 系统架构图

<img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/jsjg2.png"/>




## 🐛 Hello World入门
只需要**4步** 带你了解低代码trtalowcode
<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/hello1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/hello2.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/hello3.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/hello4.png"/></td>
    </tr>
</table>
<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/hello5.png"/></td>
    </tr>
</table>

## 💻 演示效果图

### 1. 手机端效果图：
<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/app1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/app2.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/app3.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/app5.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/app6.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/app7.png"/></td>
    </tr>
</table>

### 2. 电脑端效果图：
<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/pc1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/pc2.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/pc3.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/pc4.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/pc5.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/pc6.png"/></td>
    </tr>
</table>

### 3. 动态效果图：
<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/gif5.gif?v=20251209"/></td>
    </tr>
</table>

## 🌟 框架核心亮点

### 1. 首页：

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/trtalowcode-sy.png"/></td>
    </tr>
</table>

### 2. 在线表构建：

通过图形用户界面直观地创建数据表，一旦创建完成，即刻享有增、删、改、查、数据导入和导出的全面功能，操作简便，效率倍增。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/bcj1.png"/></td>
    </tr>
        <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/bcj2.png"/></td>
    </tr>
</table>

### 3. 在线统计报表：

只需配置简单的SQL语句，即可迅速生成包括柱状图、折线图、饼图以及卡片视图在内的多样化统计报表，直观展现数据分析结果。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/trtalowcode-tj-pz.png"/></td>
    </tr>
        <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/trtalowcode-tj.png"/></td>
    </tr>
</table>

### 4. 在线多表关联：

利用界面化的灵活配置，实现多表关联的直观展示，确保所见即所得的数据处理体验。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/duobiao1.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/duobiao2.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/duobiao3.png"/></td>
    </tr>
</table>

### 5. 在线格式化字段显示：

为满足界面字段合并显示需求，提供三种简捷处理方法：数据库层面的SQL函数拼接，查询时的SQL字符串合并，以及应用层的Java代码处理。选择适合的方法以优化性能和灵活性。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/zdgshxs1.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/zdgshxs2.png"/></td>
    </tr>
</table>

### 6. 在线排序设置：

通过拖放操作，用户可以直观地设置初始化数据的排序规则。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/zdpx1.png"/></td>
    </tr>
</table>

### 7. 在线租户数据权限配置：

提供在线配置工具，轻松实现租户级别的数据权限设定，确保数据访问的安全性和合规性，提升**多租户**场景下的应用灵活性。**trtalowcode**以其卓越的灵活性、高效性和易用性，成为加速数字化转型、驱动业务创新的理想选择。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/8.jpeg"/></td>
    </tr>
</table>

### 8. 广泛数据库兼容：

<table>
    <tr>
        <th >数据库</th>
        <th width="80%">是否支持</th>
    </tr>
    <tr>
        <td >MySql</td>
        <td >支持</td>
    </tr>
    <tr>
        <td >Oracle11g</td>
        <td >支持</td>
    </tr>
    <tr>
        <td >PostgreSQL</td>
        <td >支持</td>
    </tr>
    <tr>
        <td >达梦</td>
        <td >支持</td>
    </tr> 
</table>

### 9. 在线表单设计：

提供丰富多样的控件，全面支持各类页面的开发需求。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/zxbd1.png"/></td>
    </tr>
</table>

### 10. 丰富完善的示例：

丰富完善的示例，便于用户快速学习和上手

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/lizi1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/lizi2.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/lizi3.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/lizi4.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/lizi5.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/lizi6.png"/></td>
    </tr>
</table>

### 11. 100+常用模板：

提供了丰富多样的常用页面模板，以便开发者能够迅速采纳和应用。

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/mb-sy1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/mb-sy2.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/mb-ty1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/mb-ty2.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/mb-ty3.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/mb-ty4.png"/></td>
    </tr>
</table>

## 📥 启动步骤
### 1. 后台JAVA代码运行步骤

**环境配置**

**运行环境**：JDK1.8

**开发工具：** Idea、Maven

**默认已启动中间件：（推荐使用宝塔）**[Mysql8.0](http://mysql.p2hp.com/)、[Redis](https://redis.io/)、[Minio](http://www.minio.org.cn/)


<table>
    <tr>
        <td>第一步：下载trtalowcode项目并导入IDEA中</td>
    </tr>
    <tr>
        <td>第二步：导入数据库文件到mysql中，并修改项目的数据库以及redis配置</td>
    </tr>
    <tr>
        <td>第三步：根据示例配置好对应数据库，刷新Maven,再进行Complie编译,启动项目</td>
    </tr>
</table>    

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/bz1.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/bz2.png"/></td>
    </tr>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/bz3.png"/></td>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/bz4.png"/></td>
    </tr>
</table>

### 2. 前端VUE代码运行步骤：

**后台运行环境：** node18.0.0

**开发工具：** VsCode

<table>
    <tr>
        <td>第一步：检查本地Node环境</td>
    </tr>
    <tr>
        <td>第二步：安装PNPM</td>
    </tr>
    <tr>
        <td>第三步：使用PNPM安装项目依赖</td>
    </tr>
    <tr>
        <td>第四步：配置项目后台地址</td>
    </tr>
    <tr>
        <td>第五步：启动项目</td>
    </tr>
</table>  


**第一步：检查本地环境：Node.js: 18.0.0**

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/13.jpg"/></td>
    </tr>
</table>

**第二步：安装PNPM，提升依赖的安装速度**

1.先配置NPM仓库

```
npm config set registry https://registry.npmmirror.com
```

2.安装PNPM

```
npm install -g pnpm
```

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/14.jpg"/></td>
    </tr>
</table>

**第三步：安装依赖**

进 入项目目录，执行

```
pnpm install
```

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/15.jpg"/></td>
    </tr>
</table>

**第四步：配置后台地址**

修改项目根目录下文件.env.dev中的请求路径为本地后台地址

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/16.jpg"/></td>
    </tr>
</table>

```
VITE_BASE_URL='http://127.0.0.1:48080'
```

**第五步:启动项目**

```
pnpm run dev-server
```

**访问地址**

<table>
    <tr>
        <td ><img src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/18.jpg"/></td>
    </tr>
</table>

## 👏 微信交流群/合作

<table>
  <tr>
    <td >微信交流群（添加时备注：进群）</td>
    <td >官方公众号</td>
  </tr>
  <tr>
    <td ><img height="320" width="250" src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/trtalowcode-kf.png"/></td>  
    <td ><img height="250" width="250" src="https://oss.mj.ink/chatgpt/trtalowcode/gitee/wxgzh.jpg"/></td>  
  </tr>
</table>



## 🔗 文章收录
- [【天若源码教程实战】开源|频繁的需求变更？不想写代码了？试试这款二开的低代码平台，业务拖拉拽快速上线。](https://mp.weixin.qq.com/s/xwcxredXlucXc-1soFHoCQ)
- [【码农闲谈AI】8.5K Star！拖拽组件即可搭建应用！接单神器！](https://mp.weixin.qq.com/s/f31mYUkprhXFrVva_zC1_g)
- [【刘哥聊技术】开源|写代码太累？这款低代码平台，拖拖拽拽就能上线业务系统](https://mp.weixin.qq.com/s/YW5HI0sucGqLzEIUrpr1Kw)
- [【龙归故里】Java低代码快速开发框架trtalowcode，助你快速实现业务系统开发](https://mp.weixin.qq.com/s/vtubg0xSnxXO8vjLiY3r4w)
- [【开源智慧工坊】免费商用 + 全功能覆盖！trtalowcode：企业数字化的性价比之选](https://mp.weixin.qq.com/s/XaqEaH_U_ep1c3HoOE0_uQ)
- [【写代码的老梁】一款开源低代码王炸！企业级功能全免费，小白也能快速上手!](https://mp.weixin.qq.com/s/BE5FB40uFWtItFxJ7R6Nfw)
- [【开源深码】零代码基础也能快速上手，trtalowcode助力企业数字化转型](https://mp.weixin.qq.com/s/soUA7qK6xt0p6SXD9yy8Zg)
- [【程序员开源栈】企业级低代码平台，轻松应对99.99%编程挑战](https://mp.weixin.qq.com/s/M4h9wiZ1U7Fd3E4Ze4Yq_A)
- [【一飞开源】[开源]精心二次封装的企业级低代码开发框架，全开源低代码开发平台，在线轻松驾驭99.99%编程挑战](https://mp.weixin.qq.com/s/TZ094u7jm4wq3tacjPEExQ)
- [【予墨致远】无需编码，trtalowcode 助你轻松构建强大应用！-trtalowcode](https://mp.weixin.qq.com/s/h4jVs8DBAzaeSWKpDVo0xw)
- [【低代码世界】体验trtalowcode，感受低代码开发的魅力与高效！](https://mp.weixin.qq.com/s/JNwFWHRPFwcEIE5JV5xT3A)