一、概述

1. 案例介绍

华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台云主机、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等华为各项根技术的开发工具资源，并提供配套案例指导开发者从开发编码到应用调测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。

面对海量用户并发开发、测试对资源弹性与隔离性的高标准要求，华为开发者空间开发平台 - 云开发环境（容器）深度融合了弹性云主机的高性能计算与容器技术的敏捷弹性，通过构建集高效计算、安全隔离、敏捷部署于一体的云原生基础设施，不仅保障了云开发环境的稳定可靠，更实现了资源的秒级伸缩与高效利用，为加速应用创新提供了坚实底座。

本案例基于华为开发者空间开发平台-云开发环境（容器），完成 JavaWeb 商城开发。

2. 适用对象

• 企业

• 个人开发者

• 高校学生

3. 案例时间

本案例总时长预计 90 分钟。

4. 案例流程

说明：

1. 浏览器登录华为开发者空间开发平台 - 云开发环境（容器）平台，web 端实现容器的创建、开机等操作；

2. PC 本地通过 VS Code 安装 Huawei Developer Space 插件，远程连接云开发环境（容器）;

3. 在容器中使用 VS Code 编写并运行应用代码，使用浏览器体验 JavaWeb 商城应用。

二、云开发环境（容器）操作及远程连接

1. 创建及连接云开发环境（容器）

参考案例华为开发者空间 - 云开发环境（容器）IDE插件远程连接操作指导中 安装插件-登录-创建-开机-连接操作步骤，连接云开发环境。

三、JavaWeb 商城应用开发

1. 下载项目代码

下载项目代码，代码仓地址：https://gitcode.com/hahale2021/Mall.git

2. 项目结构

使用容器做一个简单的商城应用，项目结构如下图所示：

src/main/├──java/com/example/developer/    ├── DeveloperApplication.java     ├── controller/    │   └── ProductController.java    ├── model/    │   └── Product.java    └── service/        └── ProductService.java├──resources/    ├──templates/product/        ├──add.html        ├──edit.html        ├──list.html    ├──application.properties├──pom.xml

后端代码：DeveloperApplication.java：主启动类，由于我们采用的是 Java 容器，主启动类已经默认内嵌，因此，不需要再做变更，直接采用原有启动类即可 Product.java：商品模型类，Product 类用于定义商品的 ID、名称、价格、库存、描述等 ProductService.java：商品服务类，ProductService 类用于初始化商品信息、操作商品增删改查等功能 ProductController.java：控制器类，ProductController 类用于和前端交互等功能前端代码：list.html：商品信息展示页面 add.html：添加商品页面 edit.html：编辑商品页面 application.properties:前端配置文件 Maven 依赖：pom.xml：Maven 依赖配置文件

3. 配置文件修改

打开 src/main/resources/下的 application.properties 文件，为防止本地服务端口号冲突，这里修改为 8085，如下图所示：

# 应用配置spring.application.name=developer# Thymeleaf配置spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.htmlspring.thymeleaf.mode=HTMLspring.thymeleaf.encoding=UTF-8spring.thymeleaf.servlet.content-type=text/html# 服务器配置server.port=8085

4. 编译代码及启动

1. 通过菜单栏打开终端：

2. 进入到项目目录：

cd springboot/

3. 在该目录下执行 Maven 编译命令：

mvn clean install

4. 启动项目找到启动类，点击【Run】按钮，选择【Run without Debugging】进行启动。

在启动过程中，若是弹出需要安装 Java 插件，直接点击安装即可。如下图所示：

安装完成之后，继续重复启动动作，有如下截图显示则为启动成功：

5. 本地访问商城项目

项目代码已经编译完成，接下来需要通过浏览器进行本地访问该商城。

1. 设置端口转接首先我们需要在本地转接一下，才能通过浏览器访问，在 PORTS 下点击【Forward a Port】新增转接端口，设置之前设置的 8085 端口如下图所示：

2. 点击浏览器访问

http://localhost:8085/products

添加商品 iphone14：

删除商品 IPhone14：

开发者们也可以根据自己的需求开发更多功能，至此，本案例基于华为开发者空间开发平台-云开发环境（容器），完成 JavaWeb 商城开发完成。