day11--首页数据显示和添加Redis缓冲

day11--首页数据显示和添加Redis缓冲

谷粒学院功能简介及系统架构 https://www.cnblogs.com/coderD/p/14506161.html

day01--MybatisPlus的使用 https://www.cnblogs.com/coderD/p/14506180.html

day02--环境搭建与讲师管理接口开发 https://www.cnblogs.com/coderD/p/14506295.html

day03--项目前端相关基础知识 https://www.cnblogs.com/coderD/p/14506446.html

day04--项目前端相关基础知识（二） https://www.cnblogs.com/coderD/p/14506481.html

day05--讲师管理模块前端开发 https://www.cnblogs.com/coderD/p/14506505.html

day06--讲师管理模块前端开发 https://www.cnblogs.com/coderD/p/14506540.html

day07--课程发布-添加课程信息 https://www.cnblogs.com/coderD/p/14506574.html

day08--课程发布-添加课程信息 https://www.cnblogs.com/coderD/p/14506609.html

day09--课程列表和整合阿里云视频点播 https://www.cnblogs.com/coderD/p/14506636.html

day10--微服务调用 https://www.cnblogs.com/coderD/p/14506649.html

day11--首页数据显示和添加Redis缓冲 https://www.cnblogs.com/coderD/p/14506655.html

day12--首页登录和注册 https://www.cnblogs.com/coderD/p/14506657.html

day13--微信扫码登陆 https://www.cnblogs.com/coderD/p/14506670.html

day14--首页课程和名师功能 https://www.cnblogs.com/coderD/p/14506677.html

day15--统计分析 https://www.cnblogs.com/coderD/p/14506685.html

day16--权限管理 https://www.cnblogs.com/coderD/p/14506689.html

day17--权限管理和配置服务 https://www.cnblogs.com/coderD/p/14506701.html

1、搭建项目前端环境（NUXT）

1.1、服务器渲染技术NUXT

1.1.1、什么是服务器渲染

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。

1.1.2、什么是NUXT

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

官网网站：

https://zh.nuxtjs.org/

1.1.3、NUXT目录结构

（1）资源目录 assets

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

（2）组件目录 components

用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

（3）布局目录 layouts

用于组织应用的布局组件。

（4）页面目录 pages

用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

（5）插件目录 plugins

用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

（6）nuxt.config.js 文件

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

2、Redis缓冲

2.1、Redis简介

Redis是当前比较热门的NOSQL系统之一，它是一个开源的使用ANSI c语言编写的key-value存储系统（区别于MySQL的二维表格的形式存储。）。和Memcache类似，但很大程度补偿了Memcache的不足。和Memcache一样，Redis数据都是缓存在计算机内存中，不同的是，Memcache只能将数据缓存到内存中，无法自动定期写入硬盘，这就表示，一断电或重启，内存清空，数据丢失。所以Memcache的应用场景适用于缓存无需持久化的数据。而Redis不同的是它会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件，实现数据的持久化。

Redis的特点：

1，Redis读取的速度是110000次/s，写的速度是81000次/s；

2，原子 。Redis的所有操作都是原子性的，同时Redis还支持对几个操作全并后的原子性执行。

3，支持多种数据结构：string（字符串）；list（列表）；hash（哈希），set（集合）；zset(有序集合)

4，持久化，集群部署

5，支持过期时间，支持事务，消息订阅

2.2、项目集成Redis

2.2.1、在common模块中添加依赖

由于 redis 缓存是公共应用，所以我们把依赖与配置添加到了 common 模块下面，在 common 模块 pom.xml 下添加以下依赖

<!-- redis -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

<!-- spring2.X集成redis所需common-pool2-->
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-pool2</artifactId>
    <version>2.6.0</version>
</dependency>

2.2.2、在service-base模块添加redis配置类

RedisConfig.java

@EnableCaching
@Configuration
public class RedisConfig extends CachingConfigurerSupport {
    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {
        RedisTemplate<String, Object> template = new RedisTemplate<>();
        RedisSerializer<String> redisSerializer = new StringRedisSerializer();
        Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);
        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
        jackson2JsonRedisSerializer.setObjectMapper(om);
        template.setConnectionFactory(factory);
        
        //key序列化方式
        template.setKeySerializer(redisSerializer);

        //value序列化
        template.setValueSerializer(jackson2JsonRedisSerializer);
        
        //value hashmap序列化
        template.setHashValueSerializer(jackson2JsonRedisSerializer);
        return template;
    }

    @Bean
    public CacheManager cacheManager(RedisConnectionFactory factory) {
        RedisSerializer<String> redisSerializer = new StringRedisSerializer();
        Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class);

        //解决查询缓存转换异常的问题
        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
        om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
        jackson2JsonRedisSerializer.setObjectMapper(om);

        // 配置序列化（解决乱码的问题）,过期时间600秒
        RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
                .entryTtl(Duration.ofSeconds(600))           .serializeKeysWith(RedisSerializationContext.SerializationPair.fromSerializer(redisSerializer))          .serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(jackson2JsonRedisSerializer))
                .disableCachingNullValues();
        RedisCacheManager cacheManager = RedisCacheManager.builder(factory)
                .cacheDefaults(config)
                .build();
        return cacheManager;
    }
}

2.2.3、在接口中添加redis缓冲

由于首页数据变化不是很频繁，而且首页访问量相对较大，所以我们有必要把首页接口数据缓存到redis缓存中，减少数据库压力和提高访问速度。

改造service-cms模块首页banner接口，首页课程与讲师接口类似

2.2.3.1、Spring Boot缓冲注解

（1）缓冲@Cacheable

根据方法对其返回结果进行缓存，下次请求时，如果缓存存在，则直接读取缓存数据返回；如果缓存不存在，则执行方法，并把返回的结果存入缓存中。一般用在查询方法上。

查看源码，属性值如下：

(2)缓冲@CachePut

使用该注解标志的方法，每次都会执行，并将结果存入指定的缓存中。其他方法可以直接从响应的缓存中读取缓存数据，而不需要再去查询数据库。一般用在新增方法上。

查看源码，属性值如下：

(3)缓冲@CacheEvict

使用该注解标志的方法，会清空指定的缓存。一般用在更新或者删除方法上

查看源码，属性值如下：

2.2.3.2、启动redis服务

2.2.3.3、连接redis服务可能遇到的问题

（1）关闭liunx防火墙

（2）找到redis配置文件， 注释一行配置

（3）如果出现下面错误提示

修改 protected-mode yes

改为

protected-mode no