SSM项目秒杀系统---（三）Web层

最新推荐文章于 2022-05-10 10:39:54 发布

陆洋山芋

最新推荐文章于 2022-05-10 10:39:54 发布

阅读量208

点赞数

分类专栏：后端开发文章标签： java

本文链接：https://blog.csdn.net/qq_40709702/article/details/104479213

版权

后端开发专栏收录该内容

24 篇文章 1 订阅

订阅专栏

文章目录

如果完全跟着老师走，在编写seckill.js时会出现一些小问题，自己搜索改正了，可以正常运行。

一、设计Restful接口

前端交互设计—Restful—SpringMVC—bootstrap+jquery

1、前端交互流程设计

前端页面流程：列表页–>详情页–>登录–>写入cookie–>展示逻辑
详情页流程逻辑：获取标准系统时间–>时间判断，开始时间，结束时间–>秒杀结束/倒计时/秒杀地址–>执行秒杀–>结果

2、学习Restful接口

一种优雅的URI表达方式，是资源的状态和转改转移。
Restful规范：GET查询操作、POST添加/修改操作、PUT修改操作、DELETE删除操作。
URL设计：/模块/资源/{标识}/集合1/…
秒杀API的URL设计：

GET /seckill/list 秒杀列表
GET /seckill/{id}/detail 详情页
GET /seckill/time/now 系统时间
POST /seckill/{id}/exposer 暴露秒杀
POST /seckill/{id}/{md5}/execution 执行秒杀

二、SpringMVC整合spring

1、SpringMVC理论

在这里插入图片描述

HTTP请求地址映射原理：
HTTP请求–>Servlet容器（SpringMVC HandlerMapping–>Handler处理方法）
注解映射技巧：
@RequestMapping注解：支持标准的URL；Ant风格URL（即？和**等字符）；带{xxx}占位符的URL。
请求方法细节处理：
请求参数绑定、请求方式限制、请求转发和重定向、数据模型赋值、返回json数据、cookie访问。

在这里插入图片描述

2、整合配置SpringMVC框架

在web.xml中配置DispatcherServlet：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--maven创建的项目中的Servlet版本不合适，需要修改-->
    <!--配置DispatcherServlet-->
    <servlet>
        <servlet-name>seckill-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--配置SpringMVC需要加载的配置文件
            spring-dao.xml,spring-service.xml,spring-web.xml
            Mybatis -> spring -> springmvc
            -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/spring-*.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>seckill-dispatcher</servlet-name>
        <!--默认匹配所有的请求-->
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

新增spring-web.xml配置SpringMVC：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

    <!--配置SpringMVC-->
    <!--1：开启SpringMVC注解模式-->
    <!--简化配置：
        （1）自动注册DefaultAnnotationHandlerMapping，AnnotationMethodHandlerAdapter
        （2）提供一系列：数据绑定，数字和日期的format @NumberFormat，@DataTimeFormat
             xml，json默认读写支持。
    -->
    <mvc:annotation-driven/>
    <!--2:servlet-mapping 映射路径:"/"-->
    <!--静态资源默认servlet配置
        (1)加入对静态资源的处理：js，gif，png
        (2)允许使用"/"做整体映射
    -->
    <mvc:default-servlet-handler/>
    
    <!--3:配置jsp 显示ViewResolver-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    
    <!--4:扫描web相关的bean-->
    <context:component-scan base-package="org.luyangsiyi.seckill.web"/>
</beans>

三、实现秒杀相关的Restfu接口

web/SeckillController.java

package org.luyangsiyi.seckill.web;

import org.luyangsiyi.seckill.dto.Exposer;
import org.luyangsiyi.seckill.dto.SeckillExecution;
import org.luyangsiyi.seckill.dto.SeckillResult;
import org.luyangsiyi.seckill.entity.Seckill;
import org.luyangsiyi.seckill.enums.SeckillStatEnum;
import org.luyangsiyi.seckill.exception.RepeatKillException;
import org.luyangsiyi.seckill.exception.SeckillClosedException;
import org.luyangsiyi.seckill.exception.SeckillException;
import org.luyangsiyi.seckill.service.SeckillService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.List;

/**
 * Created by luyangsiyi on 2020/2/23
 */
@Controller
@RequestMapping("/seckill") //url:/模块/资源/{id}/细分
public class SeckillController {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @Autowired
    private SeckillService seckillService;

