这是本节的多页打印视图。 点击此处打印.

返回本页常规视图.

示例应用

通过示例学习如何使用SmartIDE

1 - Boathouse 计算器

Boathouse计算器 是使用 node.js 实现的一个非常简单的Web应用，但是麻雀虽小五脏俱全，Boathouse计算器中使用了Rest API实现了基本的加减乘除计算，并通过api调用与前端交互，在非常小的代码量情况下展示了一个典型的现代应用的基本架构。

整体说明

本demo示例提供两个场景，开发人员通过本地运行SmartIDE可以使用webide和使用本地开发工具链接SmartIDE生成的开发容器进行代码调试，全程无需再安装调试所需环境。 SmartIDE将通过隧道技术以及动态端口映射机制提供开发人员与本地开发调试一样的开发体验。

  • SmartIDE本地运行，使用WebIDE方式调试
  • 使用本地VScode链接SmartIDE开发容器调试

场景1.SmartIDE本地运行，使用WebIDE方式调试

  1. clone代码库
git clone https://github.com/idcf-boat-house/boathouse-calculator.git
cd boathouse-calculator
  1. 快速创建并启动SmartIDE开发环境
smartide start

在打开的WebIDE 中打开 terminal，并启动项目

npm install 
npm start

可以看到应用已在容器3001端口启动，这时通过隧道转发机制，我们可以直接通过 http://localhost:3001/ 打开应用

3.添加断点调试程序

在终端中，使用‘Ctrl+z’终止进程

添加断点 /api/controllers/arithmeticController.js 的line47

输入 F5 启动调试，打开 http://localhost:3001/ 即可通过使用计算器进入调试步骤

场景2.使用本地VScode链接SmartIDE开发容器调试

1.VScode安装插件 Remote Development

2.新建SSH连接并保存到配置文件

3.打开SSH连接，中间需要多次输入密码

4.打开远程容器目录

5.npm i安装依赖包，运行和调试

2 - 若依(RuoYi)项目

若依项目在码云（Gitee.com）最有价值开源项目的WEB应用开发类中排名第二，有28K星，在国内WEB应用开发框架类开源项目非常受开发者欢迎。若依项目采用业界流行的 Vue + Java Springboot 开发框架。提供基于SpringBoot的权限管理系统，易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用。

使用SmartIDE开发调试若依项目(前端分离版)

SmartIDE是下一代的云原生IDE，可以帮助你一键启动项目的集成开发环境，直接进入编码调试，免除安装SDK、IDE和其他相关工具的麻烦。

我们已经对Ruoyi-Vue进行了SmartIDE适配，可以一键启动包含以下工具的 标准化全栈开发环境(SFDE - Standard Fullstack Development Environment)：

  • 完整支持Vue的Node.js开发工具语言包（SDK）
  • 完整支持Java语言Spring框架的开发工具语言包（SDK）
  • 用户可以选择2种WebIDE来加载项目进行前后端联调，VSCode WebIDE，JetBrains IDE 社区版 WebIDE
  • 配置好的中间件，包括：MySQL和Redis服务器环境
  • 数据管理工具PHPMyAdmin用于管理MySQL数据库

下面将对如何使用SmartIDE进行RuoYi项目的前后端联调进行描述：

1. 完整操作视频

为了便于大家更直观的了解使用SmartIDE开发调试RuoYi的过程，我们在B站提上提供了视频供大家参考，视频如下：

跳转到B站： https://www.bilibili.com/video/av851717139

2. 本地模式启动项目

使用SmartIDE启动RuoYi的开发调试非常简单，仅需要两个步骤

  1. 按照 安装手册 完成 SmartIDE 本地命令行工具的安装
  2. 使用以下命令一键启动SFDE
## SmartIDE是一款跨平台开发工具，您可以在Windows或者MacOS上执行同样的指令
smartide start https://gitee.com/SmartIDE/RuoYi-Vue.git

