用springboot和vue写一个在线咨询的代码

非常感谢您的提问！以下是一个简单的在线咨询系统的代码示例，使用了Spring Boot和Vue.js：

后端代码（使用Java和Spring Boot）：

@RestController
@RequestMapping("/api")
public class ChatController {

    @PostMapping("/chat")
    public String chat(@RequestBody String message) {
        // 在这里编写与 ChatGPT 的交互逻辑
        return "ChatGPT 回答的内容";
    }
}

前端代码（使用Vue.js）：

<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      <p v-if="message.type === 'user'">{{ message.content }}</p>
      <p v-if="message.type === 'bot'">{{ message.content }}</p>
    </div>
    <input v-model="inputMessage" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: "",
    };
  },
  methods: {
    async sendMessage() {
      const message = this.inputMessage;
      this.inputMessage = "";
      this.messages.push({ id: Date.now(), type: "user", content: message });

      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ message }),
      });
      const data = await response.json();
      this.messages.push({ id: Date.now(), type: "bot", content: data });
    },
  },
};
</script>

请注意，这只是一个简单的示例，您需要根据您的具体需求进行修改和扩展。