🚀 VJSP 首次使用向导

欢迎使用 VJSP AI Studio —— 一款面向企业级应用开发的人工智能编程软件。
本文将引导你 5 分钟内完成从插件安装到→ 项目配置 → 代码生成 → 可视化微调 的完整流程。

⚠️ 请先确认你的电脑满足以下要求

• IDE（任选其一）：
  • IntelliJ IDEA 2024.1 或更高版本
  • VS Code 1.82 或更高版本
• 开发环境：
  • JDK 8–17（下载地址）
  • Maven 3.6.3+（下载地址）
  • PostgreSQL 数据库（下载地址）
  • Redis（安装指南）
  • Node.js 20 或者 Node.js 22（下载地址）

💡 重要前提
首次生成代码前，请务必 引用官方标准智能体（如 “VJSP-Visio框架开发智能体”），以确保输出符合框架规范，并支持后续的 表单/数据库/工作流可视化编辑与运行。

第一步：安装插件

在你常用的 IDE 中一键安装 VJSP：

操作步骤

1. 打开你的 IDE（IntelliJ IDEA 或 VS Code）。

2. 访问 VJSP下载页 下载最新版插件。

3. 安装插件（IDEA：Settings → Plugins → Install from Disk；VS Code：拖入 .vsix 文件）。

4. 安装完成后，重启 IDE。

🔗 详细图文指南：

• IntelliJ IDEA 安装教程

• VS Code 安装教程

✅ 插件无需额外配置，安装即用。

第二步：登录 VJSP 账号

⚠️ 在 VJSP 注册账号后，必须通过实名认证审核成功后，方可登录并使用插件功能。

1. 重启 IDE 后，点击侧边栏插件图标，VJSP 插件会自动弹出登录窗口。

2. 点击 “登录”，跳转至登录页面（支持手机号注册）

3. 登录成功后，系统会自动保存 API 密钥，你无需手动输入。

🔗 详细指引：

• IDEA登录流程

• VS Code登录流程

第三步：了解三种交互模式

VJSP 提供三种模式，适应不同任务：

模式	触发方式	典型用途
Chat（聊天模式）	在侧边栏直接输入自然语言	快速问答、代码解释、生成小段逻辑或示例
Plan（规划模式）	在模式选择器中切换为 Plan	将复杂需求拆解为可执行步骤（如“实现用户登录功能” → 分析 → 设计 → 编码）
Agent（智能体模式）	在模式选择器中切换为 Agent，并选择具体智能体	执行专业化任务，如生成完整模块、创建数据库表、编排工作流等

✅ 新手建议：

• 先用 Chat 探索功能
• 正式生成代码时，一定要用 Agent 模式 + 官方智能体
• 复杂任务可先用 Plan 拆解，再交由 Agent 执行

第四步：创建并配置项目

⚠️ 这是最关键的一步！可视化功能依赖正确配置。

4.1 下载基础框架源代码

1. 访问VJSP Code Hub

2. 根据技术栈选择下载模板（含规范目录结构与数据库初始化脚本）

• 下载 VJSP 框架源代码

• 下载 VUE3+Spring Boot 框架源代码

3. 解压到本地任意文件夹（如 D:\projects\my-vjsp-project\）

4. 在项目根目录下，找到数据库初始化脚本 *.sql，并执行该脚本初始化数据库。

5. 在 VS Code 或 IDEA 中，通过 文件 → 打开文件夹，选择下载的项目作为工作区。

4.2 在 IDE 中打开项目

• IDEA：File → Open → 选择解压后的文件夹

• VS Code：File → Open Folder → 选择文件夹

✅ 打开后，你会看到 pom.xml、src 等文件，说明项目加载成功。

4.3 配置文件vjspai-link设置

1. 首次打开项目后，等待 10 秒，VJSP 会在项目根目录自动生成 vjspai-link.yml。

2. 用文本编辑器打开该文件，修改配置：

