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。

步骤：

下载JQuery，因为Bootstrap就是依赖JQuery的
下载Bootstrap
下载一个倒计时插件jquery.countdown.min.js ，再下载一个操作Cookie插件jquery.cookie.min.js 如图放置：

编写一个公共的头部jsp文件，位于WEB-INF/jsp/common下的head.jsp，如下图：

head.jsp里面的代码请参照项目的源代码。

编写一个公共的jstl标签库文件tag.jsp，在下图所示的位置。

tag.jsp里面的代码请参照项目的源代码。

编写列表页面list.jsp，在下图所示的位置。

list.jsp里面的代码请参照项目的源代码。

编写秒杀详情页面detail.jsp，在下图所示的位置。

detail.jsp里面的代码请参照项目的源代码。

添加 seckill.js 文件

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

seckill.js 里面的代码请参照项目的源代码。

运行项目

运行项目，部署到tomcat，在浏览器地址栏输入 http://localhost:8080/seckill/list，敲回车，即可看到如下图的界面：

点击相应商品后面的详情页链接即可查看该商品是否开启秒杀、以及秒杀该商品等活动。

到此，我们成功完成了web层的开发。但一个秒杀系统，往往是会有成千上万的人进行参与，我们目前的系统是抗不起多少高并发操作的，所以后面我们会对本系统进行高并发的优化。请查看我的下一篇文章。

下一篇：04 Java高并发秒杀项目之高并发优化