ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue前端无法接收到后端返回的数据以及全局CSS样式影响（已办理） [打印本页]
作者: 笑看天下无敌手    时间: 2024-11-12 19:37
标题: Vue前端无法接收到后端返回的数据以及全局CSS样式影响（已办理）
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对象里面的状态码也就需要相应的改变。
  1. axios.post('/xxx', this.xxxForm)
  2.   .then(response => {
  3.     this.loading = false;
  5.     // 打印响应数据，便于调试
  6.     console.log('响应数据：', response.data);
  8.     // 检查 response.data 对象是否存在
  9.     // 就错在这里，response返回的直接就是一个object，然后只要直接.出后端的key就好了
  10.     if (response && response.data) {
  11.       const res = response.data;  // 把 response.data 提取出来，避免重复引用
  12.       
  13.       // 判断返回的 code 是否为 200
  14.       if (res.code === 200) {
  15.         // 如果 code 是 200，说明成功
  16.         this.$router.replace('/xxxx');
  17.       } else {
  18.         // 否则，显示返回的错误消息
  19.         this.$message.error(res.message || '请检查！');
  20.       }
  21.     } else {
  22.       // 没有正确响应数据时，报错
  23.       this.$message.error('服务器返回数据格式不正确');
  24.     }
  25.   })
  26.   .catch(error => {
  27.     this.loading = false;
  28.     console.error('请求错误:', error);  // 输出错误信息
  29.     this.$message.error('请求失败，请稍后再试');
  30.   });
复制代码
全局CSS样式影响

条件：接着是由于改的前端样式是在vue文件的基础上改的，但，风俗性写css会直接用body{}来写整个样式的布局。
问题：这也导致了我跳转页面以后，其他vue文件的布局也发生了改变，就很抽象。（大概自己基础打磨不好，还以为单个vue不会影响其他的vue样式）。
办理：这个也不用排查，就是个body的问题，就把body{}换成 .xxx{}，然后多写一个div class = "xxx"就好。套个娃。
注意：额，有看到csdn上一堆说用scoped的，不是什么环境都可以用的…

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4