当前位置： 首页 > news >正文

秒杀基本功能开发（显示商品列表和商品详情）

news 2025/6/30 5:43:18

文章目录

    • 1.数据库表设计
        • 1.商品表
        • 2.秒杀商品表
        • 3.修改一下秒杀时间为今天到明天
    • 2.pojo和vo编写
        • 1.com/sxs/seckill/pojo/Goods.java
        • 2.com/sxs/seckill/pojo/SeckillGoods.java
        • 3.com/sxs/seckill/vo/GoodsVo.java
    • 3.Mapper编写
        • 1.GoodsMapper.java
        • 2.GoodsMapper.xml
        • 3.分别编写SeckillGoodsMapper.java和SeckillGoodsMapper.xml
    • 4.Service编写
        • 1.GoodsService.java
        • 2.GoodsServiceImpl.java
        • 3.分别编写SeckillGoodsService.java和SeckillGoodsServiceImpl.java
    • 5.Controller编写
        • 1.GoodsController.java
    • 6.展示商品列表页
        • 1.goodsList.html
        • 2.测试使用
          • 1.报错，GoodsService没被注入
          • 2.加一下Service注解即可
          • 3.登录成功
          • 4.访问 http://localhost:9092/seckill/goods/toList 没有图片
          • 5.把图片放到imgs下即可
          • 6.重新访问
        • 3.调整templates/login.html 登录成功后直接跳转到商品列表页
          • 1.新增超链接
          • 2.登录成功后自动跳转
    • 7.商品详情页
        • 1.Mapper编写 根据商品id获取商品详情
          • 1.GoodsMapper.java
          • 2.GoodsMapper.xml
        • 2.Service编写
          • 1.GoodsService.java
          • 2.GoodsServiceImpl.java
        • 3.Controller编写
          • GoodsController.java
        • 4.前端界面编写
          • 1.goodsList.html 修改请求（使用环境变量+资源路径的形式）
          • 2.goodsDetail.html 商品详情页
        • 5.测试
          • 1.点击查看详情
          • 2.数据正常展示

1.数据库表设计

