實(shí)戰(zhàn)篇:基于SSM的秒殺系統(tǒng)之WEB層搭建

????????跟著做了這么久,遲遲沒有看到效果是不是很不耐煩了,不過,今天你就能見到光明了,如果你一直跟著來,那么今天就可以看到原始版的秒殺系統(tǒng)了,如果你沒有一直跟下來,沒關(guān)系,你可以參考下面的鏈接
實(shí)戰(zhàn)篇:基于SSM的秒殺系統(tǒng)之項(xiàng)目介紹
實(shí)戰(zhàn)篇:基于SSM的秒殺系統(tǒng)之項(xiàng)目搭建和數(shù)據(jù)庫設(shè)計(jì)
實(shí)戰(zhàn)篇:基于SSM的秒殺系統(tǒng)之DAO層搭建
實(shí)戰(zhàn)篇:基于SSM的秒殺系統(tǒng)之Service層搭建
????????今天主要講解WEB層的搭建,有很多知識都是前端的,所以你在學(xué)習(xí)后臺的同時也可以學(xué)習(xí)一下前段。

秒殺前端流程

????????首先來介紹一下秒殺前端的整個流程


秒殺流程

????????其中最主要的是詳情頁的操作,詳情頁的主要操作為


詳情頁操作

RESTFUL接口設(shè)計(jì)

????????為了使URL設(shè)計(jì)的更加規(guī)范,采用Restful風(fēng)格的設(shè)計(jì)
,本系統(tǒng)主要的接口有

接口設(shè)計(jì)

SeckillController設(shè)計(jì)

????????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) //秒殺結(jié)果
public SeckillResult<Long> time()//獲取系統(tǒng)時間

頁面設(shè)計(jì)

頁面主要采用Bootstrap框架進(jìn)行設(shè)計(jì),這里不詳細(xì)給出代碼了

頁面交互

頁面上主要采用了JQuery的cookie插件和倒計(jì)時插件,JavaScript采用了模塊化思想,如果你想學(xué)習(xí)一下可以看一下源代碼。
最后給出效果圖


列表頁

秒殺頁

秒殺成功頁

最后給出地址

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

謝謝閱讀

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容