前端页面使用Thymeleaf模板页面和静态页面对比（重点）

最新推荐文章于 2024-06-20 23:23:58 发布

Richard678

最新推荐文章于 2024-06-20 23:23:58 发布

阅读量1k

点赞数

分类专栏： java

原文链接：www.baidu.com

版权

java 专栏收录该内容

624 篇文章 5 订阅

订阅专栏

Thymeleaf模板：先到controller的方法，在方法里查出数据，然后将查出的数据放到model里面，最后返回页面

静态页面：先到页面，页面到页面可以带有参数，然后在第二张页面用ajax进行请求controller的方法，获取数据，将数据返回到页面，进行渲染（常用这种方法）

1、Thymeleaf模板页面（在controller将获得的数据放在model里面，跳转到要渲染的页面）

<td><a th:href="'/goods/to_detail/'+${goods.id}">详情</a></td>

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
<body>

<div class="panel panel-default">
  <div class="panel-heading">秒杀商品详情</div>
  <div class="panel-body">
  	<span th:if="${user eq null}"> 您还没有登录，请登陆后再操作<br/></span>
  	<span>没有收货地址的提示。。。</span>
  </div>
  <table class="table" id="goodslist">
  	<tr>  
        <td>商品名称</td>  
        <td colspan="3" th:text="${goods.goodsName}"></td> 
     </tr>  
     <tr>  
        <td>商品图片</td>  
        <td colspan="3"><img th:src="@{${goods.goodsImg}}" width="200" height="200" /></td>  
     </tr>
     <tr>  
        <td>秒杀开始时间</td>  
        <td th:text="${#dates.format(goods.startDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td id="seckillTip">	
        	<input type="hidden" id="remainSeconds" th:value="${remainSeconds}" />
        	<span th:if="${seckillStatus eq 0}">秒杀倒计时：<span id="countDown" th:text="${remainSeconds}"></span>秒</span>
        	<span th:if="${seckillStatus eq 1}">秒杀进行中</span>
        	<span th:if="${seckillStatus eq 2}">秒杀已结束</span>
        </td>
        <td>
        	<form id="miaoshaForm" method="post" action="/seckill/do_seckill">
        		<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
        		<input type="hidden" name="goodsId" th:value="${goods.id}" />
        	</form>
        </td>
     </tr>
     <tr>  
        <td>商品原价</td>  
        <td colspan="3" th:text="${goods.goodsPrice}"></td>  
     </tr>
      <tr>  
        <td>秒杀价</td>  
        <td colspan="3" th:text="${goods.seckillPrice}"></td>  
     </tr>
     <tr>  
        <td>库存数量</td>  
        <td colspan="3" th:text="${goods.stockCount}"></td>  
     </tr>
  </table>
</div>
</body>
<script>
$(function(){
	countDown();
});

function countDown(){
	var remainSeconds = $("#remainSeconds").val();
	var timeout;
	if(remainSeconds > 0){//秒杀还没开始，倒计时
		$("#buyButton").attr("disabled", true);
		timeout = setTimeout(function(){
			$("#countDown").text(remainSeconds - 1);
			$("#remainSeconds").val(remainSeconds - 1);
			countDown();
		},1000);
	}else if(remainSeconds == 0){//秒杀进行中
		$("#buyButton").attr("disabled", false);
		if(timeout){
			clearTimeout(timeout);
		}
		$("#seckillTip").html("秒杀进行中");
	}else{//秒杀已经结束
		$("#buyButton").attr("disabled", true);
		$("#seckillTip").html("秒杀已经结束");
	}
}

</script>
</html>

controller层

    @RequestMapping("/to_detail2/{goodsId}")
    public String detail2(Model model,SeckillUser seckillUser,@PathVariable("goodsId")long goodsId) {
    	//snowflake算法做uuid
    	model.addAttribute("user", seckillUser);
    	GoodsVo goods=goodsService.getGoodsVoByGoodsId(goodsId);
    	model.addAttribute("goods", goods);
    	//秒杀的倒计时
    	long startAt=goods.getStartDate().getTime();//转化成毫秒
    	long endAt=goods.getEndDate().getTime();
    	long now=System.currentTimeMillis();//当前时间，单位毫秒
    	
    	int seckillStatus=0;//秒杀的状态
    	int remainSeconds=0;//秒杀还有多久开始
    	
    	if(now<startAt) {//秒杀还没有开始，进入倒计时
    		seckillStatus=0;
    		remainSeconds=(int) ((startAt-now)/1000);
    	}else if(now>endAt){//秒杀已经结束
    		seckillStatus=2;
    		remainSeconds=-1;
    	}else {//秒杀正在进行中
    		seckillStatus=1;
    		remainSeconds=0;
    	}
    	model.addAttribute("seckillStatus", seckillStatus);
    	model.addAttribute("remainSeconds", remainSeconds);	
    	return "goods_detail";
    }

2、静态页面（通过ajax获取数据，成功后进行渲染）

  <td><a th:href="'/goods_detail.htm?goodsId='+${goods.id}">详情</a></td>

<!DOCTYPE HTML>
<html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="/layer/layer.js"></script>
    <!-- md5.js -->
    <script type="text/javascript" src="/js/md5.min.js"></script>
    <!-- common.js -->
    <script type="text/javascript" src="/js/common.js"></script>
</head>
<body>

