JavaDemo
/
vue-java-tutorials
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
vue-java-tutorials/mq-demo/src/main/resources/templates/index.html

580 lines
23 KiB
HTML
Raw Normal View History

:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>RabbitMQ学习项目 - SpringBoot实践</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: #FF6600;
--secondary-color: #663300;
--light-color: #FFF8F0;
--dark-color: #333333;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
color: var(--dark-color);
}
.hero-section {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 5rem 0;
margin-bottom: 3rem;
border-radius: 0 0 20px 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.nav-pills .nav-link.active {
background-color: var(--primary-color);
}
.nav-pills .nav-link {
color: var(--dark-color);
}
.feature-card {
border: none;
border-radius: 15px;
transition: transform 0.3s, box-shadow 0.3s;
margin-bottom: 20px;
height: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.feature-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.rabbitmq-logo {
max-height: 80px;
margin-right: 15px;
}
.code-example {
background-color: #f5f5f5;
border-radius: 10px;
padding: 15px;
font-family: 'Courier New', Courier, monospace;
}
.diagram-container {
background-color: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin: 20px 0;
}
footer {
background-color: var(--dark-color);
color: white;
padding: 3rem 0;
margin-top: 3rem;
}
.social-icon {
font-size: 1.5rem;
margin-right: 15px;
color: white;
transition: color 0.3s;
}
.social-icon:hover {
color: var(--primary-color);
}
.progress-bar {
background-color: var(--primary-color);
}
.topic-badge {
background-color: var(--light-color);
color: var(--primary-color);
margin-right: 8px;
margin-bottom: 8px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow-sm">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img alt="RabbitMQ Logo" class="rabbitmq-logo"
src="https://www.rabbitmq.com/img/rabbitmq-logo-with-name.svg">
<span class="fs-4 fw-bold" style="color: var(--primary-color);">RabbitMQ学习项目</span>
</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="#home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples">示例</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resources">资源</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">关于</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<section class="hero-section" id="home">
<div class="container text-center">
<h1 class="display-3 fw-bold mb-4">掌握RabbitMQ与Spring Boot</h1>
<p class="lead fs-4 mb-5">通过实践项目学习消息队列的核心概念与应用场景</p>
<div class="d-flex justify-content-center gap-3">
<a class="btn btn-light btn-lg px-4 py-2 fw-bold" href="#features">探索项目 <i class="bi bi-arrow-down"></i></a>
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
<a class="btn btn-outline-light btn-lg px-4 py-2 fw-bold"
href="https://gitee.com/BunnyBoss/vue-tutorials_drools-tutorials/tree/master/mq-demo"
:construction: 生产者端消息确认机制开始...
2025-05-18 22:47:05 +08:00
target="_blank">Gitee代码 <i
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
class="bi bi-git"></i></a>
</div>
</div>
</section>
<!-- 项目介绍 -->
<section class="container mb-5">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="fw-bold mb-4">关于这个学习项目</h2>
<p class="lead">这是一个使用Spring
Boot和RabbitMQ构建的综合性学习项目，旨在帮助开发者掌握消息队列的核心概念和实践应用。</p>
<p>项目涵盖了RabbitMQ的所有主要功能，从基础的消息发送/接收到高级主题如死信队列、延迟消息和集群配置。</p>
<div class="mt-4">
<span class="badge rounded-pill topic-badge fs-6 p-2"><i class="bi bi-check-circle me-1"></i> Spring Boot集成</span>
<span class="badge rounded-pill topic-badge fs-6 p-2"><i class="bi bi-check-circle me-1"></i> 多种交换器类型</span>
<span class="badge rounded-pill topic-badge fs-6 p-2"><i class="bi bi-check-circle me-1"></i> 消息确认机制</span>
<span class="badge rounded-pill topic-badge fs-6 p-2"><i
class="bi bi-check-circle me-1"></i> 死信队列</span>
<span class="badge rounded-pill topic-badge fs-6 p-2"><i
class="bi bi-check-circle me-1"></i> 延迟消息</span>
<span class="badge rounded-pill topic-badge fs-6 p-2"><i
class="bi bi-check-circle me-1"></i> 集群配置</span>
</div>
</div>
<div class="col-lg-6">
<img alt="RabbitMQ架构图" class="img-fluid rounded shadow"
src="https://www.rabbitmq.com/img/rabbitmq-logo-with-name.svg">
</div>
</div>
</section>
<!-- 功能特性 -->
<section class="container mb-5 py-5" id="features">
<h2 class="text-center fw-bold mb-5">项目核心功能</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card feature-card h-100 p-4">
<div class="text-center">
<i class="bi bi-send feature-icon"></i>
<h4>基本消息队列</h4>
</div>
<div class="card-body">
<p>实现简单的生产者-消费者模型，学习RabbitMQ最基本的工作方式。</p>
<ul>
<li>点对点通信</li>
<li>消息持久化</li>
<li>手动确认机制</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card feature-card h-100 p-4">
<div class="text-center">
<i class="bi bi-shuffle feature-icon"></i>
<h4>交换器类型</h4>
</div>
<div class="card-body">
<p>探索RabbitMQ的四种交换器类型及其应用场景。</p>
<ul>
<li>Direct交换器</li>
<li>Fanout交换器</li>
<li>Topic交换器</li>
<li>Headers交换器</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card feature-card h-100 p-4">
<div class="text-center">
<i class="bi bi-clock-history feature-icon"></i>
<h4>延迟队列</h4>
</div>
<div class="card-body">
<p>实现延迟消息处理，适用于定时任务和延迟执行场景。</p>
<ul>
<li>TTL设置</li>
<li>死信队列应用</li>
<li>插件实现方式</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card feature-card h-100 p-4">
<div class="text-center">
<i class="bi bi-arrow-repeat feature-icon"></i>
<h4>消息重试</h4>
</div>
<div class="card-body">
<p>处理消费失败的消息，实现可靠的消息处理机制。</p>
<ul>
<li>重试策略</li>
<li>最大重试次数</li>
<li>死信处理</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card feature-card h-100 p-4">
<div class="text-center">
<i class="bi bi-diagram-3 feature-icon"></i>
<h4>集群配置</h4>
</div>
<div class="card-body">
<p>搭建RabbitMQ集群，实现高可用和负载均衡。</p>
<ul>
<li>镜像队列</li>
<li>节点管理</li>
<li>HA策略</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card feature-card h-100 p-4">
<div class="text-center">
<i class="bi bi-shield-check feature-icon"></i>
<h4>安全配置</h4>
</div>
<div class="card-body">
<p>实现RabbitMQ的安全访问控制。</p>
<ul>
<li>用户权限管理</li>
<li>TLS加密</li>
<li>防火墙配置</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 代码示例 -->
<section class="container mb-5 py-5 bg-light rounded-3" id="examples">
<h2 class="text-center fw-bold mb-5">代码示例</h2>
<div class="row mb-5">
<div class="col-lg-6">
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
<h4><i class="bi bi-send me-2"></i>生产者示例</h4>
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
<div class="code-example mt-3">
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
<pre><code>
@Autowired
private RabbitTemplate rabbitTemplate;
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
/* 测试发送消息 */
@Test
void publishTest() {
String exchangeDirect = RabbitMQMessageListenerConstants.EXCHANGE_DIRECT;
String routingKeyDirect = RabbitMQMessageListenerConstants.ROUTING_KEY_DIRECT;
rabbitTemplate.convertAndSend(exchangeDirect, routingKeyDirect, "你好小球球~~~");
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
Bunny bunny = Bunny.builder().rabbitName("Bunny").age(2).build();
rabbitTemplate.convertAndSend(exchangeDirect, routingKeyDirect, JSON.toJSONString(bunny));
}
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
}</code></pre>
</div>
</div>
<div class="col-lg-6">
<h4><i class="bi bi-receipt me-2"></i>消费者示例</h4>
<div class="code-example mt-3">
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
<pre><code>
@RabbitListener(bindings = @QueueBinding(
exchange = @Exchange(value = EXCHANGE_DIRECT),
value = @Queue(value = QUEUE_NAME, durable = "true"),
key = ROUTING_KEY_DIRECT
)
)
public void processMessage(String dataString, Message message, Channel channel) {
System.out.println("消费端接受消息：" + dataString);
}
</code></pre>
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
</div>
</div>
</div>
<div class="text-center mt-4">
:memo: 生产者端消息确认机制-RabbitMQ配置-备份交换机-文档
2025-05-19 10:55:52 +08:00
<a class="btn btn-primary btn-lg"
href="https://gitee.com/BunnyBoss/vue-tutorials_drools-tutorials/tree/master/mq-demo"
:construction: 生产者端消息确认机制开始...
2025-05-18 22:47:05 +08:00
target="_blank">
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
<i class="bi bi-git me-2"></i>查看完整代码
</a>
</div>
</section>
<!-- RabbitMQ架构图 -->
<section class="container mb-5 py-5">
<h2 class="text-center fw-bold mb-5">RabbitMQ架构概览</h2>
<div class="diagram-container">
<img alt="RabbitMQ架构图" class="img-fluid rounded"
:sparkles: 惰性队列说明;
2025-05-19 17:16:57 +08:00
src="https://www.rabbitmq.com/img/rabbitmq-logo-with-name.svg">
:wrench: 添加环境配置
2025-05-18 22:30:32 +08:00
<div class="row mt-4">
<div class="col-md-3">
<div class="text-center p-3">
<i class="bi bi-box-seam fs-1 text-primary"></i>
<h5>生产者</h5>
<p>发送消息到交换器</p>
</div>
</div>
<div class="col-md-3">
<div class="text-center p-3">
<i class="bi bi-shuffle fs-1 text-primary"></i>
<h5>交换器</h5>
<p>路由消息到队列</p>
</div>
</div>
<div class="col-md-3">
<div class="text-center p-3">
<i class="bi bi-list-ul fs-1 text-primary"></i>
<h5>队列</h5>
<p>存储待消费消息</p>
</div>
</div>
<div class="col-md-3">
<div class="text-center p-3">
<i class="bi bi-download fs-1 text-primary"></i>
<h5>消费者</h5>
<p>从队列获取消息</p>
</div>
</div>
</div>
</div>
</section>
<!-- 学习资源 -->
<section class="container mb-5 py-5" id="resources">
<h2 class="text-center fw-bold mb-5">学习资源</h2>
<div class="row">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header bg-primary text-white">
<h5><i class="bi bi-book me-2"></i>推荐书籍</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
《RabbitMQ实战指南》
<span class="badge bg-primary rounded-pill">中文</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
《RabbitMQ in Depth》
<span class="badge bg-success rounded-pill">英文</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
《Spring Boot与RabbitMQ整合实践》
<span class="badge bg-primary rounded-pill">中文</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header bg-success text-white">
<h5><i class="bi bi-link-45deg me-2"></i>在线资源</h5>
</div>
<div class="card-body">
<div class="list-group">
<a class="list-group-item list-group-item-action"
href="https://www.rabbitmq.com/documentation.html"
target="_blank">
官方文档 <i class="bi bi-box-arrow-up-right ms-2"></i>
</a>
<a class="list-group-item list-group-item-action"
href="https://www.rabbitmq.com/tutorials/tutorial-one-java.html"
target="_blank">
Java教程 <i class="bi bi-box-arrow-up-right ms-2"></i>
</a>
<a class="list-group-item list-group-item-action"
href="https://spring.io/guides/gs/messaging-rabbitmq/"
target="_blank">
Spring官方指南 <i class="bi bi-box-arrow-up-right ms-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header bg-info text-white">
<h5><i class="bi bi-youtube me-2"></i>视频教程</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 mb-3">
<div class="ratio ratio-16x9">
<iframe allowfullscreen
src="https://www.bilibili.com/video/BV1sw4m1U7Qe/?spm_id_from=333.1391.0.0&p=8"></iframe>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="ratio ratio-16x9">
<iframe allowfullscreen
src="https://www.bilibili.com/video/BV1mN4y1Z7t9/?spm_id_from=333.1387.favlist.content.click"></iframe>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="ratio ratio-16x9">
<iframe allowfullscreen
src="https://www.bilibili.com/video/BV1cb4y1o7zz/?spm_id_from=333.337.search-card.all.click&vd_source=d42b5b664efb958be39eef8ee1196a7e"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 关于项目 -->
<section class="container mb-5 py-5" id="about">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="fw-bold mb-4">关于这个项目</h2>
<p class="lead">这个RabbitMQ学习项目旨在通过实践帮助开发者掌握消息队列的核心概念和Spring Boot集成。</p>
<p>项目包含了从基础到高级的各种RabbitMQ特性实现，每个功能模块都有详细的文档说明和代码示例，适合学习和参考。</p>
<div class="mt-5">
<h4 class="mb-3">技术栈</h4>
<div class="d-flex flex-wrap justify-content-center gap-3">
<span class="badge bg-primary p-3 fs-6">Spring Boot 3.x</span>
<span class="badge bg-secondary p-3 fs-6">RabbitMQ 3.11</span>
<span class="badge bg-success p-3 fs-6">Java 17</span>
<span class="badge bg-danger p-3 fs-6">Docker</span>
<span class="badge bg-warning text-dark p-3 fs-6">Maven</span>
<span class="badge bg-info text-dark p-3 fs-6">Spring AMQP</span>
</div>
</div>
<div class="mt-5">
<h4 class="mb-3">项目进度</h4>
<div class="progress mb-3" style="height: 25px;">
<div aria-valuemax="100" aria-valuemin="0"
aria-valuenow="85" class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" style="width: 85%;">基础功能 85%
</div>
</div>
<div class="progress mb-3" style="height: 25px;">
<div aria-valuemax="100" aria-valuemin="0"
aria-valuenow="70" class="progress-bar progress-bar-striped progress-bar-animated bg-success"
role="progressbar" style="width: 70%;">高级特性 70%
</div>
</div>
<div class="progress mb-3" style="height: 25px;">
<div aria-valuemax="100" aria-valuemin="0"
aria-valuenow="60" class="progress-bar progress-bar-striped progress-bar-animated bg-info"
role="progressbar" style="width: 60%;">环境配置 60%
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 mb-4 mb-md-0">
<h5>RabbitMQ学习项目</h5>
<p>一个使用Spring Boot和RabbitMQ构建的综合性学习项目，帮助开发者掌握消息队列的核心概念和实践应用。</p>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<h5>快速链接</h5>
<ul class="list-unstyled">
<li><a class="text-white" href="#home">首页</a></li>
<li><a class="text-white" href="#features">功能特性</a></li>
<li><a class="text-white" href="#examples">代码示例</a></li>
<li><a class="text-white" href="#resources">学习资源</a></li>
<li><a class="text-white" href="#about">关于项目</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>联系我</h5>
<p>如有任何问题或建议，欢迎联系：</p>
<div>
<a class="social-icon" href="#"><i class="bi bi-github"></i></a>
<a class="social-icon" href="#"><i class="bi bi-twitter"></i></a>
<a class="social-icon" href="#"><i class="bi bi-linkedin"></i></a>
<a class="social-icon" href="#"><i class="bi bi-envelope"></i></a>
</div>
</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 RabbitMQ学习项目. 保留所有权利.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 导航栏高亮
window.addEventListener('scroll', function () {
const sections = document.querySelectorAll('section');
const navItems = document.querySelectorAll('.nav-link');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop - 300)) {
current = section.getAttribute('id');
}
});
navItems.forEach(item => {
item.classList.remove('active');
if (item.getAttribute('href') === '#' + current) {
item.classList.add('active');
}
});
});
</script>
</body>
</html>