    @RequestMapping(value = "/list", method = RequestMethod.GET)
    public String list(Model model){
        //获取列表页
        List<Seckill> seckills = seckillService.getSeckillList();
        model.addAttribute("list",seckills);
        //list.jsp + model = ModelAndView
        return "list";///WEB-INF/jsp/list.jsp
    }

    @RequestMapping(value = "/{seckillId}/detail",method = RequestMethod.GET)
    public String detail(@PathVariable("seckillId") Long seckillId, Model model){
        if(seckillId== null){
            return "redirect:/seckill/list";
        }
        Seckill seckill = seckillService.getById(seckillId);
        if(seckill == null){
            return "forward:/seckill/list";
        }
        model.addAttribute("seckill",seckill);
        return "detail";
    }

    //ajax json
    @RequestMapping(value = "/{seckillId}/exposer",
            method = RequestMethod.POST,
            produces = {"application/json;charset=UTF-8"})
    @ResponseBody //告知返回类型的json
    public SeckillResult<Exposer> exposer(@PathVariable("seckillId") Long seckillId){
        SeckillResult<Exposer> result;
        try{
            Exposer exposer = seckillService.exportSeckillUrl(seckillId);
            result = new SeckillResult<Exposer>(true,exposer);
        } catch (Exception e){
            logger.error(e.getMessage(),e);
            result = new SeckillResult<Exposer>(false,e.getMessage());
        }
        return result;
    }

    @RequestMapping(value = "/{seckillId}/{md5}/execution",
                method = RequestMethod.POST,
            produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public SeckillResult<SeckillExecution> execute(@PathVariable("seckillId") Long seckillId,
                                                    @PathVariable("md5") String md5,
                                                    @CookieValue(value = "killPhone",required = false) Long phone){
        if(phone == null){
            return new SeckillResult<SeckillExecution>(false,"未注册");
        }
        SeckillResult<SeckillExecution> result;
        try{
            SeckillExecution execution = seckillService.executeSeckill(seckillId,phone,md5);
            return new SeckillResult<SeckillExecution>(true,execution);
        } catch(RepeatKillException e1){
            SeckillExecution seckillExecution = new SeckillExecution(seckillId, SeckillStatEnum.REPEAT_KILL);
            return new SeckillResult<SeckillExecution>(true,seckillExecution);
        } catch (SeckillClosedException e2) {
            SeckillExecution seckillExecution = new SeckillExecution(seckillId, SeckillStatEnum.END);
            return new SeckillResult<SeckillExecution>(true,seckillExecution);
        } catch (Exception e){
            logger.error(e.getMessage(),e);
            SeckillExecution seckillExecution = new SeckillExecution(seckillId, SeckillStatEnum.INNER_ERROR);
            return new SeckillResult<SeckillExecution>(true,seckillExecution);
        }
    }

    @RequestMapping(value = "/time/now", method = RequestMethod.GET)
    @ResponseBody
    public SeckillResult<Long> time(){
        Date now = new Date();
        return new SeckillResult<Long>(true,now.getTime());
    }
}

需要用到的dto/SeckillResult.java类：

package org.luyangsiyi.seckill.dto;

/**
 * 所有ajax请求返回类型：封装jsonn结果
 * Created by luyangsiyi on 2020/2/23
 */
public class SeckillResult<T> {

    private boolean success;

    private T data;

    private String error;

    public SeckillResult(boolean success, T data) {
        this.success = success;
        this.data = data;
    }

    public SeckillResult(boolean success, String error) {
        this.success = success;
        this.error = error;
    }

    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public String getError() {
        return error;
    }

