Java+SpringBoot调用通义千问的大语言模型的API及前端Vue实现联调

由于原始代码较为复杂，以下是一个简化的例子，展示如何在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.com

Vue前端部分:

<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类，但在实际应用中应该按需添加。