快速开始
一、前置条件
假设您已经通过 基础概念了解过TitanIDE,接下来通过学习本章节《快速开始》,您将可以快速上手使用TitanIDE。
为了更形象的说明,下面使用了一个非常有代表性的 SpringBoot + Vue 后台管理系统 RuoYi Vue 来做演示。
二、创建项目
1. 选择开发空间
通过下拉列表可以进行开发空间切换(如果您还未曾有开发空间,请完成前置条件部分操作或请联系管理员授权)
2. 创建项目
在项目栏中点击"创建项目"后根据不同的编码环境,选择对应的模板,完成创建项目。 例:RuoYi Vue 项目可以使用 IDEA Community 模板,这里只需要输入一个项目名称就可以创建一个 TitanIDE 项目。
注:项目创建好之后,在项目栏便可以直接打开,第一次创建需要等待十几秒钟,然后您就拥有了一个开箱即用的开发环境。(如下图所示)三、应用开发
1. 代码导入
首次进入项目后会进行一个条约签署,授权后便可以开始使用了~ 为了方便开发者快速使用,在首次进入 TitanIDE 项目便会弹出一个"代码克隆"文本框,可以直接输入URL完成代码导入;本系统支持两种导入方式,分别为本地上传和克隆导入,下面为大家详细讲解:
1.1本地代码上传导入
将本地电脑文件夹压缩成 zip 格式文件后拖拽上传到 TitanIDE 的 workspace,然后在 workspace 通过命令行 unzip 解压出来。欲了解更多文件上传的详情,请查看 代码上传 章节
如果需要执行命令行工具,则执行以下菜单打开命令行终端
1.2 GitLab 克隆导入
TitanIDE 提供了两种代码管理工具,命令行和图像界面。 第一种是命令行工具,它运行在终端,在终端需要输入 git 命令与仓库地址来克隆代码。 第二种代码管理方式是图形界面,点击右侧工具栏的克隆,弹出代码克隆文本框,输入仓库地址,克隆代码到项目。2. 初始化
完成代码克隆后,在 TitanIDE 打开 Java应用入口文件(如 RuoYiApplication.java)将触发代码编译构建。 首次使用会在窗口的右下角弹出提示框显示:Maven build,我们选择Load Maven Project就好了; 打开Java应用入口文件便会触发代码依赖的加载动作,也就是从远程制品仓库去拉取它的依赖包下来; 第一次使用根据代码依赖数量的多少需要等待几十秒到几分钟不等;3. 编译
当这个项目依赖加载完之后,这个代码文件里面就会出现下面的按钮,便可以运行或调试Java程序。
4. 配置数据库
代码编译好之后,我们就可以进行配置数据库,先创建项目→进行数据库连接→创建数据库→数据脚本导入→数据导入;4.1 创建项目 DBeaver
初始化数据导入数据库时,如果您未曾部署数据库中间件服务,请先部署数据库中间件服务,通过TitanIDE集成的数据库客户端导入初始数据; 第一步我们先进行项目创建,"RuoYi Vue"的初始数据是放置在项目路径的 sql 文件夹下面,直接在IDE内部导入数据,可以使用模板dbeaver新建项目,操作数据库。4.2 创建数据库连接
打开 DBeaver 之后,我们来创建一个数据库连接,DBeaver 支持众多的数据库,这里我们以 MySQL 为例新建一个链接。在创建新的数据库连接时,以下标红色部分需要注意: 1.服务器地址填写 ‘mysql’是因为 MySQL部署在 DBeaver 同一个开发空间,在右下角的服务列表可以查看服务名称和端口号; 2.认证填写连接数据库的用户名和密码; 3.在 Advanced 区域,有个本地客户端,需要指定本地客户端所在的目录;(配置客户端是因为导入数据的时候需要用到)TitanIDE 在 /usr/bin 项目默认安装了 ‘mysql’的命令行客户端,如果是其他没有的本地客户端,仍然可以通过右侧栏的文件上传工具上传到 DBeaver 的工作区,然后在本地客户端下拉’浏览’找到您上传的客户端。
本地客户端下拉选择’浏览’后会跳转到以下页面:首先需要添加数据库地址;
TitanIDE 在 “/usr/bin"文件夹下面内置了 “mysql"客户端,因此选择 “/usr/bin"后点击 【open】按钮
`随后再选择”/usr/bin"后点击【确定】按钮,完成数据库链接;
4.3新建数据库
创建好数据库连接之后就可以进行日常的数据库操作啦,故事讲到这里,第一配角"RuoYi"正式登场,以"RuoYi"项目开发为例,来创建一个数据库 “ry”, 点击右键->新建数据库
在输入框输入数据库名称后点击【确定】按钮4.4数据脚本导入
完成数据库创建后,进行数据导入:主要有三种方式;
1.Git克隆直接导入 如果您的SQL脚本已经在代码仓库,那么您可以通过 Git 直接克隆到 DBeaver 的工作区,这里我导入的是 “RuoYi"数据库,因此克隆"RuoYi"项目;
2.通过 TitanIDE 共享文件导入 如果您是在 TitanIDE 上已经克隆了代码到同一个开发空间的其它项目,则可以通过一个 space.share 的文件来共享SQL脚本;
3.本地上传导入 如果您的SQL脚本是在本地电脑,可以直接在右侧栏文件上传工具直接上传文件到工作区;
4.4 数据导入
在完成以上操作之后,我们就可以在 DBeaver 正式导入(恢复)数据到数据库啦,点击数据库"ry”,按右键菜单 -> 工具 -> 恢复数据库
通过输入文件右侧图标打开文件选择框,选择好您要导入的数据SQL脚本,如 '/home/ide/workspace/space.share/sql/quartz.sql'然后点击【开始】按钮; 在弹出提示框中选择【确定】 注:新建数据库并不会导致数据库损坏; 以上我们就完成了配置数据库的所有工作了;除了初始化数据导入,在后续的调试过程中,所有的数据库查询都可以通过数据库的项目来实现。数据库和服务端运行在同一个网络平面,免去了网络策略的申请,也让数据安全得到保障。5. 编码
在 TitanIDE 进行编码,由于使用了 IDEA 内核,操作都是用户熟悉的,对于本身就是 IDEA 的用户来说,学习成本很低。程序员用户所关注的代码的补全在云端也可以享受到,比如输入关键字后弹出推荐代码供开发人员选择。6. 运行
数据导入之后就可以运行调试,程序运行起来之后,在当前激活窗口可以查看应用监听的端口,本示例监听的是 8080 端口,7. 服务访问
程序启动之后,TitanIDE 自动创建好了端口映射的访问链接,通过查看域名并复制域名配置到需要访问的客户端hosts文件后,即可直接点击链接访问,或者复制这个链接,通过接口测试客户端发送请求。8. 前后端联调
接下来运行前端的调试,RuoYi 的前端需要使用到后端 8080 端口对应的 URL 以调用后端接口,RuoYi 是通过一个环境变量来配置的,配置好后端接口调用方式后,就可以启动前端代码进行调试了。 通过运行命令 npm install 和 npm run dev,稍等片刻,好了,已经编译完,然后运行起来了,并监听了 8081 端口。如果前端编译、运行成功, 请直接跳过这段内容。
紧接着访问前端页面,查看用户管理,假如说在 Controller,system,user,添加用户处设置断点,来做问题排查,先到用户管理页面去新增用户,确定,然后回来代码看下代码的运行情况。 您将看到这个断点停在期望的位置,此时查看断点处的数据,有变量值,调用堆栈。 下一步进行单步调试。再新增一个同名的用户,程序运行到账号已经存在的代码逻辑上停下来。实际上这个账号是已经添加了的,此时再到TitanIDE内置的数据库客户端查看数据库user 表,将会看到新增的数据。 除了刚才看到的单步调试之外,还有一个很重要的一个调试手段,就是通过查看浏览器开发者工具的网络请求。 假如刷新用户列表,可以看一下获取用户列表接口,它是一个 GET 请求,如果前端还没有就绪的情况之下,您希望后端去测试这个接口,那 TitanIDE 提供了一个接口测试的工具,使用postman模板新建项目,进入接口调试。如果您在运行 npm 或者 npm 编译前端遇到依赖包下载不了的情况,请联系管理员排查。