秒杀系统 - 秒杀功能页面开发

最新推荐文章于 2024-08-08 15:02:09 发布

洛阳八中我最棒

最新推荐文章于 2024-08-08 15:02:09 发布

阅读量781

点赞数

分类专栏：秒杀系统

本文链接：https://blog.csdn.net/weixin_44532671/article/details/118740201

版权

本文详细介绍了从用户登录到商品秒杀再到订单详情的完整流程，包括登录页面、商品列表、商品详情和订单详情的交互。通过实际代码和请求响应，展示了秒杀系统的业务逻辑。

摘要由CSDN通过智能技术生成

文章目录

概述
- 说明
- 页面展示
实现

概述

说明

实现了用户从点登录到点击产品，到详情页，进而下订单减库存的整个流程。
为了展示好业务逻辑，把不必要的样式去掉了。

页面展示

0.登录页
在这里插入图片描述
1.商品列表

2.商品详情

3.订单详情

实现

登录页面

之前已经写过:
https://blog.csdn.net/weixin_44532671/article/details/117368762

商品列表

登录按钮请求如下（href为to_list），前端请求：

$.ajax({
   
    url: "/login/do_login",
    type: "POST",
    data:{
   
        mobile:$("#mobile").val(),
        var inputPass = $("#password").val();//其实应该加密处理一下，简单起见这样写。
    },
    success:function(data){
   
        layer.closeAll();
        if(data.code == 0){
    
            window.location.href="/to_list";
        } 
    },
    error:function(){
   
        layer.closeAll();
    }
});

后端响应：接收参数，查询数据，跳转到goods_list页面。

	@RequestMapping("/to_list")
	public String toList(Model model,MiaoshaUser miaoshaUser
	){
   
		List<GoodsVo> list = goodsService.listGoodsVo();
		model.addAttribute("user",miaoshaUser); 
		model.addAttribute("goodsList",list);
		return "goods_list";
	}

goods_list的页面如下：

<body>
<p th:text = "'你好,'+${user.nickname}"></p> 
<div >
  <div >秒杀商品列表</div>
  <table class="table" id="goodslist">
  	<tr><td>商品名称</td><td>商品图片</td><td>商品原价</td><td>秒杀价</td><td>库存数量</td><td>详情</td></tr>
  	<tr  th:each="goods,goodsStat : ${goodsList}">
                <td th:text="${goods.goodsName}"></td>
                <td ><img th:src="@{${goods.goodsImg}}" width="100"<