（11）SprintBoot 2.X 页面优化技术（页面静态化，前后端分离）（二）秒杀静态化+订单详情静态化

最新推荐文章于 2024-08-17 09:28:43 发布

HenkelQAQ

最新推荐文章于 2024-08-17 09:28:43 发布

阅读量263

点赞数

分类专栏： SpringBoot SpringBoot实战 Java框架

本文链接：https://blog.csdn.net/qq_40776491/article/details/98470586

版权

SpringBoot 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

Java框架

17 篇文章 0 订阅

订阅专栏

SpringBoot实战

14 篇文章 2 订阅

订阅专栏

（11）SprintBoot 2.X 页面优化技术（页面静态化，前后端分离）（二）秒杀静态化+订单详情静态化

1.秒杀静态化

1.1 改造商品详情页面的点击秒杀的业务逻辑，我们调用js方法实现ajax异步发送消息，如果秒杀成功，那么直接由客户端去跳转详情页面

<!--form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
<input type="hidden" name="goodsId"  id="goodsId" />
</form-->

< button class="btn btn-primary" type="button" id="buyButton"οnclick="getMiaoshaPath()">立即秒杀</button>

function doMiaosha(path){
	$.ajax({
		url:"/miaosha/"+path+"/do_miaosha",
		type:"POST",
		data:{
			goodsId:$("#goodsId").val()
		},
		success:function(data){
			if(data.code == 0){
				//window.location.href="/order_detail.htm?orderId="+data.data.id;
				getMiaoshaResult($("#goodsId").val());
			}else{
				layer.msg(data.msg);
			}
		},
		error:function(){
			layer.msg("客户端请求有误");
		}
	});
}

1.2 修改MiaoshaController，通过json返回给我们的前台，秒杀成功则返回订单信息，不成功返回相应的数据信息

	@RequestMapping(value="/do_miaosha",method=RequestMethod.POST)
	@ResponseBody
	public Result<OrderInfo> doMiaosha(Model model,MiaoshaUser user,@RequestParam(value="goodsId",defaultValue="0") long goodsId) {
		model.addAttribute("user", user);
		if(user==null){
			return Result.error(CodeMsg.SESSION_ERROR);
		}
		GoodsVo goodsvo=goodsService.getGoodsVoByGoodsId(goodsId);
		//判断商品库存，库存大于0，才进行操作
		int  stockcount=goodsvo.getStockCount();		
		if(stockcount<=0) {//失败			
			return Result.error(CodeMsg.MIAOSHA_OVER_ERROR);
		}
		//判断是否重复秒杀 
		MiaoshaOrder order=orderService.getMiaoshaOrderByUserIdAndGoodsId(user.getId(),goodsId);
		if(order!=null) {
			return Result.error(CodeMsg.REPEATE_MIAOSHA);
		}
		//可以秒杀，原子操作：1.库存减1，2.下订单，3.写入秒杀订单
		OrderInfo orderinfo=miaoshaService.miaosha(user,goodsvo);
		//如果秒杀成功，通过json返回响应的订单详情数据。
		model.addAttribute("orderinfo", orderinfo);
		model.addAttribute("goods", goodsvo);
		return Result.success(orderinfo);
	}

2. 订单详情静态化

当秒杀成功之后，由客户端直接跳转至静态订单详情页面，与之前一样，初始化执行方法getOrderDetail，发起ajax请求获取数据后通过render（）来渲染我们的静态页面

2.1 order_detail.htm

<!DOCTYPE HTML>
<html>
<head>
    <title>订单详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="/layer/layer.js"></script>
    <!-- md5.js -->
    <script type="text/javascript" src="/js/md5.min.js"></script>
    <!-- common.js -->
    <script type="text/javascript" src="/js/common.js"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀订单详情</div>
    <table class="table" id="goodslist">
        <tr>
            <td>商品名称</td>
            <td colspan="3" id="goodsName"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="2"><img  id="goodsImg" width="200" height="200" /></td>
        </tr>
        <tr>
            <td>订单价格</td>
            <td colspan="2"  id="orderPrice"></td>
        </tr>
        <tr>
            <td>下单时间</td>
            <td id="createDate" colspan="2"></td>
        </tr>
        <tr>
            <td>订单状态</td>
            <td id="orderStatus">
            </td>
            <td>
                <button class="btn btn-primary btn-block" type="submit" id="payButton">立即支付</button>
            </td>
        </tr>
        <tr>
            <td>收货人</td>
            <td colspan="2">XXX  18812341234</td>
        </tr>
        <tr>
            <td>收货地址</td>
            <td colspan="2">广东深圳</td>
        </tr>
    </table>
</div>
</body>
</html>
<script>
    function render(detail){
        var goods = detail.goods;
        var order = detail.order;
        $("#goodsName").text(goods.goodsName);
        $("#goodsImg").attr("src", goods.goodsImg);
        $("#orderPrice").text(order.goodsPrice);
        $("#createDate").text(new Date(order.createDate).format("yyyy-MM-dd hh:mm:ss"));
        var status = "";
        if(order.status == 0){
            status = "未支付"
        }else if(order.status == 1){
            status = "待发货";
        }else if(order.status == 2){
            status = "已发货";
        }else if(order.status == 3){
            status = "已收货";
        }else if(order.status == 4){
            status = "已退款";
        }else {
            status = "已完成";
        }
        $("#orderStatus").text(status);
    }

    $(function(){
        getOrderDetail();
    })

    function getOrderDetail(){
        var orderId = g_getQueryString("orderId");
        $.ajax({
            url:"/order/detail",
            type:"GET",
            data:{
                orderId:orderId
            },
            success:function(data){
                if(data.code == 0){
                    render(data.data);
                }else{
                    layer.msg(data.msg);
                }
            },
            error:function(){
                layer.msg("客户端请求有误");
            }
        });
    }
</script>

2.2 OrderController

通过订单id查询订单详情，如果查询成功则返回订单详情

@Controller
@RequestMapping("/order")
public class OrderController {
    @Autowired
    MiaoshaUserService userService;

    @Autowired
    RedisService redisService;

    @Autowired
    OrderService orderService;

    @Autowired
    GoodsService goodsService;

    @RequestMapping("/detail")
    @ResponseBody
    public Result<OrderDetailVo> info(Model model, MiaoshaUser user,
                                      @RequestParam("orderId") long orderId) {
        if(user == null) {
            return Result.error(CodeMsg.SESSION_ERROR);
        }
        OrderInfo order = orderService.getOrderById(orderId);
        if(order == null) {
            return Result.error(CodeMsg.ORDER_NOT_EXIST);
        }
        long goodsId = order.getGoodsId();
        GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);
        OrderDetailVo vo = new OrderDetailVo();
        vo.setOrder(order);
        vo.setGoods(goods);
        return Result.success(vo);
    }
}