    public void setError(String error) {
        this.error = error;
    }
}

四、基于bootstrap开发页面结构

在WEB-INF/jsp下基于bootstrap框架编写list.jsp和detail.jsp，并将共同的头部head.jsp和标签tag.jsp存在WEB-INF/jsp/common文件夹下：
list.jsp

<%--
  Created by IntelliJ IDEA.
  User: luyangsiyi
  Date: 2020/2/23
  Time: 7:26 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--引入jstl-->
<%@include file="common/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>秒杀列表页</title>
    <%@ include file="common/head.jsp"%>
</head>
<body>
    <!--页面显示部分-->
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                <h2>秒杀列表</h2>
            </div>
            <div class="panel-body">
                <table class="table table-hover">
                    <thread>
                        <tr>
                            <th>名称</th>
                            <th>库存</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>创建时间</th>
                            <th>详情页</th>
                        </tr>
                    </thread>
                    <tbody>
                        <c:forEach var="sk" items="${list}">
                            <tr>
                                <td>${sk.name}</td>
                                <td>${sk.number}</td>
                                <td>
                                    <fmt:formatDate value="${sk.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <fmt:formatDate value="${sk.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <fmt:formatDate value="${sk.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <a class="btn btn-info" href="/seckill/${sk.seckillId}/detail" target="_blank">link</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>

detail.jsp（这个页面没有完全编写完成，之后会修改）

<%--
  Created by IntelliJ IDEA.
  User: luyangsiyi
  Date: 2020/2/23
  Time: 7:26 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>秒杀详情页</title>
    <%@ include file="common/head.jsp"%>
</head>
<body>
    <div class="container">
        <div class="panel panel-default text-center">
            <div class="panel-heading">${seckill.name}</div>
            <div class="panel-body">

            </div>
        </div>
    </div>


</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>

head.jsp

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

tag.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

五、交互逻辑编程

1、修改detail.jsp添加登录弹出层

<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@include file="common/tag.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>秒杀详情页</title>
    <%@include file="common/head.jsp" %>
</head>
<body>
    <div class="container">
        <div class="panel panel-default text-center">
            <div class="pannel-heading">
                <h1>${seckill.name}</h1>
            </div>

            <div class="panel-body">
                <h2 class="text-danger">
                    <%--显示time图标--%>
                    <span class="glyphicon glyphicon-time"></span>
                    <%--展示倒计时--%>
                    <span class="glyphicon" id="seckill-box"></span>
                </h2>
            </div>
        </div>
    </div>
    <%--登录弹出层 输入电话--%>
    <div id="killPhoneModal" class="modal fade">
        <!--如果不加这行，那么运行后modal会出现蒙层无法点击！-->
        <div class="modal-backdrop fade in">
            <style>.modal-backdrop{z-index:0;}</style>
        </div>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title text-center">
                        <span class="glyphicon glyphicon-phone"></span>秒杀电话:
                    </h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <input type="text" name="killPhone" id="killPhoneKey"
                                   placeholder="填写手机号^o^" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <%--验证信息--%>
                    <span id="killPhoneMessage" class="glyphicon"> </span>
                    <button type="button" id="killPhoneBtn" class="btn btn-success">
                        <span class="glyphicon glyphicon-phone"></span>
                        Submit
                    </button>
                </div>

            </div>
        </div>
    </div>
</body>
<%--jQery文件,务必在bootstrap.min.js之前引入--%>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<%--使用CDN 获取公共js http://www.bootcdn.cn/--%>
<%--jQuery Cookie操作插件--%>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<%--jQuery countDown倒计时插件--%>
<script src="http://cdn.bootcss.com/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>

<script src="/resources/script/seckill.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        //使用EL表达式传入参数
        seckill.detail.init({
            seckillId:${seckill.seckillId},
            startTime:${seckill.startTime.time},//毫秒
            endTime:${seckill.endTime.time}
        });
    })
</script>
</html>

注意：如果出现modal灰色（即蒙层，无法点击）的时候，需要增加如下设置：

<!--如果不加这行，那么运行后modal会出现蒙层无法点击！-->
<div class="modal-backdrop fade in">
    <style>.modal-backdrop{z-index:0;}</style>
</div>

2、开始编写交互逻辑
seckill.js

