商城项目搭建 Spring Boot 3 开发环境，配置基本项目结构

本课件将指导您如何在商城项目中搭建 Spring Boot 3 的开发环境，并配置基本的项目结构。通过创建一个清晰的项目架构，确保系统的可扩展性、可维护性和开发效率。我们将结合 Spring Boot 3 和 Vue3，介绍如何配置前后端分离的开发环境。

1. Spring Boot 3 开发环境搭建

1.1 环境要求

Java 17 或更高版本：Spring Boot 3 需要 Java 17 及以上版本。
Maven 或 Gradle：用于项目的构建和依赖管理。
IDE：推荐使用 IntelliJ IDEA、Eclipse 或 VS Code。
数据库：MySQL/PostgreSQL（根据实际需要选择）。

1.2 搭建 Spring Boot 3 环境

首先，确保您的计算机已经安装了 Java 17 和 Maven，或者 Gradle。

下载并安装 Java 17（推荐 OpenJDK 17）。
配置环境变量：
- JAVA_HOME：指向 Java 安装目录。
- PATH：添加 Java 的 bin 目录。
- 使用 java -version 和 mvn -v 命令验证是否配置成功。

1.3 创建 Spring Boot 3 项目

使用 Spring Initializr 创建一个 Spring Boot 3 项目：

打开 Spring Initializr，选择如下配置：
- 项目：Maven Project
- 语言：Java
- Spring Boot 版本：3.x
- 项目元数据：
  - Group：com.mall
  - Artifact：mall
- 依赖项：
  - Spring Web
  - Spring Data JPA
  - MySQL Driver（或您选择的数据库驱动）
  - Spring Security（可选，用于后期实现安全性）
生成项目并下载，解压后导入到 IDE 中。

2. 配置基本项目结构

2.1 项目结构说明

Spring Boot 3 项目的基本结构大致如下：

mall/
│
├── src/
│   ├── main/
│   │   ├── java/com/mall/
│   │   │   ├── MallApplication.java  // 启动类
│   │   │   ├── controller/          // 控制器
│   │   │   ├── service/             // 服务层
│   │   │   ├── repository/          // 数据库访问层
│   │   │   └── model/               // 实体类
│   │   ├── resources/
│   │   │   ├── application.properties  // 配置文件
│   │   │   └── static/                 // 静态资源（前端相关）
│   │   └── test/java/com/mall/         // 测试代码
├── pom.xml  // Maven 配置文件
└── README.md

中文注释：

MallApplication.java：这是 Spring Boot 项目的启动类，包含 @SpringBootApplication 注解，启动整个应用。
controller/：存放控制器类，用于处理请求和返回响应。
service/：存放业务逻辑层代码。
repository/：存放与数据库交互的 DAO 层代码。
model/：存放实体类，用于映射数据库表结构。

2.2 配置 application.properties 文件

在 src/main/resources/application.properties 文件中配置项目的基本信息和数据库连接：

# 服务器配置
server.port=8080  # 项目启动端口

# 数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/mall_db?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update  # 自动更新数据库结构
spring.jpa.show-sql=true  # 显示执行的 SQL

# 日志级别
logging.level.org.springframework=INFO
logging.level.com.mall=DEBUG

中文注释：

配置 spring.datasource.url、spring.datasource.username、spring.datasource.password 来连接数据库。
spring.jpa.hibernate.ddl-auto=update：自动根据实体类生成或更新数据库表结构。

2.3 创建 MallApplication 启动类

在 src/main/java/com/mall/ 目录下创建启动类 MallApplication.java：

package com.mall;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication  // 启动 Spring Boot 应用
public class MallApplication {

    public static void main(String[] args) {
        SpringApplication.run(MallApplication.class, args);  // 启动应用
    }
}

中文注释：

@SpringBootApplication 注解是 Spring Boot 应用的入口注解，包含了 @Configuration、@EnableAutoConfiguration 和 @ComponentScan 注解。

3. 配置前后端分离

为了实现前后端分离，我们将使用 Vue3 来开发前端，Spring Boot 提供 RESTful API 供前端调用。

3.1 Vue3 前端项目结构

使用 Vue CLI 创建一个 Vue3 项目：

npm install -g @vue/cli
vue create mall-frontend

配置 Vue3 与 Spring Boot 进行前后端分离，前端代码存放在 src/ 目录下。
通过 axios 进行 HTTP 请求调用 Spring Boot 后端 API。

3.2 后端接口示例

创建一个简单的商品管理 API，放在 controller 层：

package com.mall.controller;

import com.mall.model.Product;
import com.mall.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/products")
public class ProductController {

    @Autowired
    private ProductService productService;

    @GetMapping
    public List<Product> getAllProducts() {
        return productService.getAllProducts();  // 返回所有商品
    }

    @PostMapping
    public Product createProduct(@RequestBody Product product) {
        return productService.createProduct(product);  // 创建商品
    }
}

中文注释：

@RestController：定义这是一个 REST 风格的控制器。
@GetMapping 和 @PostMapping：分别处理 GET 和 POST 请求。

3.3 前端 Vue3 示例

在前端使用 Vue3 和 axios 获取商品列表：

import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();  // 组件创建时获取商品数据
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await axios.get('http://localhost:8080/api/products');
        this.products = response.data;
      } catch (error) {
        console.error("获取商品失败", error);
      }
    }
  }
};

中文注释：