【二】RabbitMQ基础篇（延迟队列和死信队列实战）

本章将通过学习rabbitMQ基础中的延时队列和死信队列，然后写一个demo实现一个小例子，在商城购物时，先下单创建订单记录，然后可以选择进行立即支付或者不支付，若30秒后不支付，则删除订单。下面针对这个例子进行学习。

首先展示一下最终效果，并进行效果讲解，如下所示：

正常购买流程

描述：点击购买，创建订单记录，在倒计时内支付成功的话，正常完成购买流程。

未支付流程

描述：点击购买，创建订单记录，在倒计时内未支付成功的话，删除该笔订单。

下面为了满足上述效果，进行实现。

一、分析例子

为了满足上面的效果，可以通过很多方法实现，最简单的就是定时任务，创建一个定时任务，定时去请求数据，查看状态为未支付的订单，并删除。当然还可以通过redis或者其他办法，本章当然是通过RabbitMQ的方式实现，将通过延时队列和死信队列实现，逻辑关系如下：

所以需要创建如下几个东西：

延时交换机
延时队列
延时队列绑定关系
死信交换机
死信队列
死信队列绑定关系
消费者端死信队列监听器
生产者端创建订单接口（内含发送消息到延时队列）
生产者端支付订单接口

分析完毕，下面开整。

建表语句

CREATE TABLE `dingdan` (
  `id` varchar(255) COLLATE utf8_bin NOT NULL,
  `name` varchar(255) COLLATE utf8_bin DEFAULT NULL,
  `type` int DEFAULT NULL COMMENT '0：未支付，1：已支付，默认0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COLLATE=utf8_bin;

二、编写前端代码

上面测试效果是随便整的，过于简便，代码我直接贴出来：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单</title>
	</head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	
	<body>
		<div style="width: 100%;height: 300px;display: flex;justify-content: center;margin-top: 200px;">
			<div class="card" style="width: 15rem;">
			  <img class="card-img-top" style="" src="./img/apple.jpg" alt="Card image cap">
			  <div class="card-body">
			    <h5 class="card-title">苹果售价：100￥</h5>
			    <a onclick="fun1()" style="margin-top: 20px;margin-left: 70px;" class="btn btn-primary">购买</a>
			  </div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		function fun1(){
			console.log("点击");
				
			$.ajax({
				url:"http://localhost:7778/dingdanController/insertDingdan",
				data:null,
				type:"post",
				dataType: "json",
				success: function(data) { 
					console.log("返回值："+data.id);
					window.location.href="支付.html?id="+data.id
				}
			});
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付</title>
	</head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	
	<body>
		<div style="width: 100px;height: 30px;text-align: center;line-height: 30px;margin-top: 100px;margin-left: 50%;background-color: aliceblue;">
			支付倒计时：
		</div>
		<div id="time" style="width: 100px;height: 30px;text-align: center;line-height: 30px;margin-top: 10px;margin-left: 50%;background-color: aliceblue;">
			
		</div>
		<button onclick="fun1()" style="margin-top: 10px;margin-left: 50%;" type="button" class="btn btn-primary">确定支付</button>
	</body>
	<script type="text/javascript">
		
		var id = getid('id');
		console.log(id);
		// alert(id);
		
		var i=15;
		$("#time").html(i);
		var time1 =setInterval(function(){
			if(i>0){
				i=i-1;
				$("#time").html(i);
			}else{
				clearInterval(time1);
			}
		},1000)
		
		var time2 = setInterval(function(){
			var i = $("#time").html();
			if(i==0){
				window.location.href="订单.html"
			}
		},1000)
		
		//支付
		function fun1(){
			alert("支付成功");
			clearInterval(time1);
			clearInterval(time2);
			$.ajax({
				url:"http://localhost:7778/dingdanController/pay",
				data:{id:id},
				type:"post",
				dataType: "json",
				success: function(data) { 
					
				}
			});
			
		}
		//取值
		function getid(names, urls) {
			urls = urls || window.location.href;
			urls && urls.indexOf("?") > -1 ? urls = urls
					.substring(urls.indexOf("?") + 1) : "";
			var reg = new RegExp("(^|&)" + names + "=([^&]*)(&|$)", "i");
			var r = urls ? urls.match(reg) : window.location.search.substr(1)
					.match(reg);
			if (r != null && r[2] != "")
				return unescape(r[2]);
			return null;
		};
	</script>
</html>

用的ajax和bootstrap。