5网页前台幻灯片模块

五网页前台幻灯片模块

1具体功能

NUXT前端
redis集成

2具体知识点

2.1NUXT前端知识

nuxt简介
- ajax异步请求就是局部刷新但是ajax有缺点不利于SEO（不利于搜索）
- nuxt就是解决这一问题通过Nodejs请求tomcat得到数据然后各种分装一次性返回给客户端 nuxt就是nodejs的框架
nuxt定义布局方式
- layout和page相辅相成，先加载layout布局页面
- layout里面default.vue是设置布局方式只有上下部分中间部分是没有的
- 中间部分nuxt标签引入index.vue
- nuxt框架没有集成elementui和axios，要自己引入
nuxt路由
- 固定路由
  - 路径是固定地址，不发生变化
  - ```
  <router-link to="/course" tag="li" active-class="current">
  	<a>课程</a>
  </router-link>
```
- 动态路由
  - 每次生成路由地址
  - 比如课程详情页面，每个课程Id不一样
  - nuxt的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
- 展示
  - 上面动态路由，下面静态路由

2.2首页幻灯片(banner)显示

创建子模块servcie_cms
后台先还是基本增删改查
之后集成redis

2.3redis

简介
- 一般来讲，把经常进行查询，不经常修改的数据放到redis作为缓存
- 因为首页幻灯片（banner）访问量最大，所以对banner进行缓存
确保redis在自己linux系统上已经安装好

在配置文件中配置redis地址

#redis配置
spring.redis.host=xxx
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000

#spring.redis.lettuce.pool.max-active=20
#spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间（负数表示没限制）
#spring.redis.lettuce.pool.max-idle=5
#spring.redis.lettuce.pool.min-idle=0
#最小空闲

引入依赖

创建redis缓存配置类，配置插件（/RedisConfig）

@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;
    }
}

在查询所有banner的方法上添加缓存注解@Cacheable

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

属性	解释
value	缓存名，必填，它指定了你的缓存存放在哪块命名空间
cacheNames	与value差不多，二选一即可
key	可选属性，可以使用SpEL标签自调用缓存的key

加了@Cacheable之后
- 第一次查询，首先查询数据库，把数据库查询数据返回，并且返回数据放到缓存中
- 第二次查询，查询缓存，发现缓存存有数据，直接返回
注意在service加，controller不用

@Service
public class CrmBannerServiceImpl extends ServiceImpl<CrmBannerMapper, CrmBanner> implements CrmBannerService {

    //查询所有banner
    //springboot的缓存注解 用于redis 会将Key 和value保存  这边顺序没关系
    //注意key里面要加引号
    @Cacheable(value = "banner",key = "'selectIndexList'")
    @Override
    public List<CrmBanner> selectAllBanner() {

        //根据id进行降序排列，显示排列之后前两条记录
        QueryWrapper<CrmBanner> wrapper = new QueryWrapper<>();
        wrapper.orderByDesc("id");
        //last方法，拼接sql语句
        wrapper.last("limit 2");
        List<CrmBanner> list = baseMapper.selectList(null);
        return list;
    }
}

测试
- 直接命令行keys *
- 或者使用图形化界面

posted @ 2022-07-14 15:49 fao99 阅读(278) 评论(0) 收藏举报

刷新页面返回顶部

fao99

5网页前台幻灯片模块

公告