从零搭建基于SpringBoot的秒杀系统(三):首页、详情页编写

简介: 在上一篇博客中,我们已经搭好了系统的主要架构,目前已经可以跑通这个项目,接下来我们就可以把注意力都集中在代码上。本次需要创建的代码目录。

网络异常,图片无法展示
|
在上一篇博客中,我们已经搭好了系统的主要架构,目前已经可以跑通这个项目,接下来我们就可以把注意力都集中在代码上。本次需要创建的代码目录下:

一、创建实体类

在entity包中创建和数据库字段对应的实体类,一共有四个实体类

item,代表所有的商品信息

@Data
public class Item {
    private Integer id;
    private String name;
    private String code;
    private Long stock;
    private Date purchaseTime;
    private Integer isActive;
    private Date createTime;
    private Date updateTime;
}

itemKill,代表可以抢购的商品信息

@Data
public class ItemKill {
    private Integer id;
    private Integer itemId;
    private Integer total;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Date startTime;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Date endTime;
    private Byte isActive;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Date createTime;
    private String itemName;
    //采用服务器时间控制是否可以进行抢购
    private Integer canKill;
}

itemKillSuccess,代表抢购成功的商品实体类

@Data
@ToString
public class ItemKillSuccess {
    private String code;
    private Integer itemId;
    private Integer killId;
    private String userId;
    private Byte status;
    private Date createTime;
    private Integer diffTime;
}

User,存储用户的信息

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private Integer id;
    private String userName;
    private String password;
    private String phone;
    private String email;
    private Byte isActive;
    private Date createTime;
    private Date updateTime;
}

二、主页面后端逻辑的编写

在正式开始业务前先创建一个BaseController,用于处理统一的错误:在controller文件夹中创建BaseController:

@Controller
@RequestMapping("/base")
public class BaseController {
    @RequestMapping(value = "/error",method = RequestMethod.GET)
    public String error(){
        return "error";
    }
}

我打算在主页展示所有商品的信息,如果该商品的余量大于0并且在抢购时间内,就展示出抢购按钮。如果不符合上面的条件,则展示此商品无法被抢购的提示。首先在controller文件夹中新建ItemController

@Controller
public class ItemController {
    private static final Logger log= LoggerFactory.getLogger(ItemController.class);
    @Autowired
    private ItemServiceImpl itemServiceImpl;
    //获取商品列表
    @RequestMapping(value = "/item",method = RequestMethod.GET)
    public String list(Model model){
        try{
            List<ItemKill> itemKills =itemServiceImpl.getKillItems();
            model.addAttribute("itemkills",itemKills);
        }catch (Exception e){
            log.error("获取商品列表异常",e.fillInStackTrace());
            return "redirect:/base/error";
        }
        return "item";
    }
    @RequestMapping(value = "/detail/{id}",method = RequestMethod.GET)
    public String detail(@PathVariable Integer id, Model model){
        if (id==null||id<0){
            return "redirect:/base/error";
        }
        try{
            ItemKill itemKill=itemServiceImpl.getKillDetail(id);
            model.addAttribute("itemkill",itemKill);
        }catch (Exception e){
            log.error("获取详情发生异常:id={}"+id);
        }
        return "detail";
    }
}

在itemController中,自动注入ItemServiceImpl ,所有的业务都在Service中处理。在service文件夹中编写itemService接口和itemServiceImpl实现类:


itemService接口:

public interface ItemService {
    List<ItemKill> getKillItems();
    ItemKill getKillDetail(Integer id) throws Exception;
}

ItemServiceImpl:这一段代码实现的是获取秒杀商品的列表和获取秒杀商品的详情

@Service
public class ItemServiceImpl implements ItemService {
    @Autowired
    private ItemKillMapper itemKillMapper;
    //获取待秒杀商品的列表
    @Override
    public List<ItemKill> getKillItems() {
        List<ItemKill> list = itemKillMapper.selectAll();
        return list;
    }
    //获取秒杀详情
    @Override
    public ItemKill getKillDetail(Integer id) throws Exception {
        ItemKill itemKill=itemKillMapper.selectByid(id);
        if (itemKill==null){
            throw new Exception("秒杀详情记录不存在");
        }
        return itemKill;
    }
}

在上述的代码中自动注入ItemKillMapper,用来操作数据库,这里采用注解的方式:在mapper下新建ItemKillMapper

@Mapper
public interface ItemKillMapper {
    @Select("select \n" +
            "a.*,\n" +
            "b.name as itemName,\n" +
            "(\n" +
            "\tcase when(now() BETWEEN a.start_time and a.end_time and a.total>0)\n" +
            "\t\tthen 1\n" +
            "\telse 0\n" +
            "\tend\n" +
            ")as cankill\n" +
            "from item_kill as a left join item as b\n" +
            "on a.item_id = b.id\n" +
            "where a.is_active=1;")
    List<ItemKill> selectAll();
    @Select("select \n" +
            "a.*,\n" +
            "b.name as itemName,\n" +
            "(\n" +
            "\tcase when(now() BETWEEN a.start_time and a.end_time and a.total>0)\n" +
            "\t\tthen 1\n" +
            "\telse 0\n" +
            "\tend\n" +
            ")as cankill\n" +
            "from item_kill as a left join item as b\n" +
            "on a.item_id = b.id\n" +
            "where a.is_active=1 and a.id=#{id};")
    ItemKill selectByid(Integer id);
}