1.商品表
use seckill;DROP TABLE IF EXISTS `t_goods`;
CREATE TABLE `t_goods`
(`id`           BIGINT(20)  NOT NULL AUTO_INCREMENT COMMENT '商品 id',`goods_name`   VARCHAR(16) not null DEFAULT '',`goods_title`  VARCHAR(64) not null DEFAULT '' COMMENT '商品标题',`goods_img`    VARCHAR(64) not null DEFAULT '' COMMENT '商品图片',`goods_detail` LONGTEXT    not null COMMENT '商品详情',`goods_price`  DECIMAL(10, 2)       DEFAULT '0.00' COMMENT '商品价格',`goods_stock`  INT(11)              DEFAULT '0' COMMENT '商品库存',PRIMARY KEY (`id`)
) ENGINE = INNODBAUTO_INCREMENT = 3DEFAULT CHARSET = utf8mb4;INSERT INTO `t_goods`
VALUES ('1', '整体厨房设计-套件', '整体厨房设计-套件', '/imgs/kitchen.jpg', '整体厨房设计-套件', '15266.00', '100');
INSERT INTO `t_goods`
VALUES ('2', '学习书桌-套件', '学习书桌-套件', '/imgs/desk.jpg', '学习书桌-套件', '5690.00', '100');select * from t_goods;
2.秒杀商品表
use seckill;DROP TABLE IF EXISTS `t_seckill_goods`;
CREATE TABLE `t_seckill_goods`
(`id`            BIGINT(20) NOT NULL AUTO_INCREMENT,`goods_id`      BIGINT(20)     DEFAULT 0,`seckill_price` DECIMAL(10, 2) DEFAULT '0.00',`stock_count`   INT(10)        DEFAULT 0,`start_date`    DATETIME       DEFAULT NULL,`end_date`      DATETIME       DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE = INNODBAUTO_INCREMENT = 3DEFAULT CHARSET = utf8mb4;INSERT INTO `t_seckill_goods`
VALUES ('1', '1', '5266.00', '10', '2022-11-18 19:36:00', '2022-11-19 09:00:00');
INSERT INTO `t_seckill_goods`
VALUES ('2', '2', '690.00', '10', '2022-11-18 08:00:00', '2022-11-19 09:00:00');select * from t_seckill_goods;
3.修改一下秒杀时间为今天到明天

image-20240507154440938

2.pojo和vo编写

1.com/sxs/seckill/pojo/Goods.java
package com.sxs.seckill.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;import java.io.Serializable;
import java.math.BigDecimal;/*** Description:** @Author sun* @Create 2024/5/7 15:47* @Version 1.0*/
@Data
@TableName("t_goods")
public class Goods implements Serializable {private static final long serialVersionUID = 1L;/*** 商品 id*/@TableId(value = "id", type = IdType.AUTO)private Long id;private String goodsName;/*** 商品标题*/private String goodsTitle;/*** 商品图片*/private String goodsImg;/*** 商品详情*/private String goodsDetail;/*** 商品价格*/private BigDecimal goodsPrice;/*** 商品库存*/private Integer goodsStock;
}
2.com/sxs/seckill/pojo/SeckillGoods.java
package com.sxs.seckill.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;/*** Description:** @Author sun* @Create 2024/5/7 15:48* @Version 1.0*/
@Data
@TableName("t_seckill_goods")
public class SeckillGoods implements Serializable {private static final long serialVersionUID = 1L;@TableId(value = "id", type = IdType.AUTO)private Long id;private Long goodsId;private BigDecimal seckillPrice;private Integer stockCount;private Date startDate;private Date endDate;
}
3.com/sxs/seckill/vo/GoodsVo.java
package com.sxs.seckill.vo;import com.sxs.seckill.pojo.Goods;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.math.BigDecimal;
import java.util.Date;/*** Description:** @Author sun* @Create 2024/5/7 16:05* @Version 1.0*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class GoodsVo extends Goods {private BigDecimal seckillPrice;private Integer stockCount;private Date startDate;private Date endDate;
}

3.Mapper编写

1.GoodsMapper.java
package com.sxs.seckill.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sxs.seckill.pojo.Goods;
import com.sxs.seckill.vo.GoodsVo;
import org.apache.ibatis.annotations.Mapper;import java.util.List;/*** Description:** @Author sun* @Create 2024/5/7 17:00* @Version 1.0*/
@Mapper
public interface GoodsMapper extends BaseMapper<Goods> {/*** 获取商品列表* @return*/List<GoodsVo> findGoodsVo();
}
2.GoodsMapper.xml
  • resultType为GoodsVo，则可以自动按照驼峰命名法进行匹配
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.sxs.seckill.mapper.GoodsMapper"><select id="findGoodsVo" resultType="com.sxs.seckill.vo.GoodsVo">select g.id,g.goods_name,g.goods_title,g.goods_img,g.goods_detail,g.goods_price,g.goods_stock,t_seckill_goods.seckill_price,t_seckill_goods.stock_count,t_seckill_goods.start_date,t_seckill_goods.end_datefrom t_goods gleft join t_seckill_goods on g.id = t_seckill_goods.goods_id;</select>
</mapper>
3.分别编写SeckillGoodsMapper.java和SeckillGoodsMapper.xml

4.Service编写

1.GoodsService.java
package com.sxs.seckill.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.sxs.seckill.pojo.Goods;
import com.sxs.seckill.vo.GoodsVo;import java.util.List;/*** Description:** @Author sun* @Create 2024/5/7 17:23* @Version 1.0*/
public interface GoodsService extends IService<Goods> {/** 查询商品列表*/List<GoodsVo> findGoodsVo();
}
2.GoodsServiceImpl.java
package com.sxs.seckill.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.sxs.seckill.mapper.GoodsMapper;
import com.sxs.seckill.pojo.Goods;
import com.sxs.seckill.service.GoodsService;
import com.sxs.seckill.vo.GoodsVo;import javax.annotation.Resource;
import java.util.List;/*** Description:** @Author sun* @Create 2024/5/7 17:24* @Version 1.0*/
public class GoodsServiceImpl extends ServiceImpl<GoodsMapper, Goods> implements GoodsService {@Resourceprivate GoodsMapper goodsMapper;@Overridepublic List<GoodsVo> findGoodsVo() {return goodsMapper.findGoodsVo();}
}
3.分别编写SeckillGoodsService.java和SeckillGoodsServiceImpl.java

5.Controller编写

1.GoodsController.java

image-20240508093009972

6.展示商品列表页

1.goodsList.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>商品列表</title><!-- bootstrap --><link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/><script type="text/javascript" th:src="@{/js/jquery.min.js}"></script><!-- jquery-validator --><script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script><script type="text/javascript"th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script><!-- layer --><script type="text/javascript" th:src="@{/layer/layer.js}"></script><!-- md5.js --><script type="text/javascript" th:src="@{/js/md5.min.js}"></script><!-- common.js --><script type="text/javascript" th:src="@{/js/common.js}"></script><style>* {margin: 0;padding: 0;font-family: "Open Sans", sans-serif;text-transform: uppercase;letter-spacing: 3px;font-size: 11px;}body {background: #c9302c;}.main-header {width: 100%;height: 100px;background: whitesmoke;display: block;}.navbar {display: inline-block;float: right;margin-right: 50px;margin-top: 30px;}.logo {display: inline-block;margin-top: 30px;margin-left: 30px;text-decoration: none;}.logo-lg {font-size: 20px;font-weight: lighter;color: #232324;}.logo-lg > b {font-size: 20px;font-weight: lighter;color: #232324;}.container {background: #FFFFFF;}.add-good {padding-top: 12px;padding-bottom: 20px;border-radius: 10px;outline: none;display: block;margin-right: 30px;background: #f6f6f6;color: #ce7d88;border: solid 1px #eac7cc;}</style>
</head>
<body>
<!--抽取头部公共页面-->
<header id="site-header" class="main-header"><!-- Logo --><a class="logo" th:href="@{/goods/toList}"><span class="logo-lg"><b>商品抢购</b></span></a><nav class="navbar navbar-static-top"><!-- Sidebar toggle button--><a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><div class="navbar-custom-menu"><ul class="nav navbar-nav"><li class="dropdown user user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="user-image" src="/imgs/user.png" height="42" alt="User
Image"><span class="hidden-xs"></span></a><ul class="dropdown-menu"><!-- User image --><li class="user-header"><img class="img-circle" alt="User Image"><p>Hello ABC - Hello ABC<small>Hello ABC</small></p></li><!-- Menu Body --><li class="user-body"></li><li class="user-footer"><div class="pull-middle"><a th:href="@{/login/out}" class="btn btn-lg btn-default
btn-block">退出系统</a></div></li></ul></li></ul></div></nav>
</header>
<div class="container"><div class="panel-heading">秒杀商品列表</div><table class="table" id="goodslist"><tr><td>名称</td><td>图片</td><td>原价</td><td>秒杀价</td><td>库存</td><td>详情</td></tr><tr th:each="goods,goodstStat : ${goodsList}"><td th:text="${goods.goodsName}"></td><td><img th:src="@{${goods.goodsImg}}" width="100" height="100"/></td><td th:text="${goods.goodsPrice}"></td><td th:text="${goods.seckillPrice}"></td><td th:text="${goods.stockCount}"></td><td><a th:href="'/goods/toDetail/'+${goods.id}">查看详情</a></td></tr></table>
</div>
<script>
</script>
2.测试使用
1.报错，GoodsService没被注入

image-20240508093322068

2.加一下Service注解即可

image-20240508093403627

3.登录成功

image-20240508094107275

4.访问 http://localhost:9092/seckill/goods/toList 没有图片

image-20240508094252775

5.把图片放到imgs下即可

image-20240508094501495

6.重新访问

image-20240508094532067

3.调整templates/login.html 登录成功后直接跳转到商品列表页
1.新增超链接

image-20240508095100810

2.登录成功后自动跳转

image-20240508095226979

7.商品详情页

1.Mapper编写 根据商品id获取商品详情
1.GoodsMapper.java
    /*** 获取商品详情* @param goodsId* @return*/GoodsVo findGoodsVoByGoodsId(Long goodsId);
2.GoodsMapper.xml
    <select id="findGoodsVoByGoodsId" resultType="com.sxs.seckill.vo.GoodsVo">select g.id,g.goods_name,g.goods_title,g.goods_img,g.goods_detail,g.goods_price,g.goods_stock,t_seckill_goods.seckill_price,t_seckill_goods.stock_count,t_seckill_goods.start_date,t_seckill_goods.end_datefrom t_goods gleft join t_seckill_goods on g.id = t_seckill_goods.goods_idwhere g.id = #{goodsId};</select>
2.Service编写
1.GoodsService.java
    /*** 获取商品详情* @param goodsId* @return*/GoodsVo findGoodsVoByGoodsId(Long goodsId);
2.GoodsServiceImpl.java
    @Overridepublic GoodsVo findGoodsVoByGoodsId(Long goodsId) {return goodsMapper.findGoodsVoByGoodsId(goodsId);}
3.Controller编写
GoodsController.java
    // 进入到商品详情页@RequestMapping("/toDetail/{goodsId}")public String toDetail(Model model, User user, @PathVariable Long goodsId) {// 判断是否有用户信息if (null == user) {return "login";}// 查询商品详情model.addAttribute("goods", goodsService.findGoodsVoByGoodsId(goodsId));// 将用户信息存入model中，返回到前端model.addAttribute("user", user);return "goodsDetail";}
4.前端界面编写
1.goodsList.html 修改请求（使用环境变量+资源路径的形式）

image-20240508135716537

2.goodsDetail.html 商品详情页
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>商品详情</title><!--jquery--><script type="text/javascript" th:src="@{/js/jquery.min.js}"></script><!-- bootstrap --><link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/><script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script><!-- layer --><script type="text/javascript" th:src="@{/layer/layer.js}"></script><!-- common.js --><script type="text/javascript" th:src="@{/js/common.js}"></script><style>* {margin: 0;padding: 0;font-family: "Open Sans", sans-serif;text-transform: uppercase;letter-spacing: 3px;font-size: 11px;}body {/*background: #cbc0d3;*/background: #c9302c;}.main-header {width: 100%;height: 100px;/*background: #eac7cc;*/background: whitesmoke;display: block;}.navbar {display: inline-block;float: right;margin-right: 50px;margin-top: 30px;}.logo {display: inline-block;margin-top: 30px;margin-left: 30px;text-decoration: none;}.logo-lg {font-size: 20px;font-weight: lighter;color: #232324;}.logo-lg > b {font-size: 20px;font-weight: lighter;color: #232324;}.container {background: #FFFFFF;margin-right: auto;margin-left: auto;width: 900px;}.captcha {display: none;}.captchaImg {display: none;width: 130px;height: 32px;}</style>
</head>
<body>
<!--抽取头部公共页面-->
<header id="site-header" class="main-header"><!-- Logo --><a class="logo" onclick="toList()"><span class="logo-lg"><b>商品抢购</b></span></a><nav class="navbar navbar-static-top"><!-- Sidebar toggle button--><a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><div class="navbar-custom-menu"><ul class="nav navbar-nav"><li class="dropdown user user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="user-image" src="/imgs/user.png" height="32" alt="User
Image"><span class="hidden-xs"></span></a><ul class="dropdown-menu"><!-- User image --><li class="user-header"><img class="img-circle" alt="User Image"><p>Hello ABC - Hello ABC<small>Hello ABC</small></p></li><!-- Menu Body --><li class="user-body"></li><li class="user-footer"><div class="pull-middle"><a onclick="toOut()" class="btn btn-lg btn-default btn-block">退出系统</a></div></li></ul></li></ul></div></nav>
</header>
<div class="panel panel-default"><div class="panel-heading" style="background: #c9302c;color: white">秒杀商品详情</div><div class="panel-body"><span th:if="${user eq null}"> 您还没有登录，请登陆后再操作<br/></span><span>production 参数</span></div><div class="container"><table class="table" id="good"><tr><td>名称</td><td colspan="3" id="goodName" th:text="${goods.goodsName}"></td></tr><tr><td>图片</td><td colspan="3"><img id="goodImg" th:src="@{${goods.goodsImg}}" width="200" heights="200"/></td></tr><tr><td>秒杀价</td><td id="secKillPrice" th:text="${goods.seckillPrice}"></td><td><img id="captchaImg" class="captchaImg"/></td><td><input id="captcha" class="captchaImg"/><input type="button" id="captchabtn" onclick="verifyCaptcha()" value="验证
输入的验证码是否正确"></td></tr><tr><td>原价</td><td colspan="3" id="goodPrice" th:text="${goods.goodsPrice}"></td></tr><tr><td>库存</td><td colspan="3" id="stockCount" th:text="${goods.stockCount}"></td></tr></table></div>
</div>
</body>
<script>
</script>
</html>
5.测试
1.点击查看详情

image-20240508135919809

2.数据正常展示

image-20240508135933746

http://www.lryc.cn/news/360114.html

相关文章：

  • centos 记录用户登陆ip和执行命令
  • JZ2440笔记：DM9000C网卡驱动
  • 【数据结构】二叉树：简约和复杂的交织之美
  • 信号稳定，性能卓越！德思特礁鲨系列MiMo天线正式发布！
  • 编程学习技巧——实战
  • GPU学习(1)
  • TQSDRPI开发板教程：UDP收发测试
  • opencv进阶 ——（九）图像处理之人脸修复祛马赛克算法CodeFormer
  • 虚拟机改IP地址
  • MySQL(二)-基础操作
  • vue3学习使用笔记
  • 微信小程序怎么进行页面传参
  • 隆道出席河南ClO社区十周年庆典，助推采购和供应链数字化发展
  • NetApp财季报告亮点：全闪存阵列需求强劲，云计算收入增长放缓但AI领域前景乐观
  • javascript读取本地目录
  • Java基础八股
  • 【机器学习300问】102、什么是混淆矩阵？
  • 基于SpringBoot3和JDK17，集成H2数据库和jpa
  • 《逆水寒》手游周年庆，热度不减反增引发热议
  • Kotlin使用Dagger2但无法生成对应类 Unresolved reference: DaggerMyComponent
  • Vue组件通讯⽗组件中通过 provide 来提供变量，然后在⼦组件中通过 inject 来注⼊变量例子
  • 教你搞一个比较简单的计时和进度条装饰器
  • 跑马灯的两种实现方式
  • OpenAI 的 GPT-4o 是目前最先进的人工智能模型！如何在工作或日常生活中高效利用它？
  • 安卓ANR检测、分析、优化面面谈
  • “手撕”链表的九道OJ习题
  • 解决 Git commit 或 Git merge 跑到 VIM 里面去了
  • 营造科技展厅主题氛围，多媒体应用有哪些新策略？
  • 【UML用户指南】-04-从代码到UML的关键抽象
  • （2024，LoRA，全量微调，低秩，强正则化，缓解遗忘，多样性）LoRA 学习更少，遗忘更少