我要怎么样才能收到chatglm的api返回的内容

我想实现在koishi控制台与chatglm聊天,方式是类似于chatgpt的聊天框的形式,但我遇到了一些问题,这个是我的vue文件:

<template>
  <div
    class="container"
    :style="{ backgroundImage: `url(${backgroundImage})` }"
  >
    <div class="title">ChatGlm</div>
    <div class="dialog">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <span class="username">{{ message.username }}</span>
        <span class="content">{{ message.content }}</span>
      </div>
      <div class="input">
        <input
          v-model="newMessage"
          @keyup.enter="sendMessage"
          placeholder="请输入..."
          :style="inputStyle"
        />
      </div>
    </div>
    <div class="buttons">
      <button @click="clearMessages">D</button>
      <button @click="changeFontColor">A</button>
      <button @click="increaseFontSize">+</button>
      <button @click="decreaseFontSize">-</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      messages: [],
      newMessage: "",
      username: "用户",
      backgroundImage: "https://picsum.photos/800/600",
      fontSize: 16,
      fontColor: "white",
    };
  },

  methods: {
    sendMessage() {
      if (this.newMessage.trim() !== "") {
        let messageContent = this.newMessage;
        this.messages.push({
          username:
            this.username.trim() === "" ? "匿名用户" : this.username.trim(),
          content: messageContent,
        });
        axios
          .get("https://api.chat.t4wefan.pub/chatglm", {
            params: {
              msg: messageContent,
              usrid: "12345",
              source: "glmwebui",
            },
          })
          .then((response) => {
            this.messages.push({
              username: "ChatGlm",
              content: response.data,
            });
          });
        this.newMessage = "";

        // 将新消息滚动到底部
        this.$nextTick(() => {
          let messageList = this.$el.querySelector(".message-list");
          messageList.scrollTop = messageList.scrollHeight;
        });
      }
    },

    increaseFontSize() {
      this.fontSize++;
    },

    decreaseFontSize() {
      this.fontSize--;
    },

    changeFontColor() {
      this.fontColor = this.fontColor === "white" ? "black" : "white";
    },

    clearMessages() {
      this.messages = [];
    },
  },

  computed: {
    inputStyle() {
      return {
        fontSize: `${this.fontSize}px`,
        color: this.fontColor,
      };
    },
  },
};
</script>

我通过 sendMessage函数把用户输入的消息发送给chatglm的api,服务器那边也显示收到了,但是我这边却没有正确返回api的回复。

这个 source: “glmwebui”,表明这个请求是我发出的:

这段代码的核心其实是sendMessage函数:

 sendMessage() {
      if (this.newMessage.trim() !== "") {
        let messageContent = this.newMessage;
        this.messages.push({
          username:
            this.username.trim() === "" ? "匿名用户" : this.username.trim(),
          content: messageContent,
        });
        axios
          .get("https://api.chat.t4wefan.pub/chatglm", {
            params: {
              msg: messageContent,
              usrid: "12345",
              source: "glmwebui",
            },
          })
          .then((response) => {
            this.messages.push({
              username: "ChatGlm",
              content: response.data,
            });
          });
        this.newMessage = "";

        // 将新消息滚动到底部
        this.$nextTick(() => {
          let messageList = this.$el.querySelector(".message-list");
          messageList.scrollTop = messageList.scrollHeight;
        });
      }
    },

我试过向其他的api发起请求,比如“每日一句”的api,他的返回是正常是的:

   sendMessage() {
      if (this.newMessage.trim() !== "") {
        let messageContent = this.newMessage;
        this.messages.push({
          username:
            this.username.trim() === "" ? "匿名用户" : this.username.trim(),
          content: messageContent,
        });
        axios
          .get("https://api.chat.t4wefan.pub/chatglm", {
            params: {
              msg: messageContent,
              usrid: "12345",
              source: "glmwebui",
            },
          })
          .then((response) => {
            this.messages.push({
              username: "ChatGlm",
              content: response.data,
            });
          });
        this.newMessage = "";

    },

聊天框也有看到他返回的信息:

但我不知道为什么我收不到chatglm服务器的回复,我问了一下api主人t4关于api的返回格式,她表示是纯字符串:

情况就是这样了,我是vue新手,在这里请教一下各位大佬,我的代码出现了哪些问题,怎么样才能接收到api返回的内容

我把整个插件也打包了,放在这里: glm-webui/custom-page.vue at main · wochenlong/glm-webui · GitHub

3 个赞