当前位置：首页 > news >正文

Vue前端无法接收到后端返回的数据以及全局CSS样式影响（已解决）

news 2025/7/15 14:32:58

Vue前端无法接收到后端返回的数据

前提：把很久以前的项目，翻出来重新优化一下，做一下前端的美化（以前都是用的element的UI，现在想自己写）。

由于是自己利用简单的html语句，主要面向各个按钮控件进行css的style修改，就用了最简单的form表单提交数据。

问题：结果就是死活接不到后端的数据。

排查：
1.先确认后端有拿到数据，并通过RespBean 返回数据，确认无误后，确定问题是出在前端了。

2.好久没写前端的东西了，第一时间是去检查代码到底哪里写错了，看了一圈好像逻辑没什么问题。

3.F12看看前端报什么错，结果发现ReferenceError: axios is not defined，真吐了，我记得这玩意是有设置全局的，太久没看这个项目了，真不知道自己以前怎么写的。如果没装直接npm install axios，然后再在项目里面导入就好，import axios from 'axios';。

4.解决axios以后，以为可以了，但是还是拿不到数据，因为很早之前因为object对象的问题，导致项目给我卡了很久取数据的问题，所以，确实就是返回了一个object对象，由于改了后端返回方式，所以取object对象里面的状态码也就需要相应的改变。

axios.post('/xxx', this.xxxForm).then(response => {this.loading = false;// 打印响应数据，便于调试console.log('响应数据：', response.data);// 检查 response.data 对象是否存在// 就错在这里，response返回的直接就是一个object，然后只要直接.出后端的key就好了if (response && response.data) {const res = response.data;  // 把 response.data 提取出来，避免重复引用// 判断返回的 code 是否为 200if (res.code === 200) {// 如果 code 是 200，说明成功this.$router.replace('/xxxx');} else {// 否则，显示返回的错误消息this.$message.error(res.message || '请检查！');}} else {// 没有正确响应数据时，报错this.$message.error('服务器返回数据格式不正确');}}).catch(error => {this.loading = false;console.error('请求错误:', error);  // 输出错误信息this.$message.error('请求失败，请稍后再试');});