<div class="panel panel-default">
  <div class="panel-heading">秒杀商品详情</div>
  <div class="panel-body">
  	<span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>
  	<span>没有收货地址的提示。。。</span>
  </div>
  <table class="table" id="goodslist">
  	<tr>  
        <td>商品名称</td>  
        <td colspan="3" id="goodsName"></td> 
     </tr>  
     <tr>  
        <td>商品图片</td>  
        <td colspan="3"><img id="goodsImg" width="200" height="200" /></td>  
     </tr>
     <tr>  
        <td>秒杀开始时间</td>  
        <td id="startTime"></td>
        <td>	
        	<input type="hidden" id="remainSeconds"/>
        	<span id="seckillTip"></span>
        </td>
        <td>
        	<form id="miaoshaForm" method="post" action="/seckill/do_seckill">
        		<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
        		<input type="hidden" name="goodsId" id="goodsId" />
        	</form>
        </td>
     </tr>
     <tr>  
        <td>商品原价</td>  
        <td colspan="3" id="goodsPrice"></td>  
     </tr>
      <tr>  
        <td>秒杀价</td>  
        <td colspan="3" id="seckillPrice"></td>  
     </tr>
     <tr>  
        <td>库存数量</td>  
        <td colspan="3" id="stockCount"></td>  
     </tr>
  </table>
</div>
</body>
<script>
$(function(){
	/* countDown(); */
	getDetail();
});

//ajax请求数据
function getDetail(){
	var goodsId=g_getQueryString("goodsId");
	$.ajax({
		url:"/goods/detail/"+goodsId,
		type:"GET",
		success:function(data){if(data.code==0){render(data.data)}else{layer.msg(data.msg)}},
		error:function(){layer.msg("客户端请求错误")}
		
	});	
}
//渲染页面
function render(detail){
	
	var seckillStatus=detail.seckillStatus;
	var remainSeconds=detail.remainSeconds;
	var goods=detail.goods;
	var seckillUser=detail.seckillUser;
	
	if(seckillUser){
		$("#userTip").hide();
	}
	$("#goodsName").text(goods.goodsName);
	$("#goodsImg").attr("src",goods.goodsImg);
	$("#startTime").text(new Date(goods.startDate).format("yyyy-MM-dd hh:mm:ss"));
	$("#remainSeconds").val(remainSeconds);
	$("#goodsId").val(goods.id);
	$("#goodsPrice").text(goods.goodsPrice);
	$("#seckillPrice").text(goods.seckillPrice);
	$("#stockCount").text(goods.stockCount);
	countDown();
}

function countDown(){
	var remainSeconds = $("#remainSeconds").val();
	var timeout;
	if(remainSeconds > 0){//秒杀还没开始，倒计时
		$("#buyButton").attr("disabled", true);
		$("#seckillTip").html("秒杀倒计时："+remainSeconds+"秒");
	
		timeout = setTimeout(function(){
			$("#countDown").text(remainSeconds - 1);
			$("#remainSeconds").val(remainSeconds - 1);
			countDown();
		},1000);
	}else if(remainSeconds == 0){//秒杀进行中
		$("#buyButton").attr("disabled", false);
		if(timeout){
			clearTimeout(timeout);
		}
		$("#seckillTip").html("秒杀进行中");
	}else{//秒杀已经结束
		$("#buyButton").attr("disabled", true);
		$("#seckillTip").html("秒杀已经结束");
	}
}

</script>
</html>

controller层

    /**
     * 将方法改造实现页面静态化
     * @param model
     * @param seckillUser
     * @param goodsId
     * @return
     */
    @RequestMapping("/detail/{goodsId}")
    @ResponseBody     //将对象以json字符串的形式进行返回【重点】
    public Result<GoodsDetailVo> detail(Model model,SeckillUser seckillUser,@PathVariable("goodsId")long goodsId) {
    	GoodsVo goods=goodsService.getGoodsVoByGoodsId(goodsId);
    	//秒杀的倒计时
    	long startAt=goods.getStartDate().getTime();//转化成毫秒
    	long endAt=goods.getEndDate().getTime();
    	long now=System.currentTimeMillis();//当前时间，单位毫秒
    	
    	int seckillStatus=0;//秒杀的状态
    	int remainSeconds=0;//秒杀还有多久开始
    	
    	if(now<startAt) {//秒杀还没有开始，进入倒计时
    		seckillStatus=0;
    		remainSeconds=(int) ((startAt-now)/1000);
    	}else if(now>endAt){//秒杀已经结束
    		seckillStatus=2;
    		remainSeconds=-1;
    	}else {//秒杀正在进行中
    		seckillStatus=1;
    		remainSeconds=0;
    	}    	
    	GoodsDetailVo vo=new GoodsDetailVo();
    	vo.setGoods(goods);
    	vo.setSeckillUser(seckillUser);
    	vo.setRemainSeconds(remainSeconds);
    	vo.setSeckillStatus(seckillStatus);
    	
    	return Result.success(vo);
    }

Richard678

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端页面使用Thymeleaf模板页面和静态页面对比（重点）

Thymeleaf模板：先到controller的方法，在方法里查出数据，然后将查出的数据放到model里面，最后返回页面静态页面：先到页面，页面到页面可以带有参数，然后在第二张页面用ajax进行请求controller的方法，获取数据，将数据返回到页面，进行渲染（常用这种方法）1、Thymeleaf模板页面（在controller将获得的数据放在model里面，跳转到要渲染的页面）...
复制链接

扫一扫

专栏目录