凡人码农 2024-04-16 19:52 采纳率: 66.7%
浏览 32
已结题

Java 前端响应状态码200但是无法加载响应数据

上一个问题解决了 后端的数据也能正常发送，但是前端显示无法加载响应数据

img

下面是响应的后端数据

img

<template>
<body>
  

    <div id="poster" style="height:670px " >


      <el-container style="margin=0px">
        <el-header style="text-align:left">图书管理平台</el-header>
    
      </el-container>


  <el-container class="selectContainer"  style="width:100%"  >
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="height:580px"
        
        >
              <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <el-button type="info" @click="add">新增图书</el-button>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-menu" ></i>
            <el-button type="info">查询图书</el-button>
          </el-menu-item>
      
      
      </el-menu>
    
  

            <el-table
            :data="records"
            border
            style="width: 100%"
            
            >
              <el-table-column
              prop="bookName"
              label="书名"
              width="150">
            </el-table-column>

            <el-table-column
              prop="author"
              label="作者"
              width="150">
            </el-table-column>

            <el-table-column
              fixed
              prop="date"
              label="日期"
              width="150">
            </el-table-column>
          
          
            <el-table-column
              prop="publish"
              label="出版社"
              width="150">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              width="150">
            </el-table-column>
            <el-table-column
              prop="bookId"
              label="序号"
              width="150">
            </el-table-column>

            
            <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleUpdateEmp(scope.row)">删除</el-button>
                    
                  </template>
            </el-table-column>
          </el-table>

       </el-container>
         <el-pagination
        class="pageList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="10"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
 </div>
</body>
</template>

<script>
export default {
  name: "bookSelect",
  data() {

      return {
      page: 1, //页码
      pageSize: 10, //每页的记录数
      total: 0, //总计数
      records: [],
      
      };
    },

  created(){
    this.axios.get('http://localhost:8080/book/select').then((res=>{
         this.records=res.data.data
    }))
    
  },

   
    methods: {
      add(){
        this.$router.push({path:"/book",name:"book"})
      },

      
    }
  
};
</script>
  • 写回答

6条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-16 19:52
    关注

    引自免费微信小程序：皆我百晓生

    看起来您遇到了一个前端页面无法正确渲染从后端获取的数据的问题。根据您的描述和提供的信息，这里有几个可能的原因以及相应的解决步骤：

    1. 检查后端返回的数据格式: 确保后端返回的数据与前端期望的格式一致。在您的例子中，后端返回的是JSON对象，前端应该能够正确解析。检查一下后端返回的数据是否包含预期的键值对（例如："code", "msg", 和 "data"）。

    2. 确保API URL正确: 在前端代码中，您使用的API URL是'http://localhost:8080/book/select'。请确认这个地址与实际运行的服务器地址匹配，并且服务端接口正在监听这个端点。

    3. 跨域问题: 如果前端和后端不在同一个域名或端口下，可能会遇到跨域问题。请确保后端设置了允许来自前端域名的CORS（Cross-Origin Resource Sharing）。在后端代码中添加适当的CORS头部，或者使用代理解决跨域问题。

    4. 异常处理: 在调用axios的get方法时，添加错误处理逻辑，以便于捕获任何可能的异常并输出到控制台，这样可以更清楚地了解问题所在。

    5. 更新Vue组件: 使用v-if指令确保只有在接收到数据之后才渲染表格。这可以帮助防止在数据未加载完成前尝试渲染导致的错误。

    修改后的Vue组件代码如下：

    <template>
  ...
  <el-table v-if="records.length > 0" :data="records" ...>
    ...
  </el-table>
  ...
</template>

<script>
export default {
  ...
  created() {
    this.axios.get('http://localhost:8080/book/select')
      .then((res) => {
        if (res.status === 200) {
          this.records = res.data.data;
        } else {
          console.error(`Failed to fetch data. Status code: ${res.status}`);
        }
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  },
  ...
}
</script>

    按照上述步骤进行排查和调整，通常可以解决这个问题。如果问题依然存在，建议您检查浏览器开发者工具中的网络面板，看看请求的具体细节，比如响应体、状态码等，以获得更多信息。如果有任何新的错误信息或问题，请提供详细信息，我会继续协助您解决。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月17日
  • 已采纳回答 4月16日
  • 修改了问题 4月16日
  • 创建了问题 4月16日

悬赏问题

  • ¥15 【求职】怎么找到一个周围人素质都很高不会欺负他人，并且未来月薪能够达到一万以上（技术岗）的工作？希望可以收到写有具体，可靠，已经实践过了的路径的回答？
  • ¥15 Java+vue部署版本反编译
  • ¥100 对反编译和ai熟悉的开发者。
  • ¥15 带序列特征的多输出预测模型
  • ¥15 Python 如何安装 distutils模块
  • ¥15 关于#网络#的问题：网络是从楼上引一根网线下来，接了2台傻瓜交换机，也更换了ip还是不行
  • ¥15 资源泄露软件闪退怎么解决？
  • ¥15 CCF-CSP 2023 第三题 解压缩(50％)
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现