在Java中如何开发简易在线商城首页

来源：网络学院作者：森沢头衔：网络博主
导读：本期聚焦于小伙伴创作的《在Java中如何开发简易在线商城首页》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《在Java中如何开发简易在线商城首页》有用，将其分享出去将是对创作者最好的鼓励。

在Java中开发简易在线商城首页，通常会采用Spring Boot作为后端框架，搭配Thymeleaf模板引擎实现前后端协同开发，这种方式不需要前端单独搭建工程，适合快速实现功能。整个开发过程分为环境准备、后端数据接口开发、前端页面编写三个核心部分。

在Java中如何开发简易在线商城首页

环境准备

首先需要搭建基础的开发环境，确保以下依赖和工具已经配置完成：

  • JDK 8及以上版本
  • Maven 3.6及以上版本
  • Spring Boot 2.x版本
  • Thymeleaf模板引擎依赖
  • MySQL数据库（用于存储商品、分类等基础数据）

在Spring Boot项目的pom.xml中添加Thymeleaf和Web相关依赖：

<dependencies>
    <!-- Web启动依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Thymeleaf模板引擎依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- MySQL驱动依赖 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <!-- JPA持久层依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
</dependencies>

后端数据实体与接口开发

定义数据实体类

商城首页需要展示商品分类、热门商品两类核心数据，首先定义对应的实体类：

商品分类实体Category：

import javax.persistence.*;
import java.util.List;

@Entity
@Table(name = "category")
public class Category {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    // 分类名称
    private String name;
    // 分类排序权重
    private Integer sort;
    // 关联该分类下的商品
    @OneToMany(mappedBy = "category")
    private List<Product> productList;

    // 省略getter和setter方法
}

商品实体Product：

import javax.persistence.*;
import java.math.BigDecimal;

@Entity
@Table(name = "product")
public class Product {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    // 商品名称
    private String name;
    // 商品价格
    private BigDecimal price;
    // 商品封面图地址
    private String coverImg;
    // 商品销量
    private Integer sales;
    // 所属分类
    @ManyToOne
    @JoinColumn(name = "category_id")
    private Category category;

    // 省略getter和setter方法
}

开发数据访问层

使用JPA快速实现数据查询接口，分别定义分类和商品的Repository：

import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;

// 分类数据访问接口
public interface CategoryRepository extends JpaRepository<Category, Long> {
    // 按排序权重升序查询所有分类
    List<Category> findAllByOrderBySortAsc();
}

import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;

// 商品数据访问接口
public interface ProductRepository extends JpaRepository<Product, Long> {
    // 查询销量前10的热门商品
    List<Product> findTop10ByOrderBySalesDesc();
}

开发首页控制器

创建IndexController，处理首页请求，将分类和热门商品数据传递到前端页面：

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;

@Controller
public class IndexController {
    private final CategoryRepository categoryRepository;
    private final ProductRepository productRepository;

    // 构造器注入依赖
    public IndexController(CategoryRepository categoryRepository, ProductRepository productRepository) {
        this.categoryRepository = categoryRepository;
        this.productRepository = productRepository;
    }

    @GetMapping("/")
    public String index(Model model) {
        // 查询所有分类
        List<Category> categoryList = categoryRepository.findAllByOrderBySortAsc();
        // 查询热门商品
        List<Product> hotProductList = productRepository.findTop10ByOrderBySalesDesc();
        // 将数据放入model，传递给前端
        model.addAttribute("categoryList", categoryList);
        model.addAttribute("hotProductList", hotProductList);
        // 返回Thymeleaf模板名称，对应resources/templates/index.html
        return "index";
    }
}

前端页面开发

在resources/templates目录下创建index.html，使用Thymeleaf语法渲染后端传递的数据：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>简易在线商城首页</title>
    <style>
        .category-list {
            display: flex;
            gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .category-item {
            padding: 10px 20px;
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .hot-product-title {
            padding: 20px;
            font-size: 20px;
            font-weight: bold;
        }
        .product-list {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            padding: 0 20px 20px;
        }
        .product-item {
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 10px;
            text-align: center;
        }
        .product-img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        .product-name {
            margin: 10px 0;
            font-size: 14px;
        }
        .product-price {
            color: #ff4400;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 商品分类区域 -->
    <div class="category-list">
        <div th:each="category : ${categoryList}" class="category-item">
            <span th:text="${category.name}">分类名称</span>
        </div>
    </div>

    <!-- 热门商品区域 -->
    <div class="hot-product-title">热门商品</div>
    <div class="product-list">
        <div th:each="product : ${hotProductList}" class="product-item">
            <img th:src="${product.coverImg}" class="product-img" alt="商品封面"/>
            <div class="product-name" th:text="${product.name}">商品名称</div>
            <div class="product-price" th:text="'￥' + ${product.price}">商品价格</div>
        </div>
    </div>
</body>
</html>

功能扩展建议

完成基础首页开发后，可以根据需求扩展更多功能：

  • 添加轮播图模块，在后端新增轮播图表和对应接口，前端增加轮播图展示区域
  • 实现分类点击筛选商品功能，前端传递分类ID到后端，后端返回对应分类的商品列表
  • 增加商品搜索功能，使用模糊查询匹配商品名称，返回搜索结果
  • 优化页面样式，适配移动端屏幕，提升用户浏览体验
开发过程中需要注意数据校验，比如商品价格为正数、分类名称不为空等，避免无效数据存入数据库影响页面展示效果。

Java在线商城首页Spring_BootThymeleaf商城模块开发修改时间：2026-07-20 19:51:37

免责声明：​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。

上一篇预算约束下如何最大化收集物品？0/1背包问题动态规划解决方案详解

下一篇如何优化 JPA Repository 的批量查询性能

猜你喜欢

内容垂直聚焦
专注技术核心技术栏目，确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计，为用户提供无干扰的纯技术知识沉淀，精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进，构建清晰学习路径，帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈，深入技术细节与实践难点。无论是数据库优化还是服务器配置，均结合真实场景与代码示例进行剖析，致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程，从数据库操作到服务器运维，形成完整闭环，一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性，步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目，显著缩短从学习到实践的距离，快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代，紧跟主流技术发展趋势，为用户提供经久不衰的学习价值。

负责任网站 - 免责声明 - 隐私政策 - 网站地图

举报邮箱：chomcom@qq.com

Copyright (C) www.ipipp.com All Rights Reserved.