Document front workbench setup

This commit is contained in:
王鹏
2026-05-22 16:50:23 +08:00
parent 625489e77c
commit 56dbc02526
2 changed files with 82 additions and 6 deletions

View File

@@ -12,7 +12,8 @@
| 数据访问 | MyBatis、PageHelper、Druid、MySQL | | 数据访问 | MyBatis、PageHelper、Druid、MySQL |
| 缓存与任务 | Redis、Quartz | | 缓存与任务 | Redis、Quartz |
| 接口与工具 | JWT、Swagger/Springfox 3、Velocity、Fastjson2、Apache POI、OSHI | | 接口与工具 | JWT、Swagger/Springfox 3、Velocity、Fastjson2、Apache POI、OSHI |
| 前端 | Vue 2.6.12、Vue CLI 4.4.6、Element UI 2.15.14、Vue Router、Vuex、Axios | | 后台前端 | Vue 2.6.12、Vue CLI 4.4.6、Element UI 2.15.14、Vue Router、Vuex、Axios |
| 前台工作台 | Vue 3、Vite、Element Plus、Vue Router、Axios |
| 构建 | Maven、npm | | 构建 | Maven、npm |
## 架构概览 ## 架构概览
@@ -41,7 +42,8 @@ flowchart LR
| `ruoyi-quartz` | 定时任务模块,封装 Quartz 任务、任务日志和调度管理。 | | `ruoyi-quartz` | 定时任务模块,封装 Quartz 任务、任务日志和调度管理。 |
| `ruoyi-generator` | 代码生成模块;包含若依原生表驱动代码生成,以及本项目扩展的项目、模板、数据源、模块、代码片段、项目结构等功能。 | | `ruoyi-generator` | 代码生成模块;包含若依原生表驱动代码生成,以及本项目扩展的项目、模板、数据源、模块、代码片段、项目结构等功能。 |
| `ruoyi-common` | 通用工具、常量、注解、基础实体、响应对象、异常、工具类等公共代码。 | | `ruoyi-common` | 通用工具、常量、注解、基础实体、响应对象、异常、工具类等公共代码。 |
| `ruoyi-ui` | Vue 2 + Element UI 前端工程。 | | `ruoyi-ui` | Vue 2 + Element UI 后台前端工程。 |
| `easycode-web` | Vue 3 + Vite 前台生成工作台,提供前台登录、数据库生成、表结构编辑和项目预览。 |
| `sql` | 数据库初始化与扩展脚本。 | | `sql` | 数据库初始化与扩展脚本。 |
| `doc` | 代码生成平台规划文档。 | | `doc` | 代码生成平台规划文档。 |
| `docs` | 部分扩展 Controller 的接口说明文档。 | | `docs` | 部分扩展 Controller 的接口说明文档。 |
@@ -76,6 +78,15 @@ flowchart LR
扩展生成链路大致为:维护数据源和数据表,配置项目基本信息、项目关联表、模块、模板和结构树,通过 `GenProjectController` 预览或下载项目结构与生成代码。 扩展生成链路大致为:维护数据源和数据表,配置项目基本信息、项目关联表、模块、模板和结构树,通过 `GenProjectController` 预览或下载项目结构与生成代码。
### 前台生成工作台
- 前台目录:`easycode-web`
- 后端接口前缀:`/front/**`
- 前台用户与项目草稿使用独立的 `front_*` 表,不复用后台 `sys_user`
- DeepSeek 只在后端 `AiGenerateService` 中调用,前端不会直接访问 AI 服务。
- 新增数据库脚本:`sql/front_workbench.sql`,完整初始化脚本已合并到 `sql/db.sql`
- 工作流:前台注册/登录 -> 创建项目草稿 -> 生成 MySQL 表结构 -> 编辑表和字段 -> 预览后端、前台前端、后台前端项目结构和代码。
## 本地启动 ## 本地启动
### 1. 环境准备 ### 1. 环境准备
@@ -113,7 +124,7 @@ CREATE DATABASE ry DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
mysql -uroot -p ry < sql/db.sql mysql -uroot -p ry < sql/db.sql
``` ```
`sql/db.sql` 已整合若依基础表、Quartz 调度表、代码生成平台扩展表、初始化数据、代码生成平台菜单和按钮权限。分散脚本仍可作为增量或排查参考: `sql/db.sql` 已整合若依基础表、Quartz 调度表、代码生成平台扩展表、前台工作台表、初始化数据、代码生成平台菜单和按钮权限。分散脚本仍可作为增量或排查参考:
1. `sql/ry_20240629.sql`:若依基础表与基础数据。 1. `sql/ry_20240629.sql`:若依基础表与基础数据。
2. `sql/quartz.sql`Quartz 调度表。 2. `sql/quartz.sql`Quartz 调度表。
@@ -123,6 +134,7 @@ mysql -uroot -p ry < sql/db.sql
6. `sql/sys_project_structure.sql`:项目结构节点表与初始化结构。 6. `sql/sys_project_structure.sql`:项目结构节点表与初始化结构。
7. `sql/add_create_table_sql_field.sql`:给 `gen_table` 增加建表 SQL 字段。 7. `sql/add_create_table_sql_field.sql`:给 `gen_table` 增加建表 SQL 字段。
8. `ruoyi-generator/sql/template_file_update.sql`:模板文件表增量字段。 8. `ruoyi-generator/sql/template_file_update.sql`:模板文件表增量字段。
9. `sql/front_workbench.sql`:前台用户、项目草稿、表结构、生成记录和预览文件表。
### 3. 配置后端 ### 3. 配置后端
@@ -152,6 +164,8 @@ java -jar ruoyi-admin/target/ruoyi-admin.war
### 4. 启动前端 ### 4. 启动前端
后台前端:
```bash ```bash
cd ruoyi-ui cd ruoyi-ui
npm install --registry=https://registry.npmmirror.com npm install --registry=https://registry.npmmirror.com
@@ -162,6 +176,18 @@ npm run dev
浏览器访问:`http://localhost:80` 浏览器访问:`http://localhost:80`
前台工作台:
```bash
cd easycode-web
npm install
npm run dev
```
前台默认端口为 `5174`,开发环境会将 `/front/**` 代理到 `VITE_API_BASE_URL`,默认 `http://localhost:8080`
浏览器访问:`http://localhost:5174`
默认账号: 默认账号:
```text ```text
@@ -203,6 +229,19 @@ npm run build:prod
ruoyi-ui/dist ruoyi-ui/dist
``` ```
前台工作台构建:
```bash
cd easycode-web
npm run build
```
产物位于:
```text
easycode-web/dist
```
生产环境需要注意: 生产环境需要注意:
- `ruoyi-ui/vue.config.js` 中生产 `publicPath``/yidaima` - `ruoyi-ui/vue.config.js` 中生产 `publicPath``/yidaima`
@@ -214,7 +253,8 @@ ruoyi-ui/dist
| 入口 | 地址 | | 入口 | 地址 |
| --- | --- | | --- | --- |
| 后端服务 | `http://localhost:8080` | | 后端服务 | `http://localhost:8080` |
| 前端页面 | `http://localhost:80` | | 后台前端页面 | `http://localhost:80` |
| 前台生成工作台 | `http://localhost:5174` |
| Swagger UI | `http://localhost:8080/swagger-ui/index.html` | | Swagger UI | `http://localhost:8080/swagger-ui/index.html` |
| Druid 控制台 | `http://localhost:8080/druid`,默认 `ruoyi / 123456` | | Druid 控制台 | `http://localhost:8080/druid`,默认 `ruoyi / 123456` |
@@ -223,8 +263,9 @@ ruoyi-ui/dist
- 后端扩展 Controller 主要位于 `ruoyi-generator/src/main/java/com/ruoyi/generator/controller` - 后端扩展 Controller 主要位于 `ruoyi-generator/src/main/java/com/ruoyi/generator/controller`
- 后端扩展实体、Mapper、Service 位于 `ruoyi-generator/src/main/java/com/ruoyi/generator/{domain,mapper,service}` - 后端扩展实体、Mapper、Service 位于 `ruoyi-generator/src/main/java/com/ruoyi/generator/{domain,mapper,service}`
- MyBatis XML 位于 `ruoyi-generator/src/main/resources/mapper/generator` - MyBatis XML 位于 `ruoyi-generator/src/main/resources/mapper/generator`
- 前端接口封装位于 `ruoyi-ui/src/api/generator` - 后台前端接口封装位于 `ruoyi-ui/src/api/generator`
- 前端扩展页面位于 `ruoyi-ui/src/views/generator` - 后台前端扩展页面位于 `ruoyi-ui/src/views/generator`
- 前台工作台接口封装位于 `easycode-web/src/api`,页面位于 `easycode-web/src/views`
- 权限标识沿用若依格式,例如 `generator:project:list``generator:template:add``tool:gen:preview` - 权限标识沿用若依格式,例如 `generator:project:list``generator:template:add``tool:gen:preview`
- 代码生成模板分为若依默认模板 `ruoyi-generator/src/main/resources/vm` 与扩展模板目录 `ruoyi-generator/src/main/resources/qing` - 代码生成模板分为若依默认模板 `ruoyi-generator/src/main/resources/vm` 与扩展模板目录 `ruoyi-generator/src/main/resources/qing`
@@ -233,6 +274,7 @@ ruoyi-ui/dist
- `doc/code-generator-platform.md`:代码生成平台功能规划。 - `doc/code-generator-platform.md`:代码生成平台功能规划。
- `docs/*.md`:扩展 Controller 的接口说明。 - `docs/*.md`:扩展 Controller 的接口说明。
- `ruoyi-ui/README.md`:前端工程原始启动说明。 - `ruoyi-ui/README.md`:前端工程原始启动说明。
- `easycode-web/README.md`:前台生成工作台启动说明。
- 若依官方文档:`http://doc.ruoyi.vip` - 若依官方文档:`http://doc.ruoyi.vip`
## 排查提示 ## 排查提示

View File

@@ -0,0 +1,34 @@
# EasyCode Web
独立前台生成工作台面向前台用户完成项目草稿创建、AI 数据库设计、表结构编辑、项目结构预览和代码预览。
## Start
```powershell
npm install
npm run dev
```
Default URL: `http://localhost:5174`
## Backend
Set `VITE_API_BASE_URL` in `.env.development`.
The dev server proxies `/front/**` to the backend. The backend default URL is `http://localhost:8080`.
## Flow
1. Register or login front user.
2. Enter project name and description.
3. Generate MySQL database design through backend DeepSeek service.
4. Edit tables and fields.
5. Preview backend, frontend, and admin frontend project files.
## Build
```powershell
npm run build
```
Node.js `>=20` is required by the Vite toolchain.