//存放主要交互逻辑js代码
//javascript 模块化
var seckill = {
    //封装秒杀相关ajax的url，方便维护修改
    URL:{
        now : function () {
            return '/seckill/time/now';
        },
        exposer : function (seckillId) {
            return '/seckill/'+seckillId+'/exposer';
        },
        execution : function (seckillId, md5) {
            return '/seckill/'+seckillId+'/'+md5+'/execution';
        }
    },
    handlerSeckillkill : function(seckillId,node){
        //处理秒杀逻辑
        node.hide()
            .html('<button class="btn btn-primary btn-lg" id="killBtn">开始秒杀</button>');//按钮
        $.post(seckill.URL.exposer(seckillId),{},function (result) {
            //在回调函数中，执行交互流程
            if(result && result['success']){
                var exposer = result['data'];
                if(exposer['exposed']){
                    //开启秒杀
                    //获取秒杀地址
                    var md5 = exposer['md5'];
                    var killUrl = seckill.URL.execution(seckillId,md5);
                    console.log("killUrl:"+killUrl);
                    //绑定一次点击事件
                    $('#killBtn').one('click',function () {
                        //执行秒杀请求的操作
                        //1:先禁用按钮
                        $(this).addClass('disabled');
                        //2:发送秒杀请求执行秒杀
                        $.post(killUrl,{},function (result) {
                            if(result && result['success']){
                                var killResult = result['data'];
                                var state = killResult['state'];
                                var stateInfo = killResult['stateInfo'];
                                //3:显示秒杀结果
                                node.html('<span class="label label-success">'+stateInfo+'</span>');
                            } else {

                            }
                        });
                    });
                    node.show();
                } else {
                    //未开启秒杀（客户端到达时间，而服务器端没有开始）
                    var now = exposer['now'];
                    var start = exposer['start'];
                    var end = exposer['end'];
                    //重新计算计时逻辑
                    seckill.countdownTime(seckillId,now,start,end);
                }
            } else {
                console.log('result:'+result);
            }
        })

    },
    //验证手机号
    validatePhone : function(phone){
        if(phone && phone.length == 11 && !isNaN(phone)) {
            return true;
        } else {
            return false;
        }
    },
    countdownTime : function(seckillId,nowTime,startTime,endTime){
        //时间的判断
        if(nowTime > endTime){
            var seckillBox = $('#seckill-box');
            //秒杀结束
            seckillBox.html('秒杀结束!');
        } else if(nowTime < startTime){
            //秒杀未开启，计时事件绑定
            var killTime = new Date(startTime+1000);//加1秒防止用户时间出现偏移
            $('#seckill-box').countdown(killTime,function (event) {//这边不能调用seckillBox因为不能被初始化
                //时间格式
               var format = event.strftime('秒杀倒计时： %D天 %H时 %M分 %S秒');
               $(this).html(format);//同样因为不能被初始化，所以用$(this)
            }).on('finish.countdown',function () {//时间完成后回调事务
                //获取秒杀地址，控制显示逻辑，执行秒杀
                seckill.handlerSeckillkill(seckillId,seckillBox);
            });
        } else {
            //秒杀开始
            seckill.handlerSeckillkill(seckillId,$('#seckill-box'));
        }
    },
    //详情页秒杀逻辑
    detail:{
        //详情页初始化
        init : function (params) {
            //手机验证和登录，计时交互
            //规划我们的交互流程
            //在cookie中查找手机号
            var killPhone = $.cookie('killPhone');
            //验证手机号
            if(!seckill.validatePhone(killPhone)){
                //绑定phone
                //控制输出
                var killPhoneModal = $('#killPhoneModal');
                //显示弹出层
                killPhoneModal.modal({
                    show:true,
                    backdrop:'static',//禁止位置关闭
                    keyboard:false//关闭键盘事件
                });
                $('#killPhoneBtn').click(function () {
                   var inputPhone = $('#killPhoneKey').val();
                   if(seckill.validatePhone(inputPhone)){
                       //电话写入cookie
                       $.cookie('killPhone',inputPhone,{expires:7,path:'/seckill'});
                       //刷新页面
                       window.location.reload();
                   } else {
                        $('#killPhoneMessage').hide().html('<label class="label label-danger">手机号错误！</label>').show(300);
                   }
                });
            }
            //已经登录
            //计时交互
            var startTime = params['startTime'];
            var endTime = params['endTime'];
            var seckillId = params['seckillId'];
            //将SeckillController中的time()返回的结果放在result中
            $.get(seckill.URL.now(),{},function (result) {
                if(result && result['success']){
                    var nowTime = result['data'];
                    //时间判断,抽取出来放在countdownTime()中
                    seckill.countdownTime(seckillId,nowTime,startTime,endTime);
                } else {
                    console.log('result:'+result);
                }
            });
        }
    }
}

六、测试结果

在这里插入图片描述

陆洋山芋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM项目秒杀系统---（三）Web层

文章目录一、设计Restful接口1、前端交互流程设计2、学习Restful接口二、SpringMVC整合spring1、SpringMVC理论2、整合配置SpringMVC框架三、实现秒杀相关的Restfu接口四、基于bootstrap开发页面结构五、交互逻辑编程六、测试结果如果完全跟着老师走，在编写seckill.js时会出现一些小问题，自己搜索改正了，可以正常运行。一、设计Restfu...
复制链接

扫一扫