SpringMVC + Spring + MyBatis 를 바탕 으로 스톱워치 시스템 [클 라 이언 트 상호작용] 실현
이 편 은 주로 클 라 이언 트 와 서비스의 상호작용 을 실현 한다.첫 번 째 개황 에서 나 는 이미 업무 장면 의 상호작용 사진 을 붙 였 다.클 라 이언 트 의 상호작용 은 주로 seckill. js 에 놓 여 이 루어 집 니 다.페이지 는 jsp + jstl 기반 으로 이 루어 집 니 다.
준비 작업
1. 웹. xml 설정.웹. xml 에 springmvc 전단 컨트롤 러 를 설정 할 때 spring 위탁 관리 xml 3 개 를 모두 불 러 와 야 합 니 다.각각 spring - dao. xml, spring - service. xml, spring - web. xml 입 니 다.
<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_3_1.xsd"
version="3.1"
metadata-complete="true">
<display-name>Archetype Created Web Applicationdisplay-name>
<servlet>
<servlet-name>dispatcherServletservlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
<init-param>
<param-name>contextConfigLocationparam-name>
<param-value>classpath:spring/spring-*.xmlparam-value>
init-param>
servlet>
<servlet-mapping>
<servlet-name>dispatcherServletservlet-name>
<url-pattern>/url-pattern>
servlet-mapping>
web-app>2. spring - web. xml 설정
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<mvc:annotation-driven/>
<mvc:default-servlet-handler/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/views/"/>
<property name="suffix" value=".jsp"/>
bean>
<context:component-scan base-package="com.seckill.web"/>
beans>스톱워치 인터페이스
@Controller
@RequestMapping("/seckill")
public class SeckillController {
@Autowired
SeckillService seckillService;
@RequestMapping("/list")
public ModelAndView list(){
ModelAndView mav=new ModelAndView("list");
List list = seckillService.getSeckillList();
mav.addObject("list",list);
return mav;
}
/**
* ModelAndView
* **/
@RequestMapping(value="/{seckillId}/detail/",method = RequestMethod.GET)
public ModelAndView detail(@PathVariable("seckillId")Long seckillId){
ModelAndView mav=new ModelAndView("detail");
Seckill seckill=seckillService.getById(seckillId);
mav.addObject("seckill",seckill);
return mav;
}
// ajax json
@RequestMapping(value="/{seckillId}/exposer",method = RequestMethod.GET,produces = {"application/json;charset=UTF-8"})
@ResponseBody
public SeckillResult exposer(@PathVariable("seckillId")Long seckillId){
SeckillResult result=null;
try{
Exposer exposer=seckillService.exposeSeckillUrl(seckillId);
result=new SeckillResult(true,exposer);
}catch (Exception e){
result=new SeckillResult(false,e.getMessage());
}
return result;
}
@RequestMapping(value="/{seckillId}/{md5}/execute",method = RequestMethod.POST,produces = {"application/json;charset=UTF-8"})
@ResponseBody
public SeckillResult execute(@PathVariable("seckillId")Long seckillId,
@PathVariable("md5")String md5,
@CookieValue(value="phone",required=false)Long phone){
if(phone==null){
return new SeckillResult(false," ");
}
SeckillResult result=null;
try{
SeckillExecution execution=seckillService.executeSeckill(seckillId,phone,md5);
result=new SeckillResult(true,execution);
}catch(RepeatKillException e){
SeckillExecution execution=new SeckillExecution(seckillId,-1," ");
result=new SeckillResult(true,execution);
}catch(SeckillCloseException e){
SeckillExecution execution=new SeckillExecution(seckillId,0," ");
result=new SeckillResult(true,execution);
}catch (Exception e){
SeckillExecution execution=new SeckillExecution(seckillId,-2," ");
result=new SeckillResult(true,execution);
}
return result;
}
//
@RequestMapping(value="/time/now/",method = RequestMethod.GET)
@ResponseBody
public SeckillResult time(){
Date d=new Date();
return new SeckillResult(true,d.getTime());
}
}
클 라 이언 트 구현
1. 초살 상품 리스트 페이지
${item.name}
${item.number}
순식간에 죽이다
2. 스 톱 세일 상품 상세 페이지
${seckill.name}
$(function(){
seckill.detail.init({
seckillId:${seckill.seckillId},
startTime:${seckill.startTime.time}, //
endTime:${seckill.endTime.time}
})
})
3. 업무 논리 seckill. js
var seckill={
/** url**/
URL:{
now:'/seckill/time/now/'
},
/** **/
validatePhone:function(phone){
if(phone && phone.length==11 && !isNaN(phone)){
return true;
}
return false;
},
/** **/
countdown:function(seckillId,nowTime,startTime,endTime){
console.log(seckillId+","+nowTime+","+startTime+","+endTime);
var seckillBox=$("#seckill-box");
if(nowTime>endTime){
seckillBox.html(" ");
}else if(nowTime !').show(300);
}
})
}
var seckillId=params["seckillId"];
var startTime=params["startTime"];
var endTime=params["endTime"];
$.get(seckill.URL.now,{},function(result){
if(result && result["success"]){
var nowTime=result["data"];
seckill.countdown(seckillId,nowTime,startTime,endTime);
}else{
console.log(result);
}
})
}
},
/** **/
seckill:function(seckillId,node){
// 、 node ，
node.hide().html("")
$.get('/seckill/'+seckillId+'/exposer',{},function(result){
if(result && result["success"]){
//
var exposer=result["data"];
if(exposer["exposed"]){
//
var md5=exposer["md5"];
var killUrl='/seckill/'+seckillId+'/'+md5+'/execute';
console.log(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"];
node.html(""+stateInfo+"");
}
})
});
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); //
}
})
}
}
총결산
스톱워치 관련 업무 논 리 는 주로 스톱워치 상품 의 시작 시간, 종료 시간 과 클 라 이언 트 의 현재 시간 에 따라 스톱워치 가 시작 되 었 는 지, 끝 났 는 지 판단 하 는 것 이다.시작 하지 않 았 을 때 jquery. countdown 을 호출 하여 카운트다운 효 과 를 실현 합 니 다.카운트다운 플러그 인 은 카운트다운 사건 을 유지 하고 시간 이 끝 날 때 바로 스톱워치 인 터 페 이 스 를 호출 하여 스톱워치 업 무 를 실현 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
