[教程]Vue调用Java后端，本地快速跑通指南

1. 准备工作

在开始之前，请确保您已安装以下软件：

• Node.js和npm：用于搭建Vue项目环境。
• Java开发环境：包括JDK和IDE（如IntelliJ IDEA或Eclipse）。
• Maven或Gradle：用于构建Java项目。

2. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create vue-project
cd vue-project

3. 安装Axios

Axios是一个基于Promise的HTTP客户端，用于在浏览器和node.js中发起HTTP请求。

npm install axios

4. 配置Axios

在src目录下创建一个名为http.js的文件，用于配置Axios：

import axios from 'axios';
// 创建axios实例
const service = axios.create({ baseURL: 'http://localhost:8080', // 后端接口地址 timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use( config => { // 可以在这里添加请求头或其他配置 return config; }, error => { // 处理请求错误 return Promise.reject(error); }
);
// 响应拦截器
service.interceptors.response.use( response => { // 处理响应数据 return response.data; }, error => { // 处理响应错误 return Promise.reject(error); }
);
export default service;

5. 创建Java后端项目

使用Maven或Gradle创建一个新的Java项目，并添加以下依赖：

pom.xml (Maven)

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
</dependencies>

build.gradle (Gradle)

dependencies { implementation 'org.springframework.boot:spring-boot-starter-web'
}

6. 编写Java后端接口

在src/main/java/com/example/vueproject目录下创建一个名为ApiController.java的文件，并添加以下代码：

package com.example.vueproject;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class ApiController { @GetMapping("/api/hello") public String hello() { return "Hello, Vue!"; }
}

7. 启动Java后端

运行以下命令启动Java后端：

mvn spring-boot:run
# 或
./gradlew bootRun

8. 在Vue项目中调用Java后端接口

在src/components目录下创建一个名为HelloWorld.vue的文件，并添加以下代码：

<template> <div> <h1>{{ message }}</h1> </div>
</template>
<script>
import axios from '@/http';
export default { data() { return { message: '' }; }, mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/hello').then(response => { this.message = response.data; }).catch(error => { console.error('Error fetching data:', error); }); } }
};
</script>

9. 运行Vue项目

在终端中运行以下命令启动Vue项目：

npm run serve

现在，您应该在浏览器中看到以下内容：

Hello, Vue!

恭喜您！您已成功在本地跑通Vue调用Java后端的过程。