Web项目实战 | 购物系统v2.0 | 开发记录（六）商品详情页面 | 游客访问主页 | 运用Bootstrap4轻量级弹窗实现提示

本文链接：https://blog.csdn.net/Unirithe/article/details/122799137

文章目录

以往记录
一、运行环境
二、商品详情页面
三、游客访问
四、轻量级弹窗

以往记录

一、运行环境

windows10
IDEA 2021.1 专业版
JDK8
SpringBoot2
Druid 1.2.5
Bootstrap 4.6.0
MySQL 8
Navicat 11

二、商品详情页面

目前商城系统没有复杂的商品评价、服务售后等模块，故详情页面看起来比较简单

在这里插入图片描述
HTML 代码：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商品详情页面</title>
    <link th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap-icons/1.7.2/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/common/topbar.css}" rel="stylesheet">
    <link th:href="@{/css/commodity/card.css}" rel="stylesheet">
    <link th:href="@{/css/commodity/detail.css}" rel="stylesheet">

</head>
<body>
<div th:replace="common/topbar::topbar"></div>
<nav th:replace="common/search::search"></nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb text-dark">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="/index.html">商品中心</a></li>
        <li class="breadcrumb-item active" aria-current="page" th:text="${commodity.commodityType.comTypeName}"></li>
    </ol>
</nav>
<div class="container row">
    <div class="offset-md-1 col-md-3 u-com-detail-card">
            <img th:src="${commodity.comImgSrc}" class="u-detail-img" alt="...">
    </div>
    <div class="offset-md-1 col-md-7 u-com-detail-card">
        <h1 th:text="${commodity.comName}"></h1>
        <h2 th:text="${commodity.comDesc}"></h2>
        <ul style="list-style-type: none">
            <li>
                <span>商品价格: </span>
                <span class=