VUE.js

一、安装工具

1.安装Node.js（Vue运行必须）

打开网址：

nodejs.org/

下载LTS版本

不要勾选 Automatically install the necessary tools 这个复选框

然后Win+R→CMD→node -v→npm -v

两个命令都能正常输出版本号（比如 v20.18.0、10.8.2）= 安装成功

二、从零把Vue项目跑起来

1.创建Vue项目（CMD里执行）

进桌面

cd Desktop

创建Vue项目

npm create vue@latest

全选No，只留最基础的

✔ Project name: … vue-demo ✔ Add TypeScript? … No ✔ Add JSX Support? … No ✔ Add Vue Router for Single Page Application development? … No ✔ Add Pinia for state management? … No ✔ Add Vitest for Unit testing? … No ✔ Add an End-to-End Testing Solution? … No ✔ Add ESLint for code quality? … No ✔ Add Prettier for code formatting? … No

YES

然后在CMD里

# 1.进入项目目录
cd vue-demo

#2.安装依赖（必须执行，否则项目跑不起来）
npm install

#3.启动Vue项目
npm run dev

看到 Local: http://localhost:5173/ 就是启动成功！

三、前后端联调

src/App.vue替换成下面

<template> 
    <div class="container"> 
        <h1>Vue + Spring Boot + Redis 联调测试</h1> 
        <button @click="setRedis">存入Redis</button> 
        <button @click="getRedis">从Redis取值</button>
        <div v-if="result" class="result"> 
            <h3>返回结果：{{ result }}</h3> 
        </div> 
    </div> 
</template> 

<script setup> 
import { ref } from 'vue' 

const result = ref('') 

// 存入
Redis const setRedis = async () => { 
    try { 
        const res = await fetch('/api/redis/set') 
        const data = await res.text() 
        result.value = data 
    } catch (err) {
        result.value = '请求失败：' + err.message 
    } 
} 

// 从Redis取值
const getRedis = async () => { 
    try { 
        const res = await fetch('/api/redis/get') 
        const data = await res.text() 
        result.value = data 
    } catch (err) { 
        result.value = '请求失败：' + err.message 
    } 
} 
</script> 

<style scoped> 
.container { 
    max-width: 800px; 
    margin: 50px auto;
    text-align: center; 
}
button { 
    margin: 20px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
} 
.result { 
    margin-top: 30px; 
    padding: 20px; 
    border: 1px solid #eee; 
    border-radius: 8px; 
}
</style>

Spring Boot里加一个跨域配置类src->main->java->包->新建文件夹config->CorsConfig.java

com.example.demo
├── DemoApplication.java (主启动类) 
├── controller (你之前的RedisController)
└── config ✅ 新建这个包
        └── CorsConfig.java ✅ 放在这里！

package com.example.demo.config; 
import org.springframework.context.annotation.Configuration; 
import org.springframework.web.servlet.config.annotation.CorsRegistry; 
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; 
@Configuration 
public class CorsConfig implements WebMvcConfigurer { 
     
    public void addCorsMappings(CorsRegistry registry) { 
        registry.addMapping("/**") 
                //允许所有来源
                .allowedOriginPatterns("*") 
                //允许所有请求方法
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") 
                //允许所有请求头
                .allowedHeaders("*")
                //允许携带Cookie（如果后台做登录会用到）
                .allowCredentials(true) 
                //预检请求有效期，单位秒
                .maxAge(3600); 
    } 
}

Vue代理配置

打开Vue项根目录的vite.config.js文件

修改里面的server配置，加上代理：

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 

// https://vitejs.dev/config/
export default defineConfig({ 
    plugins: [vue()], 
    server: { 
        port:5173,//保持默认端口
        proxy: { 
            // 把 /api 开头的请求，代理到后端 8080 端口 
            '/api': { 
            target: 'http://localhost:8080', // 后端地址
            changeOrigin: true, // 跨域核心开关
            rewrite: (path) => path.replace(/^\/api/,'')// 去掉 /api 前缀
            }
        }
    } 
})

记得在CMD里面Ctrl+C关闭Redis

然后再重启

npm run dev

运行后访问

http://localhost:5173