Java秒杀系统-5.4 商品页面静态化

最新推荐文章于 2023-12-13 18:12:33 发布
最新推荐文章于 2023-12-13 18:12:33 发布
阅读量412 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oDianZi1234567/article/details/104168815
版权

1.常用的页面静态化技术：AngularJS  Vue.js

2.优点浏览器缓存页面

3.创建 GoodDetailVo

public class GoodsDetailVo {
	private int miaoshaStatus = 0;// 秒杀状态
	private int remainSeconds = 0;// 秒杀倒计时
	private GoodsVo goods ;//秒杀商品

4.创建静态页面  goods_detail.hml

<!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>
    <style type="text/css">
        html,body{
            height:100%;
            width:100%;
        }
        body{
            background:url('/img/bg2.jpg') no-repeat;
            background-size:100% 100%;
        }
        #goodslist td{
            border-top:1px solid #39503f61;
        }
    </style>
</head>
<body>

<div class="panel panel-default" style="height:100%;background-color:rgba(222,222,222,0.8)" >
  <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="miaoshaTip"></span>
        </td>
        <td>
        <!--  
        	<form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
        		<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
        		<input type="hidden" name="goodsId"  id="goodsId" />
        	</form>-->
        	<div class="row">
        		<div class="form-inline">
		        	<img id="verifyCodeImg" width="80" height="32"  style="display:none" onclick="refreshVerifyCode()"/>
		        	<input id="verifyCode"  class="form-control" style="display:none"/>
		        	<button class="btn btn-primary" type="button" id="buyButton"onclick="getMiaoshaPath()">立即秒杀</button>
        		</div>
        	</div>
        	<input type="hidden" name="goodsId"  id="goodsId" />
        </td>
     </tr>
     <tr>  
        <td>商品原价</td>  
        <td colspan="3" id="goodsPrice"></td>  
     </tr>
      <tr>  
        <td>秒杀价</td>  
        <td colspan="3"  id="miaoshaPrice"></td>  
     </tr>
     <tr>  
        <td>库存数量</td>  
        <td colspan="3"  id="stockCount"></td>  
     </tr>
  </table>
</div>
</body>
<script>

function getMiaoshaPath(){
	var goodsId = $("#goodsId").val();
	g_showLoading();
	$.ajax({
		url:"/miaosha/path",
		type:"GET",
		data:{
			goodsId:goodsId,
			verifyCode:$("#verifyCode").val()
		},
		success:function(data){
			if(data.code == 0){
				var path = data.data;
				doMiaosha(path);
			}else{
				layer.msg(data.msg);
			}
		},
		error:function(){
			layer.msg("客户端请求有误");
		}
	});
}

function getMiaoshaResult(goodsId){
	g_showLoading();
	$.ajax({
		url:"/miaosha/result",
		type:"GET",
		data:{
			goodsId:$("#goodsId").val(),
		},
		success:function(data){
			if(data.code == 0){
				var result = data.data;
				if(result < 0){
					layer.msg("对不起，秒杀失败");
				}else if(result == 0){//继续轮询
					setTimeout(function(){
						getMiaoshaResult(goodsId);
					}, 200);
				}else{
					layer.confirm("恭喜你，秒杀成功！查看订单？", {btn:["确定","取消"]},
							function(){
								window.location.href="/order_detail.htm?orderId="+result;
							},
							function(){
								layer.closeAll();
							});
				}
			}else{
				layer.msg(data.msg);
			}
		},
		error:function(){
			layer.msg("客户端请求有误");
		}
	});
}

function doMiaosha(path){
	$.ajax({
		url:"/miaosha/"+path+"/do_miaosha",
		type:"POST",
		data:{
			goodsId:$("#goodsId").val()
		},
		success:function(data){
			if(data.code == 0){
				//window.location.href="/order_detail.htm?orderId="+data.data.id;
				getMiaoshaResult($("#goodsId").val());
			}else{
				layer.msg(data.msg);
			}
		},
		error:function(){
			layer.msg("客户端请求有误");
		}
	});
	
}

