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(i