NUXT搭建及Redis的基本使用

最新推荐文章于 2024-08-16 21:50:24 发布

Nbdqsz

最新推荐文章于 2024-08-16 21:50:24 发布

阅读量1.3k

点赞数 11

文章标签： redis 数据库缓存 java

本文链接：https://blog.csdn.net/Nbdqsz/article/details/132287005

版权

1.搭建项目前台系统环境

1.NUXT（前端框架）

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

客户端访问服务端服务端中tomcat和node.js进行访问会把数据一次性全部返回给客户端有利于SEO.

正常框架使用ajax：异步交互，缺点 (不利于SEO -- 百度搜素排名是否靠前，匹配度降低。 )

NUXT环境目录结构

1..nuxt 编译后的文件

2.assets 静态资源如：css，js

3.components 项目使用的相关组件

4.layouts 定义网页布局（先引入default.vue 头和尾的布局--->（<ifream/>）引入pages中的内容

5.pages 项目中具体的页面

6.nuxt.config.js 核心配置文件

2.整合前台系统

nuxt中的路由：1.固定路由（路径写死，路径是不变的）

在pages中创建文件夹 course 在course文件夹创建index.vue

2.动态路由（每次生成的路由地址不一样根据点击不同来显示不同的内容）

如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名

在pages下的course目录下创建_id.vue

3.首页显示banner显示（轮播图）

1.安装轮播图插件 npm install vue-awesome-swiper（注意版本问题）

2.配置幻灯片插件

（1）在 plugins 文件夹下新建文件

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

（2）在nuxt.config.js添加组件

plugins: [

{ src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }

css: [

'swiper/dist/css/swiper.css'

（3）复制项目中使用的静态资源（assets目录中）

（4）在defalt.vue中引入page页面下的内容

（5）幻灯片插件和js切换效果

</a>

</div>

</a>

</div>

</div>

export default {

data () {

return {

swiperOption: {

//配置分页

pagination: {

el: '.swiper-pagination'//分页的dom节点

//配置导航

navigation: {

nextEl: '.swiper-button-next',//下一页dom节点

prevEl: '.swiper-button-prev'//前一页dom节点

}

4.NUXT不带axios需要自己下载封装

1.npm install axios （下载axios）

2.封装axios

import axios from 'axios'

const service = axios.create({

baseURL: 'http://localhost:9001',

timeout: 20000

})

</span>

</span>

export default service

5.首页数据使用redis缓存

redis的特点：

1.基于key-vaue的形式进行存储

2..读写速率可观

3.支持多种数据接口：String list hash set zset

4.支持持久化通过内存存储的也可以存储到内容中（aof和rdb）

5.支持过期时间，支持事务

redis的使用写入到common中

（1）引入spingboot整合redis相关依赖

（2）创建redis缓存配置类

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

}

3.在需要缓存的方法加上需要的注解 -redis-cli -h localhost -p 6379 -a 123456 连接redis

连接须知：1.关闭服务其防火墙 2.bind 127.0.0.1 3.protected-mode no

(1). @Cacheable(value = "banner",key = "'selectIndexList'")

（加上注解的方法在第一次访问是会把数据放到缓存中，第二次查询先去缓存中查找是否有缓存的数据，有的话拿出来没有的话再去查询数据库）一般用在查询上

（2）@CachePut 同时一般用在添加

（3）@CacheEvict(value = "banner", allEntries=true)

--其中allEntries方法可以控制是否删除所有缓存的数据一般就在更新和修改