5-1 页面缓存 和 url缓存

一、页面缓存

1、定义GoodsKey

package com.mydre.miaosha.redis;
public class GoodsKey extends BasePrefix{
private GoodsKey(int expireSeconds, String prefix){
super(expireSeconds, prefix);
}
public static GoodsKey getGoodsList = new GoodsKey(60, "gl");//设置页面缓存的时间是1分钟,在缓存的同时保持页面的更新

}

2、GoodsController

@RequestMapping(value="/to_list", produces="text/html")
@ResponseBody
    public String list(Model model, MiaoshaUser user,HttpServletRequest request,HttpServletResponse response) {
List<GoodsVo> goodsList =  goodsService.listGoodsVo();
model.addAttribute("goodsList", goodsList);
model.addAttribute("user", user);
        //return "goods_list";
//从redis数据库中获取数据
String html = redisService.get(GoodsKey.getGoodsList, "", String.class);
//取缓存
if(!StringUtils.isEmpty(html)){
return html;
}
//手动渲染
SpringWebContext springWebContext = new SpringWebContext(request, response, request.getServletContext(), request.getLocale(), model.asMap(), applicationContext);

html = thymeleafViewResolver.getTemplateEngine().process("goods_list", springWebContext);
redisService.set(GoodsKey.getGoodsList, "", html);
if(!StringUtils.isEmpty(html)){
return html;
}
return html;

}

3、查看缓存。在刷新将要被缓存的页面之后,理解查看redis数据库中的数据:

127.0.0.1:6379> keys GoodsKey:gl
1) "GoodsKey:gl"
127.0.0.1:6379> get GoodsKey:gl
"<!DOCTYPE html>\n\n<html><!-- \xe5\xbc\x95\xe5\x85\xa5thymeleaf \xe7\x9a\x84 \xe5\x91\xbd\xe5\x90\x8d\xe7\xa9\xba\xe9\x97\xb4\xef\xbc\x88th\xef\xbc\x89 -->\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />\n<title>\xe5\x95\x86\xe5\x93\x81\xe5\x88\x97\xe8\xa1\xa8</title>\n<!-- jquery -->\n<!-- \xe8\xbf\x99\xe9\x87\x8c / \xe4\xbb\xa3\xe8\xa1\xa8 \xe7\x9a\x84\xe6\x98\xafstatic\xe6\x96\x87\xe4\xbb\xb6\xe5\xa4\xb9\xef\xbc\x8c\xe8\xbf\x99\xe6\x98\xafthymeleaf\xe5\xbc\x95\xe5\x85\xa5\xe9\x9d\x99\xe6\x80\x81\xe6\x96\x87\xe4\xbb\xb6\xe7\x9a\x84\xe6\x96\xb9\xe5\xbc\x8f\xe3\x80\x82 -->\n<script type=\"text/javascript\" src=\"/js/jquery.min.js\"></script>\n<!-- bootstrap -->\n<link rel=\"stylesheet\" type=\"text/css\" href=\"/bootstrap/css/bootstrap.min.css\" />\n<script type=\"text/javascript\" src=\"/bootstrap/js/bootstrap.min.js\"></script>\n<!-- jquery-validation -->\n<script type=\"text/javascript\" src=\"/jquery-validation/jquery.validate.min.js\"></script>\n<script type=\"text/javascript\" src=\"/jquery-validation/localization/messages_zh.js\"></script>\n<!-- layer -->\n<script type=\"text/javascript\" src=\"/layer/layer.js\"></script>\n</head>\n<body>\n<div class=\"panel panel-default\">\n\t<div class=\"panel-heading\">\xe7\xa7\x92\xe6\x9d\x80\xe5\x95\x86\xe5\x93\x81\xe5\x88\x97\xe8\xa1\xa8</div>\n\t<table id=\"goodslist\" class=\"table\">\n\t\t<tr>\n\t\t\t<td>\xe5\x95\x86\xe5\x93\x81\xe5\x90\x8d\xe7\xa7\xb0</td><td>\xe5\x95\x86\xe5\x93\x81\xe5\x9b\xbe\xe7\x89\x87</td><td>\xe5\x95\x86\xe5\x93\x81\xe5\x8e\x9f\xe4\xbb\xb7</td><td>\xe7\xa7\x92\xe6\x9d\x80\xe4\xbb\xb7</td><td>\xe5\xba\x93\xe5\xad\x98\xe6\x95\xb0\xe9\x87\x8f</td><td>\xe8\xaf\xa6\xe6\x83\x85</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>iphoneX</td>\n\t\t\t<td><img width=\"100\" height=\"100\" src=\"/img/iphoneX.png\" /></td>\n\t\t\t<td>8765.0</td>\n\t\t\t<td>0.01</td>\n\t\t\t<td>3</td>\n\t\t\t<td><a href=\"/goods/to_detail/1\">\xe8\xaf\xa6\xe6\x83\x85</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\xe5\x8d\x8e\xe4\xb8\xbaMate9</td>\n\t\t\t<td><img width=\"100\" height=\"100\" src=\"/img/meta9.png\" /></td>\n\t\t\t<td>3212.0</td>\n\t\t\t<td>0.01</td>\n\t\t\t<td>9</td>\n\t\t\t<td><a href=\"/goods/to_detail/2\">\xe8\xaf\xa6\xe6\x83\x85</a></td>\n\t\t</tr>\n\t</table>\n</div>\n</body>\n</html>"

