【产品新体验】CSDN. 云IDE体验与功能使用教程(保姆级教程)

云IDE产品介绍
云IDE使用教程
免费使用地址:点击【云IDE】,即可开始创建工作空间啦~

CSDN最新产品【云IDE】来啦!【云IDE】将为各位技术er一键秒级构建云开发环境,提升开发效率!为持续提升产品体验,现CSDN特开展产品评测有奖话题征文活动,诚邀各位技术er免费试用【云IDE】,撰写使用体验,参与即可获得【话题达人】勋章+CSDN电子书月卡(站内千本电子书免费看),更有机会获得CSDN官方会员卡+周边大奖!

前言

在云IDE产生之前有许多一些比较难解决的问题,例如:因为疫情原因封在家,而对于自己常用的IDE开发环境是在公司的电脑上,那么此时就需要需要自己在本地手动配置一个适合自己开发的IDE开发环境;又刚好手头需要进行开发某个功能或者修改某个bug,此时只有一台能够联网的电脑,就会有需要手动搭建开发环境的繁琐问题。

对于上述描述的部分问题来说,云IDE简直就是我们的福音,只要你的电脑能够连上网,登录上云IDE,那么就会直接使用之前配置好的IDE环境,无需再进行准备,即开即用。

在CSDN的云IDE推出之前也有一些云IDE,如腾讯的云端IDE等,这里我来介绍一下CSDN的云IDE产品的功能特点,其预置了Python,Java、Node.js等环境,并配有ALL IN ONE的配置选项,勾选即可默认使用。能够支持实时预览,支持一键进行导入、拉取开源平台的仓库,能够快速进行功能开发,并且所有写的代码能够实时保存到云端,提高了开发效率。

现在就跟着我来看看CSDN云IDE的基本使用吧。

一、认识云IDE

1.1、CSDN.开发云

点击 CSDN-开发云链接 即可进入CSDN的开发云网站,初始额度有10000核/时:

image-20221026151751416

1.2、秘钥管理

点击开发云主界面中的秘钥管理,即可进入到秘钥页面,添加好秘钥之后我们即可使用云IDE来进行推拉代码:

image-20221026151946741

添加步骤

步骤一:点击生成SSH秘钥

image-20221026152048621

步骤二:进入到Gitee账号,添加ssh秘钥

image-20221026152210647

添加成功后如下,就可以看到SSH公钥,并且你的邮箱也会收到添加公钥链接:

image-20221026152441963

添加完成之后,我们之后开发可直接在云端进行,提交代码与拉取代码都可以在云端操作!


二、实战-使用云IDE

2.1、初步实战springboot-demo(clone默认模板代码)

2.1.1、新建工作空间

image-20221026152626346

填写你的空间名称、代码来源(①拉取项目:填写仓库地址。②空:创建一个空项目。③默认模板代码:springboot.demo),接着点击确定创建即可:

image-20221026152738887

这里我们来选择一个默认模板代码来创建:

image-20221026152917320

2.1.2、启动springboot-demo项目

点击启动按钮,就会跳转到云IDE界面,并且自动执行命令并启动springboot-demo项目:

image-20221026160259664

  • 第一个栏目就是内置的一个浏览器。

其启动的命令是:

cd /ide/workspace/springboot-demo && set port=8080 && export PORT=8080 && mvn spring-boot:run

我们也可以自由的在云IDE里进行代码编辑以及安装一些vscode插件,就跟本地使用IDE一样,下面的插件就是目前云IDE自带安装的:

image-20221026154917153

2.1.3、编写一个helloworld接口

image-20221026155903363

@GetMapping("/hello")
@ResponseBody
public String hello() {
    return "hello world!";
}

接着我们底部窗口输入ctrl+c来进行停止项目:

image-20221026155936059

重新启动有两种方式如下:

# 指定端口启动
# mvn compile 
cd /ide/workspace/springboot-demo && set port=8080 && export PORT=8080 && mvn spring-boot:run

在相应的网址后面加上/hello即可访问我们刚刚编写的接口了:

image-20221026160346397

ps:该网址外网也可以直接访问,这样我们平时自己开发的时候想要给其他人展示就无需使用一些内网穿透之类的,效果还是很不错滴。


2.2、运行前端工程项目

2.2.1、初步尝试—实现helloworld

步骤一:新建工程空间

image-20221027183608193

  • 空间名称:随意设置,我们这里设置为test-html。
  • 预制环境:All In One(这里需要node、npm,所以勾选),
  • 代码来源:空

点击确定创建即可创建一个空的工程文件。

步骤二:启动我们刚刚创建的工作空间

image-20221027183944386

此时我们进入到工作空间,由于我们之前勾选的代码来源是空的,所以这里是空文件夹,我们右击左边的管理器来打开终端窗口:

image-20221027184150916

步骤三:初始化并启动server服务

①初始化package.json文件:

# 不停回车即可,若是需要自定义的话输入相应的内容回车
npm init

编辑package.json文件添加live-server的依赖:

image-20221027184514316

{
  "name": "workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "live-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "live-server": "^1.2.2"
  },
  "author": "",
  "license": "ISC"
}

②安装live-server依赖

在命令行窗口中进行安装

# 设置一下npm的淘宝镜像下载源
npm config set registry https://registry.npm.taobao.org

# 安装我们package.json中添加的依赖
npm install

安装成功的效果如下:

image-20221027184825369

③添加index.html页面

image-20221027184944963

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world!
</body>
</html>

④执行npm命令启动服务

npm run dev

image-20221027185139018

至此我们的前端工程就已经启动起来,并且可供外网进行访问,快去复制下你们自己的链接去浏览器上访问一下把:

image-20221027185224866

  • 我们实际上就可以把前端网页页面直接放在当前目录即可!

