实战篇:基于SSM的秒杀系统之WEB层搭建

        跟着做了这么久,迟迟没有看到效果是不是很不耐烦了,不过,今天你就能见到光明了,如果你一直跟着来,那么今天就可以看到原始版的秒杀系统了,如果你没有一直跟下来,没关系,你可以参考下面的链接
实战篇:基于SSM的秒杀系统之项目介绍
实战篇:基于SSM的秒杀系统之项目搭建和数据库设计
实战篇:基于SSM的秒杀系统之DAO层搭建
实战篇:基于SSM的秒杀系统之Service层搭建
        今天主要讲解WEB层的搭建,有很多知识都是前端的,所以你在学习后台的同时也可以学习一下前段。

秒杀前端流程

        首先来介绍一下秒杀前端的整个流程


秒杀流程

        其中最主要的是详情页的操作,详情页的主要操作为


详情页操作

RESTFUL接口设计

        为了使URL设计的更加规范,采用Restful风格的设计
,本系统主要的接口有

接口设计

SeckillController设计

        SeckillController主要有五个方法分别是

public String list(Model model)//获取列表页
public String detail(@PathVariable("seckillId") Long seckillId, Model model)//获取详情页
public SeckillResult<Exposer> exposer(@PathVariable("seckillId") Long seckillId) //暴露秒杀接口
public SeckillResult<SeckillExecution> execute(@PathVariable("seckillId") Long seckillId,
            @PathVariable("md5") String md5, @CookieValue(value = "killPhone", required = false) Long phone) //秒杀结果
public SeckillResult<Long> time()//获取系统时间

页面设计

页面主要采用Bootstrap框架进行设计,这里不详细给出代码了

页面交互

页面上主要采用了JQuery的cookie插件和倒计时插件,JavaScript采用了模块化思想,如果你想学习一下可以看一下源代码。
最后给出效果图


列表页

秒杀页

秒杀成功页

最后给出地址

https://github.com/lctiter/seckill.git

谢谢阅读

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容