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高并发秒杀项目之高并发优化