function render(detail){
	var miaoshaStatus = detail.miaoshaStatus;
	var  remainSeconds = detail.remainSeconds;
	var goods = detail.goods;
	var user = detail.user;
	if(user){
		$("#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);
	$("#miaoshaPrice").text(goods.miaoshaPrice);
	$("#stockCount").text(goods.stockCount);
	countDown();
}

$(function(){
	//countDown();
	getDetail();
});

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 countDown(){
	var remainSeconds = $("#remainSeconds").val();
	var timeout;
	if(remainSeconds > 0){//秒杀还没开始，倒计时
	   $("#buyButton").attr("disabled", true);
	   $("#miaoshaTip").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);
		}
		$("#miaoshaTip").html("秒杀进行中");
		$("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val());
		$("#verifyCodeImg").show();
		$("#verifyCode").show();
	}else{//秒杀已经结束
		$("#buyButton").attr("disabled", true);
		$("#miaoshaTip").html("秒杀已经结束");
		$("#verifyCodeImg").hide();
		$("#verifyCode").hide();
	}
}
function refreshVerifyCode(){
	$("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val()+"&timestamp="+new Date().getTime());
}
</script>
</html>

 

 

 

去掉   <html xmlns:th="http://www.thymeleaf.org">   替换掉thmeleaf 的th:

   <td><a th:href="'/goods_detail.htm?goodsId='+${goods.id}">详情</a></td>   这个直接前端页面跳转不需要经过服务端。

 

 替换掉@{

 

<div class="panel panel-default">
  <div class="panel-heading">秒杀商品列表</div>
  <table class="table" id="goodslist">
  	<tr><td>商品名称</td><td>商品图片</td><td>商品原价</td><td>秒杀价</td><td>库存数量</td><td>详情</td></tr>
  	<tr  th:each="goods,goodsStat : ${goodsList}">  
                <td th:text="${goods.goodsName}"></td>  
                <td ><img th:src="@{${goods.goodsImg}}" width="100" height="100" /></td>  
                <td th:text="${goods.goodsPrice}"></td>  
                <td th:text="${goods.miaoshaPrice}"></td>  
                <td th:text="${goods.stockCount}"></td>
                <td><a th:href="'/goods_detail.htm?goodsId='+${goods.id}">详情</a></td>  
     </tr>  
  </table>
</div>
第一步从服务端取出 通过ajax 调用。
$(function(){
   //countDown();
   getDetail();
});

 取出url 参数的代码：

// 获取url参数
function g_getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r != null) return unescape(r[2]);
	return null;
};
//设定时间格式化函数，使用new Date().format("yyyyMMddhhmmss");  
Date.prototype.format = function (format) {  
    var args = {  
        "M+": this.getMonth() + 1,  
        "d+": this.getDate(),  
        "h+": this.getHours(),  
        "m+": this.getMinutes(),  
        "s+": this.getSeconds(),  
    };  
    if (/(y+)/.test(format))  
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
    for (var i in args) {  
        var n = args[i];  
        if (new RegExp("(" + i + ")").test(format))  
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));  
    }  
    return format;  
};

渲染页面的方法：

