vue+java实现简易AI问答组件（基于百度文心大模型）

以下是一个简化的Vue组件示例，用于与后端Java服务进行交互，以实现AI问答的功能：

<template>
  <div>
    <input v-model="query" @input="askQuestion" placeholder="输入问题" />
    <p>{{ answer }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      query: '',
      answer: ''
    };
  },
  methods: {
    async askQuestion() {
      try {
        const response = await this.$http.post('/api/baidu-ai', { query: this.query });
        this.answer = response.data.answer;
      } catch (error) {
        console.error('问题解答失败:', error);
      }
    }
  }
};
</script>

后端Java服务需要提供一个接口，例如/api/baidu-ai，用于接收前端发送的问题并返回答案。

import org.springframework.web.bind.annotation.*;
 
@RestController
public class BaiduAiController {
 
    @PostMapping("/api/baidu-ai")
    public BaiduAiResponse askQuestion(@RequestBody Query query) {
        // 调用文心大模型的接口或服务来获取答案
        String answer = getAnswerFromBaiduAiModel(query.getQuery());
        return new BaiduAiResponse(answer);
    }
 
    private String getAnswerFromBaiduAiModel(String question) {
        // 模拟从文心大模型获取答案的过程
        return "这是对问题 '" + question + "' 的模拟AI答案。";
    }
 
    static class Query {
        private String query;
 
        // getter和setter
        public String getQuery() {
            return query;
        }
 
        public void setQuery(String query) {
            this.query = query;
        }
    }
 
    static class BaiduAiResponse {
        private String answer;
 
        public BaiduAiResponse(String answer) {
            this.answer = answer;
        }
 
        // getter和setter
        public String getAnswer() {
            return answer;
        }
 
        public void setAnswer(String answer) {
            this.answer = answer;
        }
    }
}

在这个示例中，前端Vue组件负责接收用户输入的问题，并将其发送到后端Java服务。后端服务使用模拟方法getAnswerFromBaiduAiModel来返回答案，实际应用中应替换为真实的文心大模型服务调用。