确实是可以在自己的浏览器访问啦:

image-20221027185412636

注:这个网络地址接口是有用户鉴权的,链接别人是访问不了的!


2.2.2、实现云IDE打开工作空间时自动启动服务(配置preview.yml)

我们接着2.2.1中来进行,我们在当前目录下新建preview.yml:

image-20221027185712803

# preview.yml
autoOpen: false # 打开工作空间时是否自动开启所有应用的预览
apps:
  - port: 8080 # 应用的端口
    run: npm run dev # 应用的启动命npm i && 
    command: # 使用此命令启动服务,且不执行run
    root: ./ # 应用的启动目录
    name: love # 应用名称
    description: 我的第一个 App。 # 应用描述
    autoOpen: true # 打开工作空间时是否自动开启预览(优先级高于根级 autoOpen

主要是要修改其中的port端口,要与我们之前的服务端口对上!

OK,现在我们来测试一下,在刚刚的控制台界面ctrl+c关闭服务,再访问下确实不行:

image-20221027185838438

接着我们刷新下当前的页面:

image-20221027185914430

可以看到效果了,云IDE会自动启动一个窗口并执行一段命令,其中命令的参数包含我们刚才在preview.yml中配置的信息,命令如下:

cd ./ && set port=8080 && export PORT=8080 && npm run dev --port=8080

实际上就是跟我们刚刚手动输入的命令一致,这里的操作就是让我们更加简化了一步而已。


2.2.3、搭配live-server指定访问的root目录(指定dist目录)

需求:实际上我们在真实进行前端项目开发时,会打包到一个dist目录,那么我们如何指定该dist目录是我们当前对外访问的root目录呢?

解决思路:通过去设置live-server的初始params参数,指定root目录,即可达到该效果。

  • 之前尝试使用通过live-server追加命令参数,发现并没有这个参数可选。

实现步骤

①新建node的脚本文件:index.js

image-20221027191853819

var liveServer = require("live-server");

var params = {
	port: 8080, //端口号
	host: "0.0.0.0",   //绑定的主机地址
	root: "./dist",   //手动指定root目录,默认是在当前目录
	open: false, //是否打开默认浏览器
};
liveServer.start(params);

②修改package.json

image-20221027191952499

"dev": "node scripts/index.js",

最后就是新建一个dist文件(这里模拟一些vue项目去创建的输出目录)以及一个index.html:

image-20221027192121742

  • 为了方便标识这里是dist目录下的html,我们就加了222在helloworld后。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world222!
</body>
</html>

最后我们来进行执行npm命令来启动服务:

npm run dev

image-20221027192435051

三、使用体验

刚开始使用云IDE,第一眼感觉比较酷炫,使用时发现可以快速去拉取开源项目以及进行开发调试,其效果非常贴合开发者。

体验感好的地方:

1、随时随地可以进行登录云平台,就有之前熟悉的环境配置,不再需要自己的电脑随时随地在身边来进行编辑运行。

2、使用云IDE开发的项目,可以直接外网来进行查看效果,这一点我是最惊喜的地方!

3、自带一些常见开发的初始环境配置,进入云IDE无需怎么配置插件就可以直接进行开发。

建议:

1、因为我是后端开发,平时主要使用的IDE是IDEA,不太经常使用vscode,而且vscode需要自己手动装很多一些插件才能够配置java的一些开发环境,要是云上有我们熟悉的集成开发环境就非常棒了!

2、结合云生态,提供更多的集成服务,能够和高校合作给学生一系列的环境平台,无需进行手动重复环境配置,我觉得会很受欢迎。

大家也可以去尝试体验一波,很是很不错的!

👍创作不易,如有错误请指正,感谢观看!记得点赞哦!👍

参考资料

[1]. CSDN云IDE初体验 - 有些惊艳

[2]. 【产品新体验】- CSDN云IDE初体验

[3]. 云Cloud官方视频使用文档

  • 108
    点赞
  • 77
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 103
    评论
实验:内置对象使用 一、实验目的 1、掌握各个内置对象的含义; 2、理解并熟练应用session、application对象。 二、实验内容 1、设计聊天室,在聊天室中,需要通过JSP内置对象application来实时保存特定数量的当前聊天信息。 聊天室的设计包括:用户进行登录,选择聊天室,进行聊天,退出聊天室。 在聊天室中,用户只需输入一个用户名就可以进入聊天室,但是如果当前有人在使用该用户名,那么就必须换一个唯一的用户名。 具体要求:  用户登录成功后,程序会要求用户选择聊天室。可以不设置用户自行建立聊天室的功能,而且在聊天中途不能从一个聊天室切换到另一个聊天室。  进入聊天室后,用户可以从用户信息窗口看到该聊天室中所有用户的用户名,也可以在聊天窗口中看到随时更新的聊天信息。用户可以给所有人或某一个聊天用户发送公共的聊天信息,这个聊天内容大家都可以看到。用户也可以给某个用户发送私人的聊天信息,这种信息属于私聊信息,只有发送者和接收者可以看到。此外,聊天窗口还会出现一些系统公告,比如某某上站、某某离开等消息,另外用户还可以自己定义聊天信息和聊天用户信息刷新的时间间隔。  在用户单击“退出”按钮后,页面关闭,同时application和session中保存的信息都将丢失。 三、实验方法 1、用户登录信息使用request对象getParameter()方法得到用户登陆的一些信息; 2、公聊信息可以使用application对象,私聊信息使用session对象。 3、聊天的信息要不断刷新页面,使用户实时看到聊天信息。 4、用户退出时,有两种情况需要考虑:一是用户点击“退出”按钮,二是关闭浏览器,强制退出窗口,可查阅windows感知浏览器关闭的事件的相应方法。
评论 103
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长路 ㅤ   

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值