03 整合IDEA+Maven+SSM框架的高併發的商品秒殺項目之web層

Github：https://github.com/nnngu
項目源代碼：https://github.com/nnngu/nguSeckill

---

前端交互流程設計

對於一個系統，須要產品經理、前端工程師和後端工程師的參與，產品經理將用戶的需求作成一個開發文檔交給前端工程師和後端工程師，前端工程師爲系統完成頁面的開發，後端工程師爲系統完成業務邏輯的開發。對於咱們這個秒殺系統，它的前端交互流程設計以下圖：

這個流程圖就告訴了咱們詳情頁的流程邏輯，前端工程師根據這個流程圖設計頁面，而咱們後端工程師根據這個流程圖開發咱們對應的代碼。前端交互流程是系統開發中很重要的一部分，接下來進行Restful接口設計的學習。

Restful接口設計學習

什麼是Restful？它就是一種優雅的URL表述方式，用來設計咱們資源的訪問URL。經過這個URL的設計，咱們就能夠很天然的感知到這個URL表明的是哪一種業務場景或者什麼樣的數據或資源。基於Restful設計的URL，對於咱們接口的使用者、前端、web系統或者搜索引擎甚至是咱們的用戶，都是很是友好的。關於Restful的瞭解你們去網上一搜一大把，我這裏就再也不作介紹了。下面看看咱們這個秒殺系統的URL設計：

接下來基於上述資源接口來開始對Spring MVC框架的使用。

配置Spring MVC框架

在web.xml文件裏面引入DispatcherServlet：

web.xml裏面的代碼請參照項目的源代碼。

添加 applicationContext-web.xml

添加 applicationContext-web.xml，在下圖所示的位置。

applicationContext-web.xml裏面的代碼請參照項目的源代碼。

這樣咱們便完成了Spring MVC的相關配置(即將Spring MVC框架整合到了咱們的項目中)，接下來就要基於Restful接口進行咱們項目的控制器 SeckillController 的開發工做了。

編寫 SeckillController

控制器中的每個方法都對應咱們系統中的一個資源URL，其設計應該遵循Restful接口的設計風格。

建立控制器SeckillController.java，以下圖：

SeckillController.java裏面的代碼請參照項目的源代碼。

SeckillController.java中的方法徹底是對照Service接口方法進行開發的，第一個方法用於訪問咱們商品的列表頁，第二個方法訪問商品的詳情頁，第三個方法用於返回一個json數據，數據中封裝了咱們商品的秒殺地址，第四個方法用於封裝用戶是否秒殺成功的信息，第五個方法用於返回系統當前時間。代碼中涉及到一個將返回秒殺商品地址封裝爲json數據的類，即SeckillResult，在dto包中建立它，以下:

創建一個全局ajax請求返回類，返回json

建立SeckillResult.java，以下圖：

SeckillResult.java裏面的代碼請參照項目的源代碼。

到此，控制器的開發任務完成，接下來進行咱們的頁面開發。

頁面的編寫

項目的前端頁面是由Bootstrap開發的，因此咱們要先去下載Bootstrap或者是使用在線CDN。

使用在線CDN的方法：

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（通常不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

爲了方便咱們本地調試，我在項目裏使用的是本地的Bootstrap。

步驟：

1. 下載JQuery，由於Bootstrap就是依賴JQuery的

2. 下載Bootstrap

3. 下載一個倒計時插件jquery.countdown.min.js ，再下載一個操做Cookie插件jquery.cookie.min.js 如圖放置：

1. 編寫一個公共的頭部jsp文件，位於WEB-INF/jsp/common下的head.jsp，以下圖：

head.jsp裏面的代碼請參照項目的源代碼。

1. 編寫一個公共的jstl標籤庫文件tag.jsp，在下圖所示的位置。

tag.jsp裏面的代碼請參照項目的源代碼。

1. 編寫列表頁面list.jsp，在下圖所示的位置。

list.jsp裏面的代碼請參照項目的源代碼。

1. 編寫秒殺詳情頁面detail.jsp，在下圖所示的位置。

detail.jsp裏面的代碼請參照項目的源代碼。

## 添加 seckill.js 文件

添加 seckill.js 文件，在下圖所示的位置。

seckill.js 裏面的代碼請參照項目的源代碼。

## 運行項目

運行項目，部署到tomcat，在瀏覽器地址欄輸入 http://localhost:8080/seckill/list，敲回車，便可看到以下圖的界面：

點擊相應商品後面的詳情頁連接便可查看該商品是否開啓秒殺、以及秒殺該商品等活動。

到此，咱們成功完成了web層的開發。但一個秒殺系統，每每是會有成千上萬的人進行參與，咱們目前的系統是抗不起多少高併發操做的，因此後面咱們會對本系統進行高併發的優化。請查看個人下一篇文章。

下一篇：04 Java高併發秒殺項目之高併發優化