基于Spring+SpringMVC+Mybatis的秒杀系统之web层（3）

最新推荐文章于 2024-04-30 10:26:19 发布

tianjun2012

最新推荐文章于 2024-04-30 10:26:19 发布

阅读量2.4k

点赞数 1

分类专栏： spring mybatis 文章标签： spring mybatis

本文链接：https://blog.csdn.net/tianjun2012/article/details/52130372

版权

mybatis 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

spring

3 篇文章 0 订阅

订阅专栏

接上面（2）

spring/spring-web.xml:

<?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
       http://www.springframework.org/schema/mvc/spring-mvc.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd">

       <!-- 配置SpringMVC -->
       <!-- 1:开启SpringMVC注解模式 -->
       <!-- 简化配置：
              （1)自动注册DefaultAnnotationHandlerMapping,AnnotationMethodHandlerAdapter
               (2)提供一系列：数据绑定，数字和日期的format @NumberFormat,@DataTimeFormat,
                     xml,json默认的读写支持。
       -->
       <mvc:annotation-driven/>

       <!-- servlet-mapping 映射路径："/"  -->
       <!-- 2:静态资源默认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.seckill.web"/>

</beans>

logback.xml:

<?xml version="1.0" encoding="UTF-8"?>
<configuration debug="true">
    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <!-- encoders are  by default assigned the type
             ch.qos.logback.classic.encoder.PatternLayoutEncoder -->
        <encoder>
            <pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
        </encoder>
    </appender>

    <root level="debug">
        <appender-ref ref="STDOUT" />
    </root>
</configuration>

WEB-INF/jsp/common/head.jsp:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

WEB-INF/jsp/common/tag.jsp:

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

WEB-INF/jsp/list.jsp:

<%--
  Created by IntelliJ IDEA.
  User: tianjun
  Date: 2016/8/4
  Time: 19:29
  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>
<head>
  <title>秒杀列表页</title>
  <%@include file="common/head.jsp"%><!-- 静态包含 -->
</head>
<body>
  <!-- 页面显示部分 -->
  <div class="container">
    <div class="panel header-default">
      <div class="panel-heading text-center">
        <h2>秒杀列表</h2>
      </div>
      <div class="panel-body">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>名称</th>
              <th>库存</th>
              <th>开始时间</th>
              <th>结束时间</th>
              <th>创建时间</th>
              <th>详情页</th>
            </tr>
          </thead>
          <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>
          </tbody>
        </table>
      </div>
    </div>
  </div>


</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</html>

WEB-INF/jsp/detail.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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">
    <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>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<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>

resources/script/seckill.js:

//存放主要交互逻辑js代码
// javascript 模块化
// seckill.detail.init(params);
 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';
         }

     },
     handleSeckillKill: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>');
                            }
                         });
                     });
                     node.show();
                 }else{
                     //未开启秒杀
                     var now= exposer['now'];
                     var start = exposer['start'];
                     var end = exposer['end'];
                     //重新进入计时逻辑
                     seckill.countdown(seckillId,now,start,end);
                 }
             }else{
                 console.log("result:"+result);
             }
         });
     },
     //验证手机号
     validatePhone:function(phone){
         if(phone && phone.length == 11 && !isNaN(phone)){
             return true;
         }else{
             return false;
         }
     },
     countdown:function(seckillId,nowTime,startTime,endTime){
         var seckillBox = $('#seckill-box');
         if(nowTime>endTime){
             seckillBox.html('秒杀结束');
         }else if(nowTime<startTime){
             //秒杀未开始，计时事件绑定
             var killTime = new Date(startTime+1000);
             seckillBox.countdown(killTime,function(event){
                 //时间的格式
                 var format = event.strftime('秒杀倒计时：%D天 %H时 %M分 %S秒');
                 seckillBox.html(format);
             }).on('finish.countdown',function(){//时间完成后回调事件
                 //结束后去秒杀地址，控制实现逻辑，执行秒杀
                 seckill.handleSeckillKill(seckillId,seckillBox);
             })
         }else{
            //执行秒杀
             seckill.handleSeckillKill(seckillId,seckillBox);
         }
     },
     //详情页秒杀逻辑
     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'];
            $.get(seckill.URL.now(),{},function(result){
                if(result && result['success']){
                    var nowTime = result['data'];
                    //时间判断，计时交互
                    seckill.countdown(seckillId,nowTime,startTime,endTime);
                }else{
                    console.log('result:'+result);
                }
            });
        }
     }
 }

org.seckill.web.SeckillController:

package org.seckill.web;

import org.seckill.dto.Exposer;
import org.seckill.dto.SeckillExecution;
import org.seckill.dto.SeckillResult;
import org.seckill.entity.Seckill;
import org.seckill.enums.SeckillStateEnum;
import org.seckill.exception.RepeatKillException;
import org.seckill.exception.SeckillCloseException;
import org.seckill.exception.SeckillExpection;
import org.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 tianjun on 2016/8/4.
 */
@Controller
@RequestMapping("/seckill")
public class SeckillController {

    private Logger logger = LoggerFactory.getLogger(this.getClass());

    @Autowired
    private SeckillService seckillService;

    @RequestMapping(value = "/list",method = RequestMethod.GET)
    public String list(Model model){
        List<Seckill> list = seckillService.getSeckillList();
        model.addAttribute("list",list);
        return "list";
    }

    @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()
    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,"未注册");
        }
        try {
            SeckillExecution execution = seckillService.executeSeckill(seckillId,phone,md5);
            return new SeckillResult<SeckillExecution>(true,execution);
        } catch (RepeatKillException e) {
            SeckillExecution execution = new SeckillExecution(seckillId, SeckillStateEnum.REPEAT_KILL);
            return new SeckillResult<SeckillExecution>(true,execution);
        } catch (SeckillCloseException e){
            SeckillExecution execution = new SeckillExecution(seckillId, SeckillStateEnum.END);
            return new SeckillResult<SeckillExecution>(true,execution);
        } catch (Exception e) {
            logger.error(e.getMessage(),e);
            SeckillExecution execution = new SeckillExecution(seckillId, SeckillStateEnum.INNER_ERROR);
            return new SeckillResult<SeckillExecution>(true,execution);
        }
    }

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

运行即可看到如（1）所示的效果图。
注意：在本例子中由于json等都是utf-8，但是最后发现有js文件传递的中文数据还是乱码，最后排查来排查去，才发现，IDE中各种文件的保存都必须为utf-8 这里写图片描述

tianjun2012

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Spring+SpringMVC+Mybatis的秒杀系统之web层（3）

接上面（2）spring/spring-web.xml:<?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:m
复制链接

扫一扫