function render(detail){
	var miaoshaStatus = detail.miaoshaStatus;
	var  remainSeconds = detail.remainSeconds;
	var goods = detail.goods;
	var user = detail.user;
	if(user){
		$("#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);
	$("#miaoshaPrice").text(goods.miaoshaPrice);
	$("#stockCount").text(goods.stockCount);
	countDown();
}

 

 对服务端改造去掉缓存：

 @RequestMapping(value = "/to_detail2/{goodsId}",produces = "text/html")
 @ResponseBody
public    String   detail2(HttpServletResponse  response, HttpServletRequest  request, Model  model, MiaoshaUser  user, @PathVariable(value = "goodsId") long  goodsId){
     model.addAttribute("user", user);
   //获取缓存
     String html = redisService.get(GoodsKey.gooddetail, "", String.class);
     if(!StringUtils.isEmpty(html)){

         return   html;
     }
     GoodsVo goodsVo = goodsService.getGoodsVoByGoodsId(goodsId);
     logger.info("good"+goodsVo);
     //判断秒杀状态
     long startDate = goodsVo.getStartDate().getTime();
     long   endDate=goodsVo.getEndDate().getTime();

     long now =System.currentTimeMillis();
     int   remainSeconds=0;
     int miaoshaStatus=0;
     if(now<startDate){
         miaoshaStatus=0;
         remainSeconds=(int)(startDate-now)/1000;

     }
     else if( now >endDate){

       remainSeconds=-1;
       miaoshaStatus=2;

     }
     else{
         remainSeconds=0;
         miaoshaStatus=1;
     }

     model.addAttribute("miaoshaStatus",miaoshaStatus);
     model.addAttribute("remainSeconds",remainSeconds);

     model.addAttribute("goods",goodsVo);
     WebContext ctx = new WebContext(request, response, request.getServletContext(), request.getLocale(), model.asMap());
     html = thymeleafViewResolver.getTemplateEngine().process("goods_detail", ctx);
     if (!StringUtils.isEmpty(html)) {
         redisService.set(GoodsKey.goodsList, "", html);
     }
     return html;
 }

改成：

   @RequestMapping(value="/detail/{goodsId}")
    @ResponseBody
    public Result<GoodsDetailVo> detail(HttpServletRequest request, HttpServletResponse response, Model model,MiaoshaUser user,
    		@PathVariable("goodsId")long goodsId) {
    	GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);
    	long startAt = goods.getStartDate().getTime();
    	long endAt = goods.getEndDate().getTime();
    	long now = System.currentTimeMillis();
    	int miaoshaStatus = 0;
    	int remainSeconds = 0;
    	if(now < startAt ) {//秒杀还没开始，倒计时
    		miaoshaStatus = 0;
    		remainSeconds = (int)((startAt - now )/1000);
    	}else  if(now > endAt){//秒杀已经结束
    		miaoshaStatus = 2;
    		remainSeconds = -1;
    	}else {//秒杀进行中
    		miaoshaStatus = 1;
    		remainSeconds = 0;
    	}
    	GoodsDetailVo vo = new GoodsDetailVo();
    	vo.setGoods(goods);
    	vo.setUser(user);
    	vo.setRemainSeconds(remainSeconds);
    	vo.setMiaoshaStatus(miaoshaStatus);
    	return Result.success(vo);
    }

 

Rsingstarzengjx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CentOS-5.4-x86_64-bin-DVD.part5.rar
08-10
CentOS 5.4版本（CentOS-5.4-x86_64-bin-DVD）适用于x86_64，必须集齐5个文件才能一起解压缩使用，5个文件下载地址： CentOS-5.4-x86_64-bin-DVD.part5.rar ... CentOS-5.4-x86_64-bin-DVD.part4.rar ...
java生成静态页面
weixin_30363981的博客
03-18 53
package com.tgdh.project.util;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.net.HttpURLConnection;import java.net.URL;...
核心项目：高并发秒杀系统（分布式Session，列表缓存，界面静态化，削峰处理）
燕双嘤
09-09 740
先将Session ID发送到浏览器，让浏览器以Cookie的形式来保存Session ID；然后服务器端用Redis来保存Session信息，在Redis中保存Session信息时，以客户端保存的Session ID为key。当用户访问系统时，系统首先会通过读取Cookie来获取Session ID，然后通过该Session ID即可读取到分布式Session的信息。本系统的分布式 Session，以及后面的缓存机制，都是基于 Redis 来实现的，1.2，分布式Session的实现。
电商秒杀之查询性能优化技术——页面静态化
Cure_moon_的博客
03-20 151
电商秒杀之CDN
java 生成静态模板页面
tds411255224的博客
08-01 2830
/** * @Title: MakeHtml * @Description: 创建html * @param filePath 设定模板文件 * @param imagePath 需要显示图片的路径 * @param disrPath 生成html的存放路径 * @param fileName 生成html...
使用thymeleaf和Redis缓存实现秒杀系统页面静态化
jakelihua
12-13 114
在秒杀系统的开发中，为了提升性能和用户体验，页面静态化是一个常见的优化手段。本文将详细讲解如何在Spring Boot项目中，通过页面缓存和将页面缓存到Redis中，实现秒杀系统页面的静态化。同时将考虑到前后端不分离和前后端分离的两种场景，以满足不同项目的需求。
pdi-ce-5.4.0.1-130.rar
10-21
标题 "pdi-ce-5.4.0.1-130.rar" 指向的是Pentaho Data Integration（Kettle）的一个社区版本，版本号为5.4.0.1-130。PDI，通常被称为Kettle，是一款强大的开源数据集成工具，由Pentaho公司开发。它在ETL（Extract, ...
Date-Calc-5.4.tar.gz_Date-Calc-5.4
09-23
标题中的"Date-Calc-5.4.tar.gz_Date-Calc-5.4"指的是一个名为"Date-Calc"的Perl模块的版本5.4的压缩文件，它采用tar.gz格式进行打包。这种格式通常用于在Unix/Linux环境中归档和压缩文件，方便传输和存储。".tar"是...
kernel-lt-5.4.251-1.el7.elrepo.x86-64.rpm
09-14
kernel-lt-5.4.251-1.el7.elrepo.x86-64.rpm
centos7内核升级离线安装包kernel-lt-5.4.274*
最新发布
04-24
在Linux系统管理中，内核升级是一项重要的任务，特别是在服务器环境中，为了确保系统的稳定性和安全性，经常需要更新内核以获得最新的安全补丁和功能改进。对于CentOS 7这样的长期支持版本，官方提供了kernel-lt...
商品秒杀代码
11-12
商品秒杀代码,商品秒杀代码,商品秒杀代码,商品秒杀代码
ajax页面动态判断
大秦铁骑
07-19 482
当前遇到这样的项目需求，在用户访问商品详情页面的时候，可以点击关注按钮，来收藏这个商品的信息，如果关注了以后，就要把商品的信息保存到用户的收藏列表中，并给用户一个关注成功的提示。很显然这个需求应该在web页面中，触发ajax效果来实现。     $(".follow").click(function(){ if($(this).children("img").attr("src")=="as
秒杀商城项目----秒杀页面和订单详情页面伪静态化
https://juejin.cn/user/4248168663101239/posts
06-25 807
秒杀页面和订单详情页面伪静态化一. 秒杀页面和订单详情页面伪静态化①. application.yml 配置添加②. 新建静态资源页面文件（以.htm格式结尾）③. 改造商品列表页面（goods_list.html）里面的跳转逻辑④. 定义一个GoodsDetailVo类来专门给页面传值⑤. 一跳转到goods_detail.htm页面时，js初始化，调后端的接口请求数据渲染到页面⑥. 后台返回商品详细数据⑦. 浏览器测试秒杀页面和订单详情页面走本地缓存 304响应码 本项目中只是简单的实现页面静态化：即
2小时快速上手Freemarker电商项目商品详情页静态化
02-26
    本课程全程使用目前比较流行的开发工具idea进行开发,涉及到目前互联网项目中最常用的高并发解决方案技术, 如   dubbo,redis,solr,freemarker,activeMQ,springBoot框架,微信支付,nginx负载均衡,电商活动秒杀,springSecurity安全框架,FastDFS分布式文件服务器,还会涉及到代码生成器,   前台的技术有angularJS和BootStrap框架,此课程内容丰富实战性强,如果你还是传统项目的开发人员,那你学完本课程会有很大的收获,让你的薪资上涨,5K以上,让你完全感受到了互联网思维带来的高并发解决方案的思路,如果你是开发的小白,建议你学完Spring,SpringMVC,MyBatis框架后再来学习本门课程,学完以后会让你完全体验到企业级开发的流程.在职开发人员学完后会让你的薪资更高,让你更了解互联网是如何解决高并发 学完SSM框架的同学就可以学习,能让你切身感受到企业级开发环境目标1：掌握Freemarker常用的指令与内建函数目标2：完成商品详细页的数据显示目标3：完成商品详细页的动态效果目标4：完成商品详细页读取SKU信息的业务逻辑目标5：完成商品审核调用功能
高并发秒杀项目——页面静态化
Zz_xiaohuihui_Hh的博客
06-16 470
高并发秒杀项目——页面静态化商品详情静态化秒杀静态化订单详情静态化 商品详情静态化 创建GoodsDetailVo封装GoodsController的detail方法里的参数，包含秒杀状态、时间 public class GoodsDetailVo { private int miaoshaStatus = 0; private int remainSeconds = 0; private GoodsVo goodsVo; private MiaoshaUser miaos
秒杀功能（5）页面静态化
Serena0814的博客
05-08 980
这篇是讲页面优化技术的第二项：页面静态化、前后端分离。 之前的代码的请求逻辑是: 客户端请求； 服务端的servlet或controller接收请求（后端控制路由与渲染页面，整个项目开发的权重大部分在后端）； 调用service,dao层代码完成业务逻辑； 返回页面； 页面展现一些动态的代码； 前后端分离的新的方式是： 浏览器发送请求； 直接到达html页面（前端控制路由与渲染页面，整个项目...
秒杀项目学习笔记-页面静态化
31楼下小黑的博客
06-08 283
页面静态化就是把页面缓存在用户的浏览器上（前后端分离）。好处是用户访问不用再需要访问服务器了，直接从本地提取，极大节省了网络流量。
秒杀系统的页面静态化
shida_hu的博客
04-17 1019
商品详情静态化 秒杀成功就跳转到商品详情的静态页面，暂时受条件所限，没法把静态页面存到CDN上，暂时存到浏览器上， 在applicationproperties文件中添加配置spring.resources.static-locations=classpath:/static/，这样静态资源就直接从浏览器的缓存里面取，不和服务端发生交互，访问商品详情，打开火狐浏览器的开发者模式，从transfer...
【商城秒杀项目】-- 页面伪静态化
weixin_42687829的博客
02-24 1299
本项目中只是简单的实现页面静态化：将页面直接缓存到用户的浏览器上面 好处：用户访问数据的时候，不用去请求服务器，直接在本地缓存中取得需要的页面缓存 未作页面静态化时的请求过程：请求某一个页面，访问缓存，查看缓存中是否有，缓存中有直接返回，缓存中没有的话，将数据渲染到HTML页面再存到缓存，再将整个HTML页面返回给客户端显示 做了页面静态化的请求过程：第一次是去请求后台渲染好的HTML页面，...
linux-5.4.197.tar.sign怎么校验文件linux-5.4.197.tar.xz
07-15
1. 首先，确保你已经下载了两个文件：`linux-5.4.197.tar.xz` 和 `linux-5.4.197.tar.sign`。 2. 打开终端，并进入包含这两个文件的目录。 3. 使用以下命令导入内核开发者的公钥： ```shell gpg --recv-keys ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值