由于原始代码较为复杂，以下是一个简化的例子，展示如何在Spring Boot后端使用RestTemplate调用API，并在Vue前端进行展示。
Spring Boot后端Controller部分:
@RestController
@RequestMapping("/api/questions")
public class QuestionController {
@Autowired
private RestTemplate restTemplate;
@Value("${thousand_question_model_url}")
private String thousandQuestionModelUrl;
@GetMapping("/ask")
public String askQuestion(@RequestParam String question) {
// 调用模型API
String response = restTemplate.getForObject(thousandQuestionModelUrl + "/ask?question={question}", String.class, question);
return response;
}
}application.properties:
thousand_question_model_url=http://model.thousand.comVue前端部分:
<template>
<div>
<input v-model="userQuestion" placeholder="Enter your question">
<button @click="askModel">Ask Model</button>
<div v-if="modelAnswer">
<p>Model Answer: {{ modelAnswer }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userQuestion: '',
modelAnswer: ''
};
},
methods: {
async askModel() {
try {
const response = await this.$http.get('/api/questions/ask', {
params: {
question: this.userQuestion
}
});
this.modelAnswer = response.data;
} catch (error) {
console.error('Error asking the model:', error);
}
}
}
};
</script>在这个例子中，Spring Boot后端使用RestTemplate调用模拟的千问大语言模型API，并将结果返回给Vue前端。前端使用axios进行HTTP请求。这个例子省略了具体的Service和Configuration类，但在实际应用中应该按需添加。