admin

12_vuecli/mediaapp/src/views/talk/TalkPage.vue

@@ -1,97 +1,111 @@
 <template>
   <div class="talk-container">
     <div class="talk-list">
-        <div class="talk-item" v-for="(item,index) in talkList" :key="index">
-            <div class="ask">{{item.ask}}</div>
-            <div class="answer">{{item.answer}}</div>
-        </div>
+      <div class="talk-item" v-for="(item, index) in talkList" :key="index">
+        <div class="ask">{{ item.ask }}</div>
+        <div class="answer">{{ item.answer }}</div>
+      </div>
     </div>
     <div class="talk-form">
-      <van-field
-        v-model="askInp"
-        clearable
-        placeholder="发消息..."
-      >
+      <van-field v-model="askInp" clearable placeholder="发消息...">
         <template #button>
-          <van-button @click="sendMessage" color="#6165a9" size="small" type="primary">发送</van-button>
+          <van-button
+            @click="sendMessage"
+            color="#6165a9"
+            size="small"
+            type="primary"
+            >发送</van-button
+          >
         </template>
       </van-field>
     </div>
   </div>
 </template>
 <style scoped>
-.talk-container .talk-form{
-    position: fixed;
-    bottom: 1rem;
-    left: 0;
-    width: 100%;
-    box-shadow: 0 0 10px #ccc;
+.talk-container .talk-form {
+  position: fixed;
+  bottom: 1rem;
+  left: 0;
+  width: 100%;
+  box-shadow: 0 0 10px #ccc;
 }
-.talk-item{
-    display: flex;
-    flex-direction: column;
-    padding:.2rem;
+.talk-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0.2rem;
 }
-.talk-item .ask{
-    align-self: flex-end;
-    font-size: .3rem;
-    color: #fff;
-    background-color: #6165a9;
-    padding:.1rem .2rem;
-    border-radius: .2rem;
+.talk-item .ask {
+  align-self: flex-end;
+  font-size: 0.3rem;
+  color: #fff;
+  background-color: #6165a9;
+  padding: 0.1rem 0.2rem;
+  border-radius: 0.2rem;
+  margin-bottom: 0.2rem;
 }
-.talk-item .answer{
-    align-self: flex-start;
-    font-size: .3rem;
-    color: #111;
-    background-color: #eee;
-    padding:.1rem .2rem;
-    border-radius: .2rem;
-
+.talk-item .answer {
+  align-self: flex-start;
+  font-size: 0.3rem;
+  color: #111;
+  background-color: #eee;
+  padding: 0.1rem 0.2rem;
+  border-radius: 0.2rem;
 }
 </style>
 <script>
+// import axios from 'axios';
 export default {
   data() {
     return {
       askInp: "",
-      talkList: []
+      talkList: [],
     };
   },
   methods: {
-    sendMessage(){
-        // this.talkList.push({
-        //     ask: this.askInp,
-        //     answer: "回答"
-        // })
-        // this.askInp = "";
-
-        fetch("/doubao/chat/completions",{
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": "Bearer ******"
+    // 发送消息
+    async sendMessage() {
+      let res = await fetch("/doubao/chat/completions",{
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": "Bearer 自己的api-key" 
+        },
+        body: JSON.stringify({
+          stream:true,
+          model:"doubao-1-5-pro-32k-250115",
+          messages:[
+            {
+              role:"system",
+              content:"You are a helpful assistant."
             },
-            body: JSON.stringify({
-                model:"doubao-1-5-pro-32k-250115",
-                messages:[
-                    {
-                        role: "assistant",
-                        content: "You are a helpful assistant."
-                    },
-                    {
-                        role: "user",
-                        content: "Hello!"
-                    }
-                ]
-            })
-        }).then(res => res.json()).then(res => {
-            console.log(res);
-        }).catch(err => {
-            console.log(err);
+            {
+              role:"user",
+              content:this.askInp
+            }
+          ]
         })
+      })
+      // 获取getReader 用作解析返回的数据编码
+      let reader = res.body.getReader();
+      // 解析数据 使用utf-8字符集
+      let coder = new TextDecoder("utf-8");
+      // 读取数据
+      let result = await reader.read();
+      // console.log(result);
+      // 解析数据
+      let data = coder.decode(result.value,{
+        stream:true
+      });
+      console.log(1,data)
 
-    }
+      result = await reader.read();
+      // 解析数据
+      data = coder.decode(result.value,{
+        stream:true
+      });
+      console.log(2,data)
+      // console.log(JSON.parse(data.slice(5)) );
+    },
   },
   mounted() {
     this.$emit("changePage", "1003");

12_vuecli/mediaapp/vue.config.js

@@ -23,7 +23,8 @@ module.exports = defineConfig({
           '^/doubao':''
         }
       }
-    }
+    },
+    compress: false
   },
   transpileDependencies: true
 })