127.0.0.1:6379>


二、url缓存

比如针对不同的商品,对应着不同的商品详情,不同的商品详情是根据url中的特定字符来区分的,比如商品的id,在缓存的时候要缓存进去。

package com.mydre.miaosha.redis;
public class GoodsKey extends BasePrefix{
private GoodsKey(int expireSeconds, String prefix){
super(expireSeconds, prefix);
}
public static GoodsKey getGoodsList = new GoodsKey(60, "gl");//设置页面缓存的时间是1分钟,在缓存的同时保持页面的更新
public static GoodsKey getGoodsDetailt = new GoodsKey(60, "gd");//

}


@RequestMapping(value="/to_detail/{goodsId}", produces="text/html")//路由是这样写的 {goodsId}
@ResponseBody
    public String detail(Model model, MiaoshaUser user, @PathVariable("goodsId")long goodsId,HttpServletRequest request,HttpServletResponse response) {
// if(user == null){
// return "login";
// }

//从redis数据库中获取数据
//取缓存
String html = redisService.get(GoodsKey.getGoodsDetailt, "" + goodsId, String.class);
if(!StringUtils.isEmpty(html)){
return html;
}

//数据的存取是根据内部的逻辑来的,但是页面的缓存是根据key来的,一个goodsId可以标记一个缓存。
GoodsVo oneGoodsVo = goodsService.getOneGoodsVoById(goodsId);
long startAt = oneGoodsVo.getStartDate().getTime();
long endAt = oneGoodsVo.getEndDate().getTime();
long current = System.currentTimeMillis();
int remainSeconds = 0;
int miaoshaStatus = 0;//0未开始 1正在进行 2已结束
if(current < startAt){//秒杀还未开始
miaoshaStatus = 0;
remainSeconds = (int)((startAt - current)/1000);
}else if(current > endAt){//秒杀已经结束
miaoshaStatus = 2;
remainSeconds = -1;
}else{//秒杀正在进行
miaoshaStatus = 1;
remainSeconds = 0;
}
model.addAttribute("goods", oneGoodsVo);
model.addAttribute("user", user);
model.addAttribute("remainSeconds", remainSeconds);
model.addAttribute("miaoshaStatus", miaoshaStatus);
        //return "goods_detail";



//手动渲染
SpringWebContext springWebContext = new SpringWebContext(request, response, request.getServletContext(), request.getLocale(), model.asMap(), applicationContext);

html = thymeleafViewResolver.getTemplateEngine().process("goods_detail", springWebContext);
redisService.set(GoodsKey.getGoodsDetailt, "" + goodsId, html);
if(!StringUtils.isEmpty(html)){
return html;
}
return html;

}

查看redis缓存:

127.0.0.1:6379> keys GoodsKey:gd1
1) "GoodsKey:gd1"
127.0.0.1:6379> keys GoodsKey:gd2
1) "GoodsKey:gd2"

127.0.0.1:6379> get GoodsKey:gd1

说明已经缓存成功。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5的video标签默认会根据视频的长度和大小进行缓存,但是这种方式可能会占用大量的带宽和内存,对于用户体验和网站性能都有一定的影响。如果你希望视频在页面内全部缓存,可以使用以下方法: 1. 使用preload属性设置预加载方式为auto,如下所示: ```html <video src="video.mp4" preload="auto"></video> ``` 2. 在视频加载完成后,使用JavaScript将视频的缓存数据保存到本地缓存中,下次访问时直接从本地缓存中读取,如下所示: ```javascript var video = document.getElementsByTagName('video')[0]; video.addEventListener('canplaythrough', function() { var blob = new Blob([this.response], { type: 'video/mp4' }); var url = URL.createObjectURL(blob); localStorage.setItem('video', url); }); ``` 在这段代码中,我们监听了视频的canplaythrough事件,表示视频加载完成。然后将视频的响应数据保存到Blob对象中,并将Blob对象的URL存储到本地缓存中。 3. 下次访问时,从本地缓存中读取视频的URL,并设置到video标签的src属性中,如下所示: ```javascript var video = document.getElementsByTagName('video')[0]; var url = localStorage.getItem('video'); if (url) { video.src = url; } ``` 这样就可以实现网页内全部加载视频并缓存到本地的功能。但需要注意的是,这种方式可能会对用户的网络流量和设备存储空间造成一定的影响,需要根据实际情况进行选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值