以下是一个简单的例子，展示了如何在Vue.js前端和Spring Boot后端之间进行数据交互。
后端（Spring Boot）:
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class GreetingController {
@GetMapping("/greeting")
public Greeting greeting() {
return new Greeting("Hello, Spring Boot!");
}
}
class Greeting {
private final String content;
public Greeting(String content) {
this.content = content;
}
public String getContent() {
return content;
}
}前端（Vue.js）:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
message: ''
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/greeting')
.then(response => {
this.message = response.data.content;
})
.catch(error => {
console.error('There was an error!', error);
});
}
}
};
</script>在这个例子中，Spring Boot后端提供了一个简单的REST API，而Vue.js前端通过axios库在created钩子函数中向该API发送GET请求，并将返回的数据赋值给本地变量，以在模板中显示。这个例子展示了前后端如何交互，但不包括详细的错误处理和优化。