WebIDE 环境使用指南_蓝桥云课在 webide 环境中提供了一个 “web 服务” 功能,可以直接进入到实验环境-CSDN博客

本文链接：https://blog.csdn.net/zerowwwww/article/details/122255265

本文详细介绍了如何在WebIDE中进行C/C++、HTML/JS前端和Java项目开发，包括C语言编译、HTML预览、Maven项目部署与调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebIDE 界面提供的是一个可以在浏览器中编辑代码的 IDE 的界面。在 WebIDE 中，可以编辑代码文件，打开 Terminal 终端执行 Linux 命令，还可以在 Terminal 中运行 Web 服务获得临时域名，打开浏览器进行预览调试。本次实验将会了解和熟悉 WebIDE 的常用功能及特点。

一、C/C++ 示例项目

首先，我们从一个简单的 C/C++ 示例项目开始。

我们需要先在代码文件浏览区中通过右键 New File 创建一个名为 hello.c 的 C 语言文件。

然后，在编辑区域键入以下 C 代码，代码会自动保存。
#include<stdio.h>
int main()
{
    printf("Hello, World.");
    return 0;
}

如果想要执行上方的 C 语言代码，需要先编译代码。编译代码需要用到 Linux 终端，接下来在终端中输入以下命令。
gcc -o hello hello.c

注意参数是小写字母 o，不是数字 0。单击回车，这时目录下会生成了一个名为 hello 的文件，这是 C 语言程序编译后得到的可执行程序

。

接下来，我们就可以在终端中执行文件，注意执行的是编译之后的文件：
./hello

执行完之后，就可以看到刚刚编写 C 语言文件的输出了。

二、前端示例项目

由于 WebIDE 本身就是在浏览器中工作的 IDE，所以其非常适合于前端项目的开发和调试。接下来，我们以一个简单的前端项目为例，演示 WebIDE 常用功能使用。

首先，在代码文件浏览区中通过右键 New File 创建一个名为 hello.html 的 HTML 文件，然后在编辑区域输入以下 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>欢迎来到 HTML 的世界</title>
  </head>
  <body>
    <p>WebIDE 示例教学项目.</p>
  </body>
</html>

代码会自动保存。此时，如果希望预览刚刚编写的 HTML 页面效果，可以单击编辑器页面右上角的预览图标打开。

除了预览按钮，你还可以：选择代码文件 → 右键 → Open With → Preview 打开预览：

三、Java 示例项目

除了前端开发， WebIDE 界面也非常适合进行 Java Web 开发。在 WebIDE 中，Java 主要使用命令行和 maven 来开发项目。

首先，我们在 WebIDE 提供的终端中输入命令，使用 Maven 建立项目：

mvn archetype:generate -DgroupId=com.shiyanlou -DartifactId=demo -DarchetypeArtifactId=maven-archetype-webapp

如果你的终端被不慎关闭了，可以点击顶部菜单栏 Terminal → New Terminal 打开终端。

稍等片刻，就会创建好一个名为 demo 的 Maven 项目。创建过程中，可能需要单击回车进行步骤确认。

接下来，我们尝试启动 Maven 的示例项目。在 Java Web 开发过程中，需要运行 Web 服务进行调试，这个时候就需要 Jetty 或者 Tomcat。所以，需要先修改刚刚新建的项目配置，添加 Jetty maven 插件。

你需要打开 demo 文件夹下方的 pom.xml 配置文件，并使用下方配置替换默认内容，复制并粘贴即可。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.shiyanlou</groupId>
  <artifactId>demo</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>demo Maven Webapp</name>
  <url>http://maven.apache.org</url>
    <build>
        <plugins>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.12.v20180830</version>
                <configuration>
                    <scanIntervalSeconds>10</scanIntervalSeconds>
                    <webApp>
                        <contextPath>/</contextPath>
                    </webApp>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

上方的配置中，我们新增了 jetty-maven-plugin 插件支持。接下来，继续在终端操作：

cd demo
mvn jetty:run

上方的命令中，cd demo 是切换路径到 demo 文件夹中，mvn jetty:run 则是启动 Web 服务。由于需要下载的依赖较多，执行后需要稍等一会。项目启动完成之后，你可以看到服务运行在公网 8080 端口。

此时，我们就可以通过蓝桥线上环境提供的 Web 服务，打开运行在 8080 端口的 Maven 示例项目。

在环境右侧工具栏中找到「Web 服务」按钮，然后单击打开。

蓝桥云课在 WebIDE 环境中提供了一个 “Web 服务” 功能，可以直接进入到实验环境中 8080 端口运行的网站。

例如实验过程中在 WebIDE 环境中启动了一个运行在 8080 端口的 Nginx 服务器，点击 “Web 服务” 按钮会直接进入到该 Nginx 服务的页面。

如果发现 8080 端口被占用可以使用命令 sudo lsof -t -i:8080 | sudo xargs kill -9 查找并杀死相应的进程。

线上环境会自动分配一个临时域名给当前的 Web 服务，你可以在浏览器新的标签页面看到预览效果。

看到 Hello，World 默认页面，意味着刚刚 Maven 项目运行正常。

特别提醒：为了保证环境运行安全，线上环境提供的 Web 服务仅监听 8080 端口。Maven 项目默认运行在 8080 端口，其他一些服务运行时则可能需要手动指定端口号。

四、项目上传和下载

实验中，如果需要运行已有项目或者继续之前没有完成的项目，我们可以在终端 Terminal 中使用 wget 或者 git 命令获取代码。

请在终端中尝试下载并解压示例项目：

wget https://labfile.oss.aliyuncs.com/courses/1433/maven-demo.zip
unzip maven-demo.zip

同时，WebIDE 支持上传本地项目压缩包，你可以在代码浏览区域，通过鼠标右键找到 Upload Files 的上传选项。

你可以在上图看到 Download 下载选项。在 WebIDE 中如果需要下载代码，只需要选中要下载的文件夹或者代码文件，右键选择 Download，就可以下载到本地。

下载的代码会被打包成 tar 压缩包，下载后在 Mac 和 Windows 上都可以通过常用的解压软件，例如 7zip 进行解压，在 Linux 上可以使用 tar 命令解压。