注意：第一次启动因为下载容器镜像，需要较长时间，大概需要十分钟。SmartIDE所使用的容器镜像全部托管于阿里云在国内的镜像仓库上，因此一般不会出现无法拉取镜像的情况。如果你的网络过于不稳定，多尝试几次即可。

以上命令会在当前目录自动完成代码克隆，拉取开发环境镜像，启动容器，自动开启WebIDE的动作。

以上动作完成后，即可看到类似如下的WebIDE窗口，默认情况下将使用JetBrains Projector模式的 IntelliJ IDEA 社区版

WebIDE的地址是 https://localhost:6800

JetBrains Projector是一款基于JetBrains产品的WebIDE，提供通过浏览器操作并与桌面IDE保持一致的操作体验，第一次打开 JetBrains Projector 的时候需要进行简单的初始化操作如下：

在 Welcome to IntelliJ IDEA 页面中，点击 Open 然后选择 /home/project 目录，然后点击 OK

在以下对话框中选择 Trust Project

加载完毕的Web版IntelliJ IDEA如下

3. 远程主机模式启动项目

远程主机模式允许你将SmartIDE的开发环境一键部署到一台安装了Docker环境的远程主机上，并远程连接到这台主机进行开发，对于比较复杂的项目来说这样做可以让你扩展本地开发机的能力，实现云端开发体验。

使用远程模式也仅需要两个步骤

注意：远程主机模式下你不必在本地安装Docker环境，只需要安装好SmartIDE的命令行工具即可

  1. 按照 Docker & Docker-Compose 安装手册 (Linux服务器) 准备好一台远程主机，建议使用Ubuntu 18.04 LTS以上版本的Linux环境。
  2. 按照以下指令启动项目
# 将远程主机添加到SmartIDE中
smartide host add <IpAddress> --username <SSH-UserName> --password <SSH-Password> --port <SSH-Port默认为22>

# 获取主机ID
smartide host list

# 使用远程主机启动项目
smartide start --host <主机ID> https://gitee.com/SmartIDE/RuoYi-Vue.git

4. 启动前后端开发调试

使用SmartIDE启动环境后，我们即可启动前后端联调操作，为了避免SmartIDE的配置影响RuoYi的默认配置，我们扩展了application.yml中的配置，为SmartIDE提供了单独的日志、MySQL和Redis配置。

  1. 切换spring配置使用SmartIDE环境

如果要使用SmartIDE进行联调，请先打开 /ruoyi-admin/src/main/resources/application.yml，将 spring.profiles.active 的值设置为 smartide

# Spring配置
spring:
  profiles:
    active: smartide
  1. 创建ry-vue数据库

说明：使用SmartIDE运行开发环境的一个好处就是一键启动所有相关环境，我们已经在你的环境中内置了专门用于RuoYi项目开发的MySQL数据库，并且为了方便你的操作，也提供了PhpMyAdmin这个工具方便你进行数据管理操作。

打开SmartIDE内置的PHPMyAdmin工具，地址是：http://localhost:8090

  • 服务器：ruoyi-db
  • 用户名：root
  • 密码：password

点击 新建 并输入 ry-vue 作为数据库名称，点击 创建 按钮

然后在这个数据库中依次执行以下两个脚本：

  • sql/ry_20210908.sql
  • sql/quartz.sql

执行完毕之后的状态如下：

  1. 编译并安装所有RuoYi后端组件，并启动后端调试

然后，我们需要打开IDEA内置的terminal，并执行以下指令以确保RuoYi所有模块都已经编译并放入共享组件库中

## 请在RuoYi项目根目录执行
mvn package
mvn install

点击 File | Project Structure 设置当前项目的JDK版本，环境中已经内置了OpenJDK-11这个版本，如果希望使用其他JDK版本也可以选择 Add JDK 自行下载。

右键点击 ruoyi-admin/src/main/java/com.ruoyi/RuoYiApplication.java 文件，并启动 Debug 模式

