【IDEA+SpringBoot+Java商城秒杀实战18】页面优化技术-商品详情页面静态化（前后端分离）

Phemia ·

更新时间:2024-09-21

· 675 次阅读

页面静态化+前后端分离 常用技术AngularJS、Vue.js 优点：利用浏览器的缓存

上面的方法比较复杂，我们只是用jQuery来模拟实现页面静态化

将页面直接缓存到用户的浏览器上面，好处：用户访问数据的时候，不用去请求服务器，直接在本地缓存中取得需要的页面缓存。

未作页面静态化： 请求某一个页面，访问缓存，查看缓存中是否有，缓存中有直接返回，缓存中没有的话，将数据渲染到html页面再存到缓存，再将整个html页面返回给客户端显示。

做了页面静态化： 第一次是去请求后台要渲染好的html页面，之后的请求都是直接访问用户本地浏览器的缓存的html页面，静态资源，然后前端通过Ajax来访问后端，只去获取页面需要显示的数据返回即可。

商品详情页静态化
在先前的操作中我们将商品详情页面进行了redis缓存，因为这个接口只是展示相应产品详情和秒杀倒计时等信息，只要显示几个关键信息即可，所以其他的都可以实现静态化。这种技术，实际就是前端分为两部分，一部分是不改变的html块，还有一块就是数据，它只要后端传数据到前端即可，用到ajax技术来请求数据。

为了在浏览器端进行缓存，以及控制缓存时间，在application.properties里面添加配置静态资源配置项：

#static  静态资源配置，设置静态文件路径css,js,图片等等
#spring.mvc.static-path-pattern=/static/**    spring.mvc.static-path-pattern=/**
spring.resources.add-mappings=true
spring.resources.cache-period=3600 
spring.resources.chain.cache=true
spring.resources.chain.enabled=true
spring.resources.chain.gzipped=true 
spring.resources.chain.html-application-cache=true
spring.resources.static-locations=classpath:/static/

在static资源文件夹下面新建我们的静态资源页面文件，（我们以.htm格式结尾），这里为什么不能用.html文件结尾是因为如果不修改继续用.html后缀，系统会默认去找templates下面的同名文件，所以我们修改它以示区别

定义一个GoodsDetailVo封装来专门给页面传值。

	/**
	 * 为了给页面传值
	 */
	 @Setter
	 @Getter
	public class GoodsDetailVo {
		// 秒杀状态量初始值
		private int status = 0;
		// 开始时间倒计时
		private int remailSeconds = 0;
		private GoodsVo goodsVo;
		private MiaoshaUser user;

改造商品列表页面（goods_list.html）里面的跳转逻辑，修改跳转请求
之前的请求路径：

详情

现在的请求路径：

详情

而我们现在是不需要再去服务端请求跳转，直接去客户端静态资源里面请求商品详情静态页面goods_detail.htm，这里注意一下修改一下后缀名称

修改之前的商品详情页面，删除thymeleaf具有的标签，让它成为最初始的html静态页面（现在静态页面不需要thymeleaf）,修改使其都使用id来标识各个组件。

刚转到goods_detail.htm页面时，js初始化，执行下面方法：

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

getDetail方法：

function getDetail(){
	//getQueryString获取请求路径中的参数
	var goodsId=getQueryString("goodsId");
	//alert(goodsId);
	$.ajax({
		url:"/goods/detail/"+goodsId,
		type:"GET",
		success:function(data){
			if(data.code==0){		
				//使用render方法渲染页面							
				render(data.data);
			}else{
				layer.msg(data.msg);
			}
		},
		error:function(){
			layer.msg("请求有误！");
		}
	});		
}

getDetail()方法使用ajax异步请求后台取得该页面需要的数据，然后拿到数据之后调用render（）方法渲染我们的静态页面，注意在getDetail中第一步做的是去获取商品的goodsId，因为list页面的商品详情请求是:

详情

商品详情点击链接里面是带有我们的商品的goodsId的，那么我们通过方法getQueryString来获取请求路径url里面参数的值

function 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;
	}

获取到参数之后就可以去请求后端接口，获取数据去渲染：

function render(detail) {
		//alert(detail.status);
		var miaoshaStatus = detail.status;
		var remailSeconds = detail.remailSeconds;
		var goods = detail.goodsVo;
		var user = detail.user;
		if (user != null) {
			//展示相应的
			$("#userTip").hide();
		}
		$("#goodsName").text(goods.goodsName);
		$("#goodsImg").attr("src", goods.goodsImg); //.text();
		$("#startTime").text(goods.startDate); //还没有格式化
		$("#remailSeconds").val(remailSeconds);
		$("#goodsId").val(goods.id);
		$("#goodsPrice").text(goods.goodsPrice); //goodsStock----- stockCount
		$("#miaoshaPrice").text(goods.miaoshaPrice);
		$("#stockCount").text(goods.goodsStock);
		countDown();
	}

倒计时countDown()方法：

function countDown(){
	//获取秒杀倒计时进行判断，0-->正在进行秒杀,-1-->秒杀结束,remailSeconds>0-->代表倒计时
	var remailSeconds=$("#remailSeconds").val();
	//alert("remailSeconds:"+remailSeconds);
	var timeout;
	if(remailSeconds>0){//秒杀还没有开始，进行倒计时功能
		$("#buyButton").attr("disabled",true);
		$("#miaoshaTip").html("秒杀倒计时："+remailSeconds+"秒");
		//倒计时
		timeout=setTimeout(function(){
			$("#countDown").text(remailSeconds-1);
			$("#remailSeconds").val(remailSeconds-1);//remailSeconds这是input
			countDown();
		},1000);//一秒钟之后回调函数
	}else if(remailSeconds==0){//正在进行秒杀
		$("#buyButton").attr("disabled",false);
		if(timeout){//如果timeout有值的情况
			clearTimeout(timeout);
		}
		//将文案修改 df1fab4272a24cdf9432adb9fd69cb38
		$("#miaoshaTip").html("秒杀进行中");
	}else{
		//小于0的情况，秒杀结束，将秒杀按钮设置为不可点击
		$("#buyButton").attr("disabled",true);
		$("#miaoshaTip").html("秒杀结束");
	}
}

将后端GoodsController里面接收商品详情页的请求的接口修改为下面代码：

/**
 * 作页面静态化的商品详情
 * 页面存的是html
 * 动态数据通过接口从服务端获取
 * @param model
 * @param user
 * @param goodsId
 * @return
 */
@RequestMapping(value="/detail/{goodsId}")  //produces="text/html"
@ResponseBody
public Result toDetail_staticPage(Model model,MiaoshaUser user,
		HttpServletRequest request,HttpServletResponse response,@PathVariable("goodsId")long goodsId) {//id一般用snowflake算法
	System.out.println("页面静态化/detail/{goodsId}");
	model.addAttribute("user", user);
	GoodsVo goodsVo=goodsService.getGoodsVoByGoodsId(goodsId);
	model.addAttribute("goods", goodsVo);
	//既然是秒杀，还要传入秒杀开始时间，结束时间等信息
	long start=goodsVo.getStartDate().getTime();
	long end=goodsVo.getEndDate().getTime();
	long now=System.currentTimeMillis();
	//秒杀状态量
	int status=0;
	//开始时间倒计时
	int remailSeconds=0;
	//查看当前秒杀状态
	if(now倒计时
		status=0;
		remailSeconds=(int) ((start-now)/1000);  //毫秒转为秒
	}else if(now>end){ //秒杀已经结束
		status=2;
		remailSeconds=-1;  //毫秒转为秒
	}else {//秒杀正在进行
		status=1;
		remailSeconds=0;  //毫秒转为秒
	}
	model.addAttribute("status", status);
	model.addAttribute("remailSeconds", remailSeconds);
	GoodsDetailVo gdVo=new GoodsDetailVo();
	gdVo.setGoodsVo(goodsVo);
	gdVo.setStatus(status);
	gdVo.setRemailSeconds(remailSeconds);
	gdVo.setUser(user);
	//将数据填进去，传至页面
	return Result.success(gdVo);		
}

goods_detail.htm完整代码：


商品详情
	
	<!--  -->
	
</head
	
		秒杀商品详情
		 
			您还没有登录，请登录后再操作
			没有收货地址的提示。。。
			  
		
		
		
			商品名称
			
		
		
			商品图片
			
		
		
			秒杀开始时间
			
			
				
								
			
			
					
			
		
		
			商品原价
			
		
		
			秒杀价
			
		
		
			库存数量
			
						
		
		
	//获取秒杀地址
	function getMiaoshaPath(){
		var goodsId=$("#goodsId").val();
	}
	//做轮询
	function getMiaoshaResult(goodsId){
		$.ajax({
			url:"/miaosha/result",
			type:"GET",
			data:{
				goodsId:$("#goodsId").val()
			},
			success:function(data){
				if(data.code==0){
					var result=data.data;
					if(result正在进行秒杀,-1-->秒杀结束,remailSeconds>0-->代表倒计时
		var remailSeconds=$("#remailSeconds").val();
		//alert("remailSeconds:"+remailSeconds);
		var timeout;
		if(remailSeconds>0){//秒杀还没有开始，进行倒计时功能
			$("#buyButton").attr("disabled",true);
			$("#miaoshaTip").html("秒杀倒计时："+remailSeconds+"秒");
			//倒计时
			timeout=setTimeout(function(){
				$("#countDown").text(remailSeconds-1);
				$("#remailSeconds").val(remailSeconds-1);//remailSeconds这是input
				countDown();
			},1000);//一秒钟之后回调函数
		}else if(remailSeconds==0){//正在进行秒杀
			$("#buyButton").attr("disabled",false);
			if(timeout){//如果timeout有值的情况
				clearTimeout(timeout);
			}
			//将文案修改 df1fab4272a24cdf9432adb9fd69cb38
			$("#miaoshaTip").html("秒杀进行中");
		}else{
			//小于0的情况，秒杀结束，将秒杀按钮设置为不可点击
			$("#buyButton").attr("disabled",true);
			$("#miaoshaTip").html("秒杀结束");
		}
	}