SpringBoot秒杀系统实战18-页面优化技术-商品详情页面静态化（前后端分离）...
文章目录
- 页面静态化+前后端分离
- 1. 常用技术AngularJS、Vue.js
- 2. 优点：利用浏览器的缓存
- 商品详情页静态化
- 1、 为了在浏览器端进行缓存，以及控制缓存时间，在application.properties里面添加配置静态资源配置项：
- 2、在static资源文件夹下面新建我们的静态资源页面文件，（我们以.htm格式结尾），这里为什么不能用.html文件结尾是因为如果不修改继续用.html后缀，系统会默认去找templates下面的同名文件，所以我们修改它以示区别
- 3、定义一个GoodsDetailVo封装来专门给页面传值。
- 4、改造商品列表页面（goods_list.html）里面的跳转逻辑，修改跳转请求
- 5、 修改之前的商品详情页面，删除thymeleaf具有的标签，让它成为最初始的html静态页面（现在静态页面不需要thymeleaf）,修改使其都使用id来标识各个组件。
- 6、 刚转到goods_detail.htm页面时，js初始化，执行下面方法：
- 7、 getDetail()方法使用ajax异步请求后台取得该页面需要的数据，然后拿到数据之后调用render（）方法渲染我们的静态页面，注意在getDetail中第一步做的是去获取商品的goodsId，因为list页面的商品详情请求是:
- 9、倒计时countDown()方法：
- 10、 将后端GoodsController里面接收商品详情页的请求的接口修改为下面代码：
页面静态化+前后端分离
1. 常用技术AngularJS、Vue.js
2. 优点：利用浏览器的缓存
本文只是简单的实现页面静态化：
将页面直接缓存到用户的浏览器上面，好处：用户访问数据的时候，不用去请求服务器，直接在本地缓存中取得需要的页面缓存。
未作页面静态化：请求某一个页面，访问缓存，查看缓存中是否有，缓存中有直接返回，缓存中没有的话，将数据渲染到html页面再存到缓存，再将整个html页面返回给客户端显示。
做了页面静态化：第一次是去请求后台要渲染好的html页面，之后的请求都是直接访问用户本地浏览器的缓存的html页面 ，静态资源，然后前端通过Ajax来访问后端，只去获取页面需要显示的数据返回即可。
商品详情页静态化
在先前的操作中我们将商品详情页面进行了redis缓存，因为这个接口只是展示相应产品详情和秒杀倒计时等信息，只要显示几个关键信息即可，所以其他的都可以实现静态化。这种技术，实际就是前端分为两部分，一部分是不改变的html块，还有一块就是数据，它只要后端传数据到前端即可，用到ajax技术来请求数据。
1、 为了在浏览器端进行缓存，以及控制缓存时间，在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/
2、在static资源文件夹下面新建我们的静态资源页面文件，（我们以.htm格式结尾），这里为什么不能用.html文件结尾是因为如果不修改继续用.html后缀，系统会默认去找templates下面的同名文件，所以我们修改它以示区别 
3、定义一个GoodsDetailVo封装来专门给页面传值。
/**
* 为了给页面传值
*/
public class GoodsDetailVo {
// 秒杀状态量初始值
private int status = 0;
// 开始时间倒计时
private int remailSeconds = 0;
private GoodsVo goodsVo;
private MiaoshaUser user;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public int getRemailSeconds() {
return remailSeconds;
}
public void setRemailSeconds(int remailSeconds) {
this.remailSeconds = remailSeconds;
}
public GoodsVo getGoodsVo() {
return goodsVo;
}
public void setGoodsVo(GoodsVo goodsVo) {
this.goodsVo = goodsVo;
}
public MiaoshaUser getUser() {
return user;
}
public void setUser(MiaoshaUser user) {
this.user = user;
}
}
4、改造商品列表页面（goods_list.html）里面的跳转逻辑，修改跳转请求
之前的请求路径：
详情 现在的请求路径：
详情 而我们现在是不需要再去服务端请求跳转，直接去客户端静态资源里面请求商品详情静态页面goods_detail.htm，这里注意一下修改一下后缀名称
5、 修改之前的商品详情页面，删除thymeleaf具有的标签，让它成为最初始的html静态页面（现在静态页面不需要thymeleaf）,修改使其都使用id来标识各个组件。
6、 刚转到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("请求有误！");
}
});
}
7、 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;
}
8、 获取到参数之后就可以去请求后端接口，获取数据去渲染：
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);
$("#miaoshaPrice").text(goods.miaoshaPrice);
$("#stockCount").text(goods.goodsStock);
countDown();
}
9、倒计时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("秒杀结束");
}
}
10、 将后端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完整代码：
商品详情
秒杀商品详情
您还没有登录，请登录后再操作
没有收货地址的提示。。。
商品名称
商品图片
![]()
秒杀开始时间
商品原价
秒杀价
库存数量