一、概述

1.1 案例介绍

Springboot是现在使用、流传最广的应用框架，可以快速开发安全和可维护的网站。以其丰富的生态著称，因为有大量的组件，所以开发者无需重复造轮子，专注于业务开发。

本案例借助开发者空间云开发环境部署Litemall项目，并与开发者空间提供的免费GaussDB数据库实例对接，完成一个Web应用构建。通过实际操作，让大家深入了解如何利用 Springboot开发并部署一个 Web 应用。

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

1.2 适用对象

• 企业
• 个人开发者
• 高校学生

1.3 案例时间

环境相对复杂，本案例总时长预计120分钟或以上。

1.4 案例流程

说明：

1. 申请华为云开发者空间的GaussDB数据库；
2. 基础环境集成，如jdk、mvn、npm等
3. 进行华为云开发者空间的云开发环境进行springboot安装与适配；
4. 启用springboot、vue 服务，适配GaussDB，测试商城能否正常使用。

1.5 资源总览

本案例预计花费0.8元。

二、案例准备工作

2.1 配置云开发环境

根据案例《开发者空间 - 云开发环境使用指导》，请查看下面链接，配置云开发环境，并通过xshell等链接工具登录云开发环境。

开发者空间 - 云开发环境使用指导

2.2 领取GaussDB数据库

免费领取GaussDB在线试用版（2025年 06月 21日 - 2025年 12月 31日）。

华为开发者空间-GaussDB云数据库领取与使用指导

注：部署的Litemall项目需要对接GaussDB，因此GaussDB需要绑定EIP，参考上述指导中领取部分第(5)步

三、 Springboot部署与基础环境安装安装

3.1 jdk集成

执行如下命令

java -version

因为发现云开发环境已经默认安装好java了，且版本为jdk11.0，所以无需安装

3.2 mvn集成

访问maven官网下载maven工具

上传至开发环境，执行命令如下集成maven，用作编译打包jar包

tar -xvf apache-maven-3.9.11-bin.tar.gz
cp -r apache-maven-3.9.11 /usr/local/
export PATH=$PATH:/usr/local/apache-maven-3.9.11/bin/

安装之后配置华为mvn镜像源,修改/usr/local/apache-maven-3.9.11/conf/settings.xml

可以手动在settings.xml文件中的mirrors节点中添加如下内容：

<mirror>
    <id>huaweicloud</id>
    <mirrorOf>*</mirrorOf>
    <url>https://repo.huaweicloud.com/repository/maven/</url>
</mirror>

3.3 NPM集成

执行以下命令集成npm

yum install -y npm

#配置华为源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

3.4克隆Litemall代码并编译

开发环境中已经存在git命令，因此可以直接使用（如果拉取速度缓慢，可以考虑更换gitee）

git clone https://github.com/linlinjava/litemall.git

 如果克隆代码顺利，就可以编译程序jar包了，华为官方的mvn源还是非常快的，点个赞。

cd litemall
mvn install
mvn clean package

编译完之后拷贝至部署目录

cp -f ./litemall-all/target/litemall-all-*-exec.jar ./deploy/litemall/litemall.jar

之后admin前端代码安装依赖

cd ./litemall-admin
npm install


cd ./litemall-vue
npm install

四、GauessDB集成

4.1 gauess实例部署

按照2.2中方法开一个gauessDB数据库，建立用户，数据库（mysql兼容模式），另外因为需要云开发环境访问，顺便也开通一个EIP并进行绑定（这里在EIP界面没看到绑定位置，后来发现要在gauessDB界面绑定）。

4.2 执行SQL语句

litemall项目中提供了3个sql脚本，在litemall/litemall-db/sql位置下

分别是litemall_data.sql  litemall_schema.sql  litemall_table.sql  

这里要做一些简单的语法修改，不然跑不下去，比如说我贴一个我遇到的错误。（另外后面我发现好像有迁移工具，sql不用自己修改）

========================================
[error sql]:

CREATE TABLE `litemall_ad` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(63) NOT NULL DEFAULT '' COMMENT '广告标题',
  `link` varchar(255) NOT NULL DEFAULT '' COMMENT '所广告的商品页面或者活动页面链接地址',
  `url` varchar(255) NOT NULL COMMENT '广告宣传图片',
  `position` tinyint(3) DEFAULT '1' COMMENT '广告位置：1则是首页',
  `content` varchar(255) DEFAULT '' COMMENT '活动内容',
  `start_time` datetime DEFAULT NULL COMMENT '广告开始时间',
  `end_time` datetime DEFAULT NULL COMMENT '广告结束时间',
  `enabled` tinyint(1) DEFAULT '0' COMMENT '是否启动',
  `add_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `deleted` tinyint(1) DEFAULT '0' COMMENT '逻辑删除',
  PRIMARY KEY (`id`),
  KEY `enabled` (`enabled`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COMMENT='广告表';
[error sql line number]:
25
[error message]:
[100.125.141.68:35276/100.113.21.127:8635] ERROR: type modifier is not allowed for type "int"

执行成功后按实际情况更改litemall/deploy/litemall/application.yml文件

修改datasource --> druid --> url

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://<gaussdb_host>:<gaussdb_port>/<gaussdb_database>?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&useSSL=false
    username: <your_username>
    password: <your_password>

五、启动前后台并进行操作

5.1 创建启动springboot后台

上面已经把jar包打成了，并放在了litemall/deploy/litemall目录，现在只需启动

cd litemall/deploy/litemall
java -Dfile.encoding=UTF-8 -jar litemall-all-0.1.0-exec.jar

 启动成功无报错的话如下图所示

 5.2启动admin前台

进入admin前台目录，启动admin前台（这里需要端口映射，所以我把admin前台端口改成了8081，相关文件是litemall/litemall-admin/vue.config.js）

cd litemall/litemall-admin
npm run dev

 启动成功，开发环境这样启动没问题，生产环境可以打包放nginx里做前后分离。

然后端口映射完就admin可以展示了（映射命令：hdspace.exe devenv start-tunnel --instance-id=填写实际的实例id --remote-port=8081 --local-port=1081）

后台登录界面

后台的商品管理

后台的地区管理

5.3启动vue前台

vue前台是一个vue的商城，启动方式基本和amin前台一致

这里也是在启动前把端口改成了8085，修改方法与5.2一致，方便映射

cd litemall/litemall-vue
npm run dev

启动成功会如下

使用hdspace设置映射：hdspace.exe devenv  start-tunnel --instance-id=这里写实际的实例ID --remote-port=8085 --local-port=1085

浏览器访问，这是vue商城首页

功能正常，在找个商品展示界面，没有任何问题。