🔧 添加和更新product模块值
This commit is contained in:
parent
a5614b1b0e
commit
d4bc2107a2
|
@ -22,7 +22,12 @@
|
|||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-web</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-thymeleaf</artifactId>
|
||||
</dependency>
|
||||
|
||||
<!-- lombok -->
|
||||
<dependency>
|
||||
<groupId>org.projectlombok</groupId>
|
||||
|
@ -48,5 +53,6 @@
|
|||
<groupId>com.github.xiaoymin</groupId>
|
||||
<artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
</project>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
package com.mall.common.config;
|
||||
|
||||
import com.github.xiaoymin.knife4j.spring.annotations.EnableKnife4j;
|
||||
import io.swagger.v3.oas.models.ExternalDocumentation;
|
||||
import io.swagger.v3.oas.models.OpenAPI;
|
||||
import io.swagger.v3.oas.models.info.Contact;
|
||||
|
@ -8,12 +9,13 @@ import io.swagger.v3.oas.models.info.License;
|
|||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springdoc.core.models.GroupedOpenApi;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
|
||||
@Configuration
|
||||
// @EnableKnife4j
|
||||
// @ConditionalOnWebApplication(type = ConditionalOnWebApplication.Type.ANY)
|
||||
@EnableKnife4j
|
||||
@ConditionalOnWebApplication(type = ConditionalOnWebApplication.Type.ANY)
|
||||
@Slf4j
|
||||
public class Knife4jConfig {
|
||||
|
||||
|
@ -43,4 +45,9 @@ public class Knife4jConfig {
|
|||
public GroupedOpenApi all() {
|
||||
return GroupedOpenApi.builder().group("全部请求接口").pathsToMatch("/api/**").build();
|
||||
}
|
||||
|
||||
@Bean
|
||||
public GroupedOpenApi product() {
|
||||
return GroupedOpenApi.builder().group("商品请求接口").pathsToMatch("/api/product/**").build();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
package com.mall.common.config;
|
||||
|
||||
import com.baomidou.mybatisplus.annotation.DbType;
|
||||
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
|
||||
import com.baomidou.mybatisplus.extension.plugins.inner.BlockAttackInnerInterceptor;
|
||||
import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
|
||||
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.transaction.annotation.EnableTransactionManagement;
|
||||
|
||||
@EnableTransactionManagement
|
||||
@Configuration
|
||||
public class MybatisPlusConfig {
|
||||
|
||||
@Bean
|
||||
public MybatisPlusInterceptor mybatisPlusInterceptor() {
|
||||
// 拦截器
|
||||
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
|
||||
|
||||
// 使用分页插件
|
||||
PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();
|
||||
paginationInnerInterceptor.setDbType(DbType.MYSQL);
|
||||
paginationInnerInterceptor.setMaxLimit(600L);
|
||||
interceptor.addInnerInterceptor(paginationInnerInterceptor);
|
||||
|
||||
// 乐观锁
|
||||
interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
|
||||
|
||||
// 防止全表删除
|
||||
interceptor.addInnerInterceptor(new BlockAttackInnerInterceptor());
|
||||
|
||||
return interceptor;
|
||||
}
|
||||
}
|
|
@ -1,14 +1,11 @@
|
|||
package com.mall.product;
|
||||
|
||||
import com.mall.common.config.Knife4jConfig;
|
||||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
import org.springframework.context.annotation.ComponentScan;
|
||||
import org.springframework.transaction.annotation.EnableTransactionManagement;
|
||||
|
||||
@SpringBootApplication
|
||||
@ComponentScan(basePackageClasses = {Knife4jConfig.class})
|
||||
@EnableTransactionManagement
|
||||
@ComponentScan(basePackages = {"com.mall.common", "com.mall.product"})
|
||||
public class MallProductApplication {
|
||||
public static void main(String[] args) {
|
||||
SpringApplication.run(MallProductApplication.class, args);
|
||||
|
|
|
@ -1,15 +0,0 @@
|
|||
package com.mall.product.config;
|
||||
|
||||
import org.springdoc.core.models.GroupedOpenApi;
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
|
||||
@Configuration
|
||||
public class Knife4jConfig {
|
||||
|
||||
@Bean
|
||||
public GroupedOpenApi product() {
|
||||
return GroupedOpenApi.builder().group("商品请求接口").pathsToMatch("/api/product/**").build();
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
package com.mall.product.controller;
|
||||
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
|
||||
@Controller
|
||||
public class IndexController {
|
||||
|
||||
@GetMapping
|
||||
public String index() {
|
||||
return "index";
|
||||
}
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
bunny:
|
||||
datasource:
|
||||
master:
|
||||
host: rm-bp12z6hlv46vi6g8mro.mysql.rds.aliyuncs.com
|
||||
port: 3306
|
||||
|
|
|
@ -3,16 +3,16 @@ server:
|
|||
|
||||
spring:
|
||||
profiles:
|
||||
active: prod
|
||||
active: dev
|
||||
application:
|
||||
name: service-product
|
||||
|
||||
datasource:
|
||||
type: com.zaxxer.hikari.HikariDataSource
|
||||
driver-class-name: com.mysql.cj.jdbc.Driver
|
||||
url: jdbc:mysql://${bunny.master.host}:${bunny.master.port}/${bunny.master.database}?serverTimezone=GMT%2B8&useSSL=false&characterEncoding=utf-8&allowPublicKeyRetrieval=true
|
||||
username: ${bunny.master.username}
|
||||
password: ${bunny.master.password}
|
||||
url: jdbc:mysql://${datasource.master.host}:${datasource.master.port}/${datasource.master.database}?serverTimezone=GMT%2B8&useSSL=false&characterEncoding=utf-8&allowPublicKeyRetrieval=true
|
||||
username: ${datasource.master.username}
|
||||
password: ${datasource.master.password}
|
||||
hikari:
|
||||
maximum-pool-size: 20
|
||||
connection-timeout: 30000
|
||||
|
|
|
@ -0,0 +1,508 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>谷粒商城 - 商品模块</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #ff6b6b;
|
||||
--secondary-color: #48dbfb;
|
||||
--dark-color: #2c3e50;
|
||||
--light-color: #f8f9fa;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f5f7fa;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
padding: 5rem 0;
|
||||
border-radius: 0 0 20px 20px;
|
||||
margin-bottom: 3rem;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
margin-bottom: 20px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #ff5252;
|
||||
border-color: #ff5252;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
border-radius: 50px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
position: relative;
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-title:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.product-img {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.badge-discount {
|
||||
background-color: var(--primary-color);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
color: white;
|
||||
padding: 3rem 0;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 15px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.social-icon:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.api-demo {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="bi bi-shop"></i> 谷粒商城
|
||||
</a>
|
||||
<button class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">商品</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">分类</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">品牌</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">购物车</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">订单</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 英雄区域 -->
|
||||
<section class="hero-section text-center">
|
||||
<div class="container">
|
||||
<h1 class="display-4 fw-bold mb-4">商品模块</h1>
|
||||
<p class="lead mb-5">谷粒商城核心模块,提供完整的商品管理、分类、品牌、属性等功能</p>
|
||||
<div class="d-flex justify-content-center gap-3">
|
||||
<a class="btn btn-light btn-lg px-4" href="#features">功能特性</a>
|
||||
<a class="btn btn-outline-light btn-lg px-4" href="#api">API文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section class="container py-5" id="features">
|
||||
<h2 class="text-center section-title">功能特性</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-card card p-4 text-center h-100">
|
||||
<i class="bi bi-box-seam feature-icon"></i>
|
||||
<h3>商品管理</h3>
|
||||
<p>完整的商品CRUD操作,支持多规格商品,商品上下架管理,商品搜索等功能。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-card card p-4 text-center h-100">
|
||||
<i class="bi bi-tags feature-icon"></i>
|
||||
<h3>分类管理</h3>
|
||||
<p>多级商品分类系统,支持树形结构展示,分类属性关联,便于商品归类管理。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-card card p-4 text-center h-100">
|
||||
<i class="bi bi-award feature-icon"></i>
|
||||
<h3>品牌管理</h3>
|
||||
<p>品牌信息维护,品牌logo上传,品牌与分类关联,品牌商品统计等功能。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-4">
|
||||
<div class="feature-card card p-4 text-center h-100">
|
||||
<i class="bi bi-list-check feature-icon"></i>
|
||||
<h3>属性管理</h3>
|
||||
<p>商品属性与规格管理,支持属性分组,属性与分类关联,SKU生成等功能。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-card card p-4 text-center h-100">
|
||||
<i class="bi bi-image feature-icon"></i>
|
||||
<h3>图片管理</h3>
|
||||
<p>商品图片上传、删除、排序,支持多图展示,主图设置,图片水印等功能。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="feature-card card p-4 text-center h-100">
|
||||
<i class="bi bi-graph-up feature-icon"></i>
|
||||
<h3>数据分析</h3>
|
||||
<p>商品销售统计,库存预警,热销商品分析,为运营决策提供数据支持。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 商品展示 -->
|
||||
<section class="container py-5 bg-light rounded-3">
|
||||
<h2 class="text-center section-title">热门商品</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="product-card card">
|
||||
<span class="badge badge-discount">-20%</span>
|
||||
<img alt="商品1" class="card-img-top product-img" src="https://via.placeholder.com/300x200?text=商品1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">高端智能手机</h5>
|
||||
<p class="card-text text-muted">最新款旗舰手机,6.7英寸AMOLED屏幕</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-danger fw-bold">¥3999</span>
|
||||
<small class="text-decoration-line-through text-muted ms-2">¥4999</small>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-primary">加入购物车</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="product-card card">
|
||||
<img alt="商品2" class="card-img-top product-img" src="https://via.placeholder.com/300x200?text=商品2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">无线蓝牙耳机</h5>
|
||||
<p class="card-text text-muted">主动降噪,30小时续航,Hi-Fi音质</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-danger fw-bold">¥699</span>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-primary">加入购物车</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="product-card card">
|
||||
<span class="badge badge-discount">-15%</span>
|
||||
<img alt="商品3" class="card-img-top product-img" src="https://via.placeholder.com/300x200?text=商品3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">轻薄笔记本电脑</h5>
|
||||
<p class="card-text text-muted">13.3英寸,16GB内存,512GB SSD</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-danger fw-bold">¥5999</span>
|
||||
<small class="text-decoration-line-through text-muted ms-2">¥6999</small>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-primary">加入购物车</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="product-card card">
|
||||
<img alt="商品4" class="card-img-top product-img" src="https://via.placeholder.com/300x200?text=商品4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">智能手表</h5>
|
||||
<p class="card-text text-muted">心率监测,血氧检测,50米防水</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-danger fw-bold">¥1299</span>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-primary">加入购物车</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a class="btn btn-primary px-4" href="#">浏览更多商品</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API文档 -->
|
||||
<section class="container py-5" id="api">
|
||||
<h2 class="text-center section-title">API文档</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4><i class="bi bi-controller me-2"></i>商品API</h4>
|
||||
<div class="api-demo">
|
||||
<p><strong>获取商品列表</strong></p>
|
||||
<p>GET /api/product/list</p>
|
||||
<p>参数: page, size, categoryId, brandId, keyword</p>
|
||||
<hr>
|
||||
<p><strong>获取商品详情</strong></p>
|
||||
<p>GET /api/product/info/{id}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4><i class="bi bi-database me-2"></i>分类API</h4>
|
||||
<div class="api-demo">
|
||||
<p><strong>获取分类树</strong></p>
|
||||
<p>GET /api/category/tree</p>
|
||||
<hr>
|
||||
<p><strong>获取分类属性</strong></p>
|
||||
<p>GET /api/category/attrs/{catId}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6">
|
||||
<h4><i class="bi bi-card-checklist me-2"></i>品牌API</h4>
|
||||
<div class="api-demo">
|
||||
<p><strong>获取品牌列表</strong></p>
|
||||
<p>GET /api/brand/list</p>
|
||||
<p>参数: page, size, keyword</p>
|
||||
<hr>
|
||||
<p><strong>获取品牌详情</strong></p>
|
||||
<p>GET /api/brand/info/{id}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4><i class="bi bi-tag me-2"></i>属性API</h4>
|
||||
<div class="api-demo">
|
||||
<p><strong>获取属性分组</strong></p>
|
||||
<p>GET /api/attrgroup/list/{catId}</p>
|
||||
<hr>
|
||||
<p><strong>获取分组属性</strong></p>
|
||||
<p>GET /api/attr/list/{groupId}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a class="btn btn-outline-primary px-4" href="/doc.html" target="_blank">查看完整API文档</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 技术架构 -->
|
||||
<section class="container py-5 bg-light rounded-3">
|
||||
<h2 class="text-center section-title">技术架构</h2>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-2 col-4 mb-4">
|
||||
<div class="p-3 bg-white rounded-3 shadow-sm h-100">
|
||||
<img alt="Spring" height="40" src="https://spring.io/images/spring-logo.svg">
|
||||
<p class="mt-2 mb-0">Spring Boot</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-4 mb-4">
|
||||
<div class="p-3 bg-white rounded-3 shadow-sm h-100">
|
||||
<img alt="Spring Data" height="40" src="https://spring.io/images/spring-data-logo.svg">
|
||||
<p class="mt-2 mb-0">Spring Data</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-4 mb-4">
|
||||
<div class="p-3 bg-white rounded-3 shadow-sm h-100">
|
||||
<img alt="Spring Cloud" height="40" src="https://spring.io/images/spring-cloud-logo.svg">
|
||||
<p class="mt-2 mb-0">Spring Cloud</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-4 mb-4">
|
||||
<div class="p-3 bg-white rounded-3 shadow-sm h-100">
|
||||
<img alt="MySQL" height="40" src="https://www.mysql.com/common/logos/logo-mysql-170x115.png">
|
||||
<p class="mt-2 mb-0">MySQL</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-4 mb-4">
|
||||
<div class="p-3 bg-white rounded-3 shadow-sm h-100">
|
||||
<img alt="Redis" height="40" src="https://redis.io/images/redis-white.png">
|
||||
<p class="mt-2 mb-0">Redis</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-4 mb-4">
|
||||
<div class="p-3 bg-white rounded-3 shadow-sm h-100">
|
||||
<img alt="Elasticsearch" height="40" src="https://www.elastic.co/static/images/elastic-logo.svg">
|
||||
<p class="mt-2 mb-0">Elasticsearch</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<h5 class="mb-4"><i class="bi bi-shop"></i> 谷粒商城</h5>
|
||||
<p>谷粒商城是一个基于Spring
|
||||
Cloud的分布式电商平台,商品模块是系统的核心模块之一,提供完整的商品管理解决方案。</p>
|
||||
</div>
|
||||
<div class="col-md-2 mb-4">
|
||||
<h5 class="mb-4">快速链接</h5>
|
||||
<ul class="list-unstyled footer-links">
|
||||
<li class="mb-2"><a href="#">首页</a></li>
|
||||
<li class="mb-2"><a href="#">商品</a></li>
|
||||
<li class="mb-2"><a href="#">分类</a></li>
|
||||
<li class="mb-2"><a href="#">品牌</a></li>
|
||||
<li class="mb-2"><a href="#">API文档</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<h5 class="mb-4">联系我们</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="bi bi-envelope me-2"></i> contact@gulimall.com</li>
|
||||
<li class="mb-2"><i class="bi bi-telephone me-2"></i> 400-123-4567</li>
|
||||
<li class="mb-2"><i class="bi bi-geo-alt me-2"></i> 北京市海淀区谷粒大厦</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<h5 class="mb-4">关注我们</h5>
|
||||
<div class="mb-3">
|
||||
<a class="social-icon" href="#"><i class="bi bi-wechat"></i></a>
|
||||
<a class="social-icon" href="#"><i class="bi bi-weibo"></i></a>
|
||||
<a class="social-icon" href="#"><i class="bi bi-github"></i></a>
|
||||
<a class="social-icon" href="#"><i class="bi bi-linkedin"></i></a>
|
||||
</div>
|
||||
<p>扫码关注公众号</p>
|
||||
<img alt="公众号二维码" class="img-fluid" src="https://via.placeholder.com/100x100?text=公众号二维码"
|
||||
style="max-width: 100px;">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-4 mb-4" style="border-color: rgba(255,255,255,0.1);">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">© 2023 谷粒商城 版权所有 | 京ICP备12345678号</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// 简单的交互效果
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 导航栏滚动效果
|
||||
window.addEventListener('scroll', function () {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('shadow');
|
||||
navbar.style.backgroundColor = 'rgba(255,255,255,0.95)';
|
||||
} else {
|
||||
navbar.classList.remove('shadow');
|
||||
navbar.style.backgroundColor = 'white';
|
||||
}
|
||||
});
|
||||
|
||||
// 平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue