SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)

首先打开REDIS
这里为了方便就使用了windows下的redis服务器
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第1张图片

首先添加redis依赖
查看以及有redis的依赖了
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第2张图片
添加spring-cache的依赖
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第3张图片

2. 添加yml文件配置

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第4张图片

3.添加redisCache配置(配置编码)

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第5张图片

4.在业务类实现类头上加配置@Cacheable

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第6张图片

5.开启cache开关

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第7张图片

6.测试

运行页面后,查看redis可视化文件,发现已经缓存进去了。
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第8张图片


这个页面商品信息等可以使用redis进行缓存,但是例如评论区的内容实时更新,这个缓存方法就不好用了。最好评论使用异步的加载,或者页面静态化处理,把所有动态页面静态化。(因为redis即使再快,也是有查询缓存区这一操作,还是有性能消耗。)如果把动态页面静态化,访问这个页面直接把一个静态页面送回 效率会高更多

页面静态化技术。

本次使用的是thymeleaf.

1.在controller里自动注入thymeleaf模板引擎

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第9张图片

2.

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第10张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第11张图片

3.自定义写入的路径

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第12张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第13张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第14张图片
这样配置过后,在访问这个文件的时候,就会在指定路径创建该静态文件。
但是这样静态化,页面里面的数据从哪里来?
所以需要放数据,这里选择从数据库中加载
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第15张图片
之前没有使用模板引擎的时候,会把查到的数据放到modelandview里面。
这里使用了模板引擎,就放在了thymeleaf里面的上下文里面。

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第16张图片
把数据放在上下文中,然后放入模板引擎中加载
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第17张图片

4.测试

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第18张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第19张图片
这里就有了,但是没有css文件,自己手动粘贴进去
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第20张图片
注意路径,已经是本地的静态网页了。

这样的话 加载速度就提高了很多。
但是这样每次只能处理一个页面,静态化一个页面。
所以为了让他自动处理所有页面,这里引入了

任务调度

任务调度:有一个线程,专门用来处理任务
任务调度有一个cron属性,用来告诉他什么时候执行
在这里插入图片描述
秒 分 时 日 月 星期 六部分组成(有的地方是七个)
注意, 日 和星期 只能填一个,如果都填可能会遇到冲突(这个月的第几日不一定是星期几之类的)
一到这个时间,线程就开始处理了
配置@EnableScheduling 开启任务调度
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第21张图片
测试 从第0秒开始 秒执行一次
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第22张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第23张图片
http://cron.qqe2.com/
可以使用corn表达式,自动生成
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第24张图片
现在开始页面静态化处理
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第25张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第26张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第27张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第28张图片
设置每隔10分钟启动一次。
启动(这里为了方便测试 写的3秒执行一次)
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第29张图片
实际试验的时候:
在这里插入图片描述
写从第38分钟开始执行
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第30张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第31张图片
到时间后就开始自动执行了
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第32张图片

Nginx

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第33张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第34张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第35张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第36张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第37张图片
出现欢迎页面,是因为他自己配置的 去root html里面找index。html

修改成我们自己的要的,把他原有的注释掉
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第38张图片
这样访问自己的路径就可以找到这个页面了。
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第39张图片
通过nginx可以当成一个服务器,用于请求静态页面。

做到这里,还是全部是静态页面,评论的动态加载问题依然没有解决,所以用到了下面的:

动静分离

把页面里面静态的东西做静态处理,要变的东西给分离出来—动静分离
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第40张图片
首先取一下评论区的内容,弹一下试试
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第41张图片

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第42张图片
成功,所以现在开始使用

Ajax异步加载

取gid
1.内联
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第43张图片
2.SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第44张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第45张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第46张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第47张图片
上面是使用tomcat访问的,现在来使用nginx访问
发现ajax加载不出来

SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第48张图片
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第49张图片
首先判断是路径的问题
由于没有反向代理,先手动配置一个完整的路径
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第50张图片
修改之后依然显示不出来
显示No 'Access-Control-Allow-Orign‘
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第51张图片
原因是因为跨域了。这里使用到了nginx去访问tomcat里面的 自然访问不到
解决:在controller加配置 @CrossOrigin
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第52张图片
成功
SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论)_第53张图片

你可能感兴趣的:(SpringBoot商城页面结合Redis、页面静态化技术、SpringBoot的任务调度功能、Nginx、动静分离技术(商品详情/ajax动态显示评论))