springboot整合 redis和vue前后端分离

在Spring Boot中整合Redis和Vue前后端分离的步骤如下：

1. 添加Redis的依赖：在项目的pom.xml文件中添加以下依赖：

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

2. 配置Redis连接信息：在项目的application.yml文件中添加以下配置：

spring:
  redis:
    host: localhost
    port: 6379

这里假设Redis运行在本地，端口为6379。

3. 创建Redis配置类：创建一个Redis配置类，用于配置Redis连接工厂和Redis模板。可以参考以下示例代码：

@Configuration
@EnableCaching
public class RedisConfig extends CachingConfigurerSupport {

    @Bean
    public RedisConnectionFactory redisConnectionFactory() {
        LettuceConnectionFactory lettuceConnectionFactory = new LettuceConnectionFactory();
        lettuceConnectionFactory.setHostName("localhost");
        lettuceConnectionFactory.setPort(6379);
        return lettuceConnectionFactory;
    }

    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(redisConnectionFactory);
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer());
        return redisTemplate;
    }
}

这里使用了Lettuce作为Redis的连接工厂，并配置了序列化方式为JSON。

4. 编写Redis操作类：创建一个Redis操作类，用于进行Redis的数据操作。可以参考以下示例代码：

@Repository
public class RedisRepository {

    @Autowired
    private RedisTemplate<String, Object> redisTemplate;

    public void set(String key, Object value) {
        redisTemplate.opsForValue().set(key, value);
    }

    public Object get(String key) {
        return redisTemplate.opsForValue().get(key);
    }

    public void delete(String key) {
        redisTemplate.delete(key);
    }
}

5. 创建Vue前端项目：创建一个Vue前端项目，可以使用Vue CLI等工具进行创建。

6. 编写前端代码：在Vue前端项目中，可以使用axios等工具进行与后端的通信。可以参考以下示例代码：

import axios from 'axios';

// 设置后端API的基础URL
axios.defaults.baseURL = 'http://localhost:8080';

// 发送GET请求
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送POST请求
axios.post('/api/data', { name: 'John' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这里假设后端API的URL为`http://localhost:8080/api/data`。

7. 编写后端API：在Spring Boot项目中，编写后端API接口和相应的处理方法。可以参考以下示例代码：

@RestController
@RequestMapping("/api")
public class DataController {

    @Autowired
    private RedisRepository redisRepository;

    @GetMapping("/data")
    public String getData() {
        // 从Redis中获取数据
        Object data = redisRepository.get("data");
        return data != null ? data.toString() : "No data found";
    }

    @PostMapping("/data")
    public String setData(@RequestBody Map<String, Object> requestData) {
        // 将数据存入Redis
        redisRepository.set("data", requestData);
        return "Data saved";
    }
}

至此，你已经完成了Spring Boot整合Redis和Vue前后端分离的配置和代码编写。