笑看天下无敌手 发表于 2024-11-12 19:37:20

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对象里面的状态码也就需要相应的改变。
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 是否为 200
      if (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('请求失败,请稍后再试');
});
全局CSS样式影响

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Vue前端无法接收到后端返回的数据以及全局CSS样式影响(已办理)