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


<!-- 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')

img

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

【相关推荐】



  • 帮你找了个相似的问题, 你可以看下: 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>

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

f12看看 network里具体返回什么信息

img

看下报什么错？是不是跨域了？