vue调用接口无信息或数据返回

Question

<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
    <div class="title">
    <div class="title-left">
        <div class="title-left-image"></div>
           <router-link to="/unusedOrder">
               <span class="">导航一</span>
           </router-link>
           <router-link to="/usedOrder">
               <span class="">导航二</span>
           </router-link>
              <router-link to="/usedOrder">
               <span class="">导航三</span>
           </router-link>
           <router-link to="/advices">
               <span class="">导航四</span>
           </router-link>
           <router-link to="/evaluate">
               <span class="">导航五</span>
           </router-link>
    </div>
    <div class="title-right">

           <router-link to="/unusedOrder">
               <span class="">导航六</span>
           </router-link>
           <router-link to="/usedOrder">
               <span class="">导航七</span>
           </router-link>
           <router-link to="/advices">
               <span class="">导航八</span>
           </router-link>
    </div>

    </div>
    <div class="bottom">
        <p style="white-space: pre-line;">{{ question }}</p>
        <textarea v-model="question" placeholder="请输入问题"></textarea>

        <button @click="sendQuestion">发送</button>

        <div v-for="(item, index) in chatHistory" :key="index">
            <p>{{ item.sender }}: {{ item.content }}</p>
            <p>{{ item.receiver }}: {{ item.reply }}</p>
        </div>
    </div>
    </div>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      question: '',
      chatHistory: [] // 用于存储聊天记录
    }
  },
  methods: {
    sendQuestion () {
    // 构建POST请求数据
      const postData = {
        query: this.question
      }

      // 发送POST请求
      axios.post('http://123.207.74.209:8000/chat/', postData, {
        headers: {
          'Content-Type': 'application/json',
          accept: 'application/json'
        }
      })
        .then(response => {
        // 处理响应数据
          const reply = response.data.reply
          this.question.push({ author: 'AI', text: reply })
          // 添加聊天记录
          this.chatHistory.push({
            sender: 'You',
            content: this.question,
            receiver: 'AI',
            reply: reply
          })

          // 清空输入框
          this.question = ''
        })
        .catch(error => {
          console.error(error)
        })
    }
  },
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Title'
}
</script>
<style>
.title{
    margin-left: 0px;
    height: 48px;
    width: 100%;
    background-color:#fff;
    border-bottom: 1px solid #DCDCDC;
    display: flex;
    justify-content:space-between;
}
.title-left{
    width: 580px;
    height: 48px;
    margin-left: 0;
    background:#fff;
    display: flex;

}
.title-left-image{
    height: 48px;
    width:120px
}
span{
    font-size: 16px
}
 a{
    width: 70px;
    height: 48px;
    color: black;
    margin: 0px 10px;
    text-decoration: none;
     line-height: 48px;
     text-align: center
}
 a:hover{
    background-color:#BEBEBE;
}
.serch{
    height: 32px;
    width: 500px;
    background-color:#fff;
    margin: auto;
    display: flex;
}
.inputType{
  width:400px;
  height: 30px;
  text-indent: 1em;
   line-height: 34px;
  background-color: #fff;
  border: 1px solid black;
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
  font-size: 12px;
}
.inputType:focus{
  outline: none;
  border: 1px solid rgb(230, 32, 213);
}
.button{
  color: #fff;
  text-align: center;
  background: rgba(204, 51, 0, 1);
  border-left:1px solid rgba(0, 0, 0, 0.45);
  width:100px;
  height: 32px;
  line-height: 34px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px
}
.title-right{
     width: 380px;
    height: 48px;
    display: flex;
}
.title-right-image{
    width: 40px;
    height: 40px;
    border: 1px solid black;
    border-radius: 20px;
    margin: auto ;
    margin-left: 40px;
}
.bottom{
    margin-bottom: 90px;
    margin-left: 0px;
    height: 48px;
    width: 100%;
    background-color:#fff;
    border-bottom: 0px solid #DCDCDC;
    display: flex;
    justify-content:space-between;
}
</style>


import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Chat from '@/components/Chat'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/chat',
    name: 'Chat',
    component: Chat
  }

]

const router = new VueRouter({
  routes
})

export default router


import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.prototype.$ajax = axios

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
  el: '#app',
  components: { App },
  template: '<App>/'
}).$mount('#app')

调用这个接口后没有信息返回
求指教

Answer 1

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7579435
• 这篇博客也不错, 你可以看下vue项目两种简单易懂的模拟获取后端接口数据方法
• 您还可以看一下 陶新华老师的Vue实战-模版建站课程中的 【第九课】使用组件搭建考拉首页，并对组件进行优化小节, 巩固相关知识点
  
• 除此之外, 这篇博客: Vue实现复制粘贴功能中的 实现选中并且复制成功后带有提示信息的效果 ： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  <template>
    <div>
      <el-input ref="addressInput" v-model="address" :readonly="true">
        <template slot="prepend"> 反馈地址 </template>
      </el-input>
      <el-button @click="copyLink(address)">复制链接</el-button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        address: "https://www.baidu.com/", // 地址信息
      };
    },
    methods: {
      // 判断是否是 IE 浏览器
      isIE() {
        if (window.ActiveXObject || "ActiveXObject" in window) {
          return true;
        } else {
          return false;
        }
      },
      // 拷贝地址
      copyLink(url) {
        if (this.isIE()) {
          this.$copyText(url);
          this.$refs.addressInput.select(); // 实现选中效果
          this.$message.success("复制成功!");
        } else {
          this.$copyText(url)
            .then((res) => {
              this.$refs.addressInput.select(); // 实现选中效果
              this.$message.success("复制成功!");
            })
            .catch((err) => {
              this.$message.error("该浏览器不支持自动复制, 请手动复制");
            });
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^