vjspai:
  # 数据源配置
  datasource:
    # 数据库驱动：PostgreSQL
    driverClassName: org.postgresql.Driver
    # 数据库连接地址, 请根据实际情况修改
    url: jdbc:postgresql://127.0.0.1:5432/vjsp_form
    # 数据库用户名， 请根据实际情况修改
    username: your_user
    # 数据库密码， 请根据实际情况修改
    password: ${DB_PASSWORD}

• 保存文件后，关闭并重新打开 IDE（确保新配置生效）。

• 再次打开项目，耐心等待 10–30 秒，直到插件状态栏显示 “✅ ready”。

❗ 如果跳过等待直接操作，可视化功能会显示空白！

🔗 完整配置说明VJSPAI-LINK 配置指南

4.4 配置智能体（必须做！）

• 打开浏览器，访问 Agent Hub

• 搜索并立即使用

  • VJSP Boot框架项目 → “VJSP-Visio框架开发智能体”

  • VJSP Vue3前端项目 → VJSP-VUE-前端智能体

  • SpringBoot 2.7 + Vue3前后端分离项目 → VJSP-VUE 框架全栈智能体,VJSP-VUE-后端智能体

• 回到 IDE，在聊天窗口顶部的 智能体下拉菜单 中：

  • 点击 🔄 刷新按钮

  • 选择刚启用的 智能体

✅ 此时你已准备好生成符合规范的代码！

4.5 用 AI 生成代码

1. 确保当前模式为 Agent

2. 在聊天框输入自然语言需求，例如：

创建一个用户管理模块，包含增删改查和分页查询

3. 点击发送，AI 将自动：

   • 分析需求（ 需你回复“是”确认）

   • 生成建表 SQL

   • 规划代码目录结构

   • 生成 Service / Controller /HTML页面 代码

   • 自动绑定数据库表

✅ 生成完成后，你会看到代码文件出现在项目中。

4.6 使用可视化功能微调（所见即所得！）

▶ 数据库表管理

• 点击聊天窗口右上角 数据库图标

• 图形化查看/修改表结构，支持新增字段、索引等

▶ 表单可视化编辑

• 在 /src/main/resources/static/vjsphtml/ 下，找到 .html 或 .xml表单文件

• 右键选择 “VJSP 编辑模式”。

• 系统将打开可视化表单设计器，你可以：

  • 拖拽字段组件到画布

  • 调整布局、分组与样式

  • 设置字段为必填、只读、校验规则等

• 所有修改会实时预览，确认后点击 “保存”，系统将自动将配置反写回原文件，无需手动编写或修改代码。

💡 提示：仅 官方智能体生成的 VJSP 标准表单文件 支持此功能

▶ 工作流编辑

• 点击 工作流图标，查看项目已有的工作流

• 可修改工作流，新建工作流，拖拽节点配置审批人、条件分支等

✨ 所有修改会自动同步回代码，真正实现 “图形设计 = 代码生成”

第五步：运行项目并查看效果

情况一：前端项目启动

• 在项目根目录打开终端，执行：

#安装依赖
npm install

#启动开发服务器
npm run dev

#构建版本
npm run build

🔗 详细指引： VJSP-VUE项目启动指南

情况二：VJSP-Boot项目启动

在项目根目录打开终端，执行：

# 清理旧构建产物
mvn clean

# 编译并安装依赖到本地仓库
mvn install

# 启动 Spring Boot 应用
mvn spring-boot:run

🔗 详细指引： VJSP-Boot项目启动指南

JDK 和Maven都已经安装完成并配置好环境变量。

vjspai-link.yml 中已配置数据库等必要服务地址

访问应用

1. 打开浏览器，访问：http://localhost:8080

2. 默认账号：admin / 888

3. 进入系统，查看 “用户管理” 模块是否正常显示

✅ 如果能看到你刚生成的功能，恭喜！你已成功完成全流程！

📌 下一步建议

• 自定义智能体、提示词或规则？→ 访问 AI 资源中心。

• 遇到问题？→ 查看 常见问题

🎉 恭喜！你已成功迈出 VJSP 智能开发的第一步。