03 java高并发秒杀项目之web层

笔记仓库：https://github.com/nnngu/LearningNotes

项目源代码：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>