注意 Console 中出现 若依启动成功 的字样，表示后端应用启动成功。

  1. 编译并启动前端项目

现在我们可以进入 ruoyi-ui 项目，启动前端项目

后端启动后，我们可以通过命令启动前端，使用内置的 terminal 运行以下命令以便进入 ruoyi-ui 项目并启动前端服务

cd ruoyi-ui
npm install
npm run dev

执行完毕后，检查 terminal 中出现了 App running at 的字样就表示前端项目启动成功了

注意：我们的环境运行在容器中，我们将容器内的80端口映射到了你本地的8000端口。

现在打开 http://localhost:8000 即可访问若依项目了

  1. 设置断点，进入交互式单步调试状态

如果你按照刚才的操作方式用 Debug 模式启动了后端项目，那么现在可以在任何位置创建断点，并进入断点调试模式

比如，你可以在 /ruoyi-admin/src/main/java/com.ruoyi/web/controllers/system/SysUserController.java 的 第59行 设置断点，然后进入 若依管理系统 ｜ 系统管理 ｜ 用户管理 菜单，即可触发此断点，注意下图中的IDEA已经中断在代码行59.

其他调试相关的入口如下：

  • 容器内项目目录 /home/project
  • WebIDE入口 http://localhost:6800
  • 数据库管理PHPMyAdmin http://localhost:8090
  • 前端应用入口 http://localhost:8000

注意：如果你本地的以上端口有被占用的情况，SmartIDE会自动在当前端口上增加100，具体转发情况请参考SmartIDE命令的日志输出。

5. 停止和恢复环境

如果需要停止和恢复环境，可以使用SmartIDE的状态管理指令如下

## 获取已经创建好的开发环境列表
smartide list
## 停止一个开发环境
smartide stop <ID>
## 启动一个开发环境
smartide start <ID>
## 清理一个开发环境
## 参数说明：-f 强制删除 -y 跳过确认 -p 删除磁盘上的代码库 -i 删除容器镜像
smartide remove <ID> -fypi

6. 相关链接

7. 技术支持

特别说明: SmartIDE本身是开源产品，并且对独立开发者提供免费使用授权。

大家可以通过以下链接获取SmartIDE的技术支持

  • 产品官网 https://SmartIDE.cn

    • 通过产品官网上的二维码可以加入 [Smart早鸟群] 与其他的 Smart Developer 一起交流

  • 开源首页：SmartIDE采用GitHub和Gitee双通道开源模式（自动同步代码），方便国内开发者访问

    大家自选以上任意渠道提交Issue，产品组的小伙伴会及时给予反馈。

    如果大家喜欢我们的产品，请给予 Star 支持

  • B站频道：我们定期组织直播，为大家更新产品开发进展

    如果大家喜欢我们的产品和视频，一定要记得 “三连”

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。

3 - Gin-Vue-Admin

基于vite+vue3+gin搭建的开发基础平台（已完成setup语法糖版本），集成jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能，五分钟一套CURD前后端代码。

使用SmartIDE开发和调试Gin-Vuew-Admin

SmartIDE是下一代的云原生IDE，可以帮助你一键启动项目的集成开发环境，直接进入编码调试，免除安装SDK，IDE和其他相关工具的麻烦。

我们已经对Gin-Vue-Admin进行了SmartIDE适配，可以一键启动包含以下工具的 标准化全栈开发环境(SFDE - Standard Fullstack Development Environment)：

  • 完整支持Vue的Node.js开发工具语言包（SDK）
  • 完整支持Go语言Gin框架的开发工具语言包（SDK）
  • 前端开发工具VSCode WebIDE
  • 后端开发工具JetBrain GoLand WebIDE
  • 数据管理工具PHPMyAdmin用于管理Gva后台的MySQL数据库

本文档对如何使用SmartIDE进行Gin-Vue-Admin项目的前后端联调进行描述。

1. 完整操作视频

