前言
此篇文章是系列的第三篇文章,具体文章目录:
章节名称 | 博客地址 |
---|---|
安装部署Redis | 集成Redis(已完结) |
页面登陆功能设计 | 登录功能设计(更新优化中) |
秒杀页面具体设计 | 秒杀详情页(已完结) |
JMeter初级压测学习 | Jmeter压测入门学习(已完结) |
页面优化设计 | 页面优化设计(已完结) |
接口优化 | RabbbitMq接口优化(已完结) |
图形验证码等 | 图形验证码及接口防刷(更新优化中) |
正文
写在前面:在正式开始秒杀功能设计学习之前,先去源码地址查看README中miaosha_3
部分中数据库的设计,先行完善数据库,源码对应的是miaosha_3
部分,然后开始下面的学习。
对于秒杀页面设计,我们想象以下“在秒杀活动开始之前,商家都会向我们发出一个讯息,表示商品要进行秒杀,这个时候我们就可以登录到具体的秒杀页面,先行查看商品的列表信息,点击查看详情部分一般都有商品的具体信息,商品的秒杀价格,商品的主图以及具体的详细信息,一般都会有一个商品的秒杀开始时间与结束时间。
- 在没有开始时候会显示倒计时,这里我们设计的是倒计时单位为秒,并且可以进行秒杀的按钮一般都是不能够点击。
- 秒杀进行中会提示秒杀进行中,此时我们可以点击秒杀进行秒杀。
- 当秒杀的结束时间在当前时间之前,表示秒杀结束,我们就不能够再进行秒杀,此时秒杀按钮也被设置为不可点击。
列表页设计
对于列表页的设计我们是在登录成功之后就会跳转到本地的http://localhost:8080/goods/to_list
,实现商品列表的显示,从数据库中读取到设置为秒杀的商品就是我们的秒杀商品表:后端就是简单三层模式,前端就对应数据的显示:
@RequestMapping("/to_list")
public String list(Model model,MiaoshaUser user) {
model.addAttribute("user", user);
//查询商品列表
List<GoodsVo> goodsList = goodsService.listGoodsVo();
model.addAttribute("goodsList", goodsList);
return "goods_list";
}
<div class="panel panel-default">
<div class="panel-heading">秒杀商品列表</div>
<table class="table" id="goodslist">
<tr><td>商品名称</td><td>商品图片</td>