讲解一下两段sql,第一段sql的目的是筛选此时服务器时间在start_time到end_time并且总量大于0的商品,如果可以抢购另cankill字段为1,否则为0

select a.*,b.name as itemName,
(
  case when(now() BETWEEN a.start_time and a.end_time and a.total>0)
  then 1
  else 0
  end
)as cankill
from item_kill as a left join item as b
on a.item_id=b.id
where a.is_active=1

第二段sql的作用是根据id查询,逻辑和前一段相同。


三、前端页面编写

前端页面不是本次项目的重点,基于BootStrap编写,Bootstrap的依赖直接使用CDN获取,不需要下载相关的css和js代码:因为到这里为止用户登陆还未做,因此默认用户id为10,后续会做修改

item.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品秒杀列表</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>产品名称</th>
                <th>剩余数量</th>
                <th>抢购开始时间</th>
                <th>抢购结束时间</th>
                <th>详情</th>
            </tr>
        </thead>
        <tbody>
        <tr th:each="itemkill:${itemkills}">
            <td th:text="${itemkill.itemName}"></td>
            <td th:text="${itemkill.total}"></td>
            <td th:text="${#dates.format(itemkill.startTime,'yyyy-MM-dd HH:mm:ss')}"  th:pattern="${'yyyy-MM-dd HH:mm:ss'}"></td>
            <td th:text="${#dates.format(itemkill.endTime,'yyyy-MM-dd HH:mm:ss')}" th:pattern="${'yyyy-MM-dd HH:mm:ss'}"></td>
            <td th:if="${itemkill.canKill} eq 1">
                <a th:href="@{'/detail/'+${itemkill.id}}">
                    详情
                </a>
            </td>
            <td th:if="${itemkill.canKill} eq 0">
                未在时间段内或容量为0
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

detail.html

由于字数限制,detail.html中的代码可以到下面两个路劲中查看

https://link.juejin.cn/?target=https%3A%2F%2Fblog.csdn.net%2Fqq_41973594%2Farticle%2Fdetails%2F107824871

https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FOliverLiy%2FSecondKill%2Ftree%2Fversion2.0

最后是错误页面,error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异常</title>
</head>
<body>
<h1>出现了异常</h1>
</body>
</html>


四、实现效果

运行项目,输入https://link.juejin.cn/?target=http%3A%2F%2Flocalhost%3A8080%2Fitem,可以看到首页展示如下:只有当剩余数量和抢购在时间内才会展示详情,点击详情:可以看到具体的信息,当点击抢购后完成抢购。这个功能将在下一节介绍。

到目前为止的代码放在https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FOliverLiy%2FSecondKill%2Ftree%2Fversion2.0


我搭建了一个微信公众号《Java鱼仔》,如果你对本项目有任何疑问,欢迎在公众号中联系我,我会尽自己所能为大家解答。

相关文章
|
3天前
|
前端开发 JavaScript Java
springboot图书馆管理系统前后端分离版本
springboot图书馆管理系统前后端分离版本
31 12
|
1天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
16 2
|
1天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现(系统源码+文档+数据库+部署等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
18 6
|
1天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue的班级综合测评管理系统设计与实现(系统源码+文档+数据库+部署等)
✌免费选题、功能需求设计、任务书、开题报告、中期检查、程序功能实现、论文辅导、论文降重、答辩PPT辅导、会议视频一对一讲解代码等✌
20 4
|
1天前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
22 6
|
17天前
|
存储 安全 Java
Spring Boot 3 集成Spring AOP实现系统日志记录
本文介绍了如何在Spring Boot 3中集成Spring AOP实现系统日志记录功能。通过定义`SysLog`注解和配置相应的AOP切面,可以在方法执行前后自动记录日志信息,包括操作的开始时间、结束时间、请求参数、返回结果、异常信息等,并将这些信息保存到数据库中。此外,还使用了`ThreadLocal`变量来存储每个线程独立的日志数据,确保线程安全。文中还展示了项目实战中的部分代码片段,以及基于Spring Boot 3 + Vue 3构建的快速开发框架的简介与内置功能列表。此框架结合了当前主流技术栈,提供了用户管理、权限控制、接口文档自动生成等多项实用特性。
69 8
|
1天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的冬奥会科普平台设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
17 0
|
2月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
520 1
|
2月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
3月前
|
存储 安全 Java
打造智能合同管理系统:SpringBoot与电子签章的完美融合
【10月更文挑战第7天】 在数字化转型的浪潮中,电子合同管理系统因其高效、环保和安全的特点,正逐渐成为企业合同管理的新宠。本文将分享如何利用SpringBoot框架实现一个集电子文件签字与合同管理于一体的智能系统,探索技术如何助力合同管理的现代化。
167 4