为了便于大家更直观的了解使用SmartIDE开发调试Gin-Vue-Admin的过程，我们在B站提上提供了视频供大家参考，视频如下：

跳转到B站：https://www.bilibili.com/video/BV1eL4y1b7ep

2. 本地模式启动项目

使用SmartIDE启动Gin-Vue-Admin的开发调试非常简单，仅需要两个步骤

  1. 按照 安装手册 完成 SmartIDE 本地命令行工具的安装
  2. 使用以下命令一键启动SFDE
## SmartIDE是一款跨平台开发工具，您可以在Windows或者MacOS上执行同样的指令
smartide start https://gitee.com/smartide/gin-vue-admin.git

注，也可使用GVA项目SmartIDE适配所对应的GitHub代码仓库：https://github.com/SmartIDE/gin-vue-admin.git

以上命令会在当前目录自动完成代码克隆，拉取开发环境镜像，启动容器，自动开启VSCode WebIDE以及自动恢复vue前端项目的npm依赖包，启动前端项目等一系列动作。

以上动作完成后，即可看到类似如下的VSCode WebIDE窗口。

VSCode WebIDE的地址是 https://localhost:6800

我们的环境中还内置了JetBrain GoLand WebIDE

JetBrain WebIDE的地址是 https://localhost:8887

注意：如果你本地的以上端口有被占用的情况，SmartIDE会自动在当前端口上增加100，具体转发情况请参考SmartIDE命令的日志输出。

3. 远程主机模式启动项目

上文第1部分中B站操作视频中使用的是远程主机模式，远程主机模式允许你将SmartIDE的开发环境一键部署到一台安装了Docker环境的远程主机上，并使用WebIDE远程连接到这台主机进行开发，对于比较复杂的项目来说这样做可以让你扩展本地开发机的能力，实现云端开发体验。

使用远程模式也仅需要两个步骤

注意：远程主机模式下你不必在本地安装Docker环境，只需要安装好SmartIDE的命令行工具即可

  1. 按照 Docker & Docker-Compose 安装手册 (Linux服务器) 准备好一台远程主机
  2. 按照以下指令启动项目
# 将远程主机添加到SmartIDE中
smartide host add <IpAddress> --username <SSH-UserName> --password <SSH-Password> --port <SSH-Port默认为22>

# 获取主机ID
smartide host list

# 使用远程主机启动项目
smartide start --host <主机ID> https://gitee.com/smartide/gin-vue-admin.git

4. 前后端联调

使用SmartIDE启动环境后，前端应用已经自动启动；此时只需要启动后端调试模式即可开始调试Gin-Vue-Admin。进入联调模式的环境状态如下

调试相关的入口如下：

  • 容器内项目目录 /home/project
  • VSCode WebIDE http://localhost:6800
  • 前端应用 http://localhost:8080
  • JetBrain GoLand WebIDE http://localhost:8887
  • 后端应用(Swagger-UI) http://localhost:8888/swagger/index.html
  • 数据库管理PHPMyAdmin http://localhost:8090

注意：如果你本地的以上端口有被占用的情况，SmartIDE会自动在当前端口上增加100，具体转发情况请参考SmartIDE命令的日志输出。

5. 相关链接

6. 技术支持

特别说明: SmartIDE本身是开源产品，并且对独立开发者提供免费使用授权。

大家可以通过以下链接获取SmartIDE的技术支持

  • 产品官网 https://SmartIDE.cn

    • 通过产品官网上的二维码可以加入 [Smart早鸟群] 与其他的 Smart Developer 一起交流

  • 开源首页：SmartIDE采用GitHub和Gitee双通道开源模式（自动同步代码），方便国内开发者访问

    大家自选以上任意渠道提交Issue，产品组的小伙伴会及时给予反馈。

    如果大家喜欢我们的产品，请给予 Star 支持

  • B站频道：我们定期组织直播，为大家更新产品开发进展

    如果大家喜欢我们的产品和视频，一定要记得 “三连”

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。