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

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 是否为 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('请求失败,请稍后再试');});

全局CSS样式影响

前提:接着是因为改的前端样式是在vue文件的基础上改的,但,习惯性写css会直接用body{}来写整个样式的布局。

问题:这也导致了我跳转页面以后,其他vue文件的布局也发生了改变,就很抽象。(可能自己基础打磨不好,还以为单个vue不会影响其他的vue样式)。

解决:这个也不用排查,就是个body的问题,就把body{}换成 .xxx{},然后多写一个div class = "xxx"就好。套个娃。

注意:额,有看到csdn上一堆说用scoped的,不是什么情况都可以用的…

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 更高效的搜索工具,国内免费好用的AI智能搜索引擎工具
  • 信息学奥赛入门级学习计划,供有需要的家长们参考
  • pytorch qwen2-vl自定义数据全量微调
  • weblogic CVE-2018-2894 靶场攻略
  • Java项目实战II基于Java+Spring Boot+MySQL的服装厂服装生产管理系统的设计与实现
  • linux网络编程4
  • 21、Tomato
  • 上半年亏损扩大/百亿资产重组终止,路畅科技如何“脱困”?
  • Cassandra 5.0 Spring Boot 3.3 CRUD
  • 计算机网络:物理层 --- 基本概念、编码与调制
  • MySQL基础篇(黑马程序员2022-01-18)
  • 基于深度学习的能源消耗预测
  • css文本修饰
  • 二.Oracle每周运维操作
  • C一语言—动态内存管理
  • 【Redis学习笔记】2018-06-28 redis命令源码学习1
  • classpath对获取配置文件的影响
  • download使用浅析
  • Flannel解读
  • Java,console输出实时的转向GUI textbox
  • Java方法详解
  • LeetCode算法系列_0891_子序列宽度之和
  • QQ浏览器x5内核的兼容性问题
  • Selenium实战教程系列(二)---元素定位
  • spring boot下thymeleaf全局静态变量配置
  • VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
  • 讲清楚之javascript作用域
  • 巧用 TypeScript (一)
  • 双管齐下,VMware的容器新战略
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • Semaphore
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • ​比特币大跌的 2 个原因
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #systemverilog# 之 event region 和 timeslot 仿真调度(十)高层次视角看仿真调度事件的发生
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • #我与Java虚拟机的故事#连载05:Java虚拟机的修炼之道
  • #在 README.md 中生成项目目录结构
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (day 12)JavaScript学习笔记(数组3)
  • (附源码)ssm教材管理系统 毕业设计 011229
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (每日一问)基础知识:堆与栈的区别
  • (三)Kafka离线安装 - ZooKeeper开机自启
  • (十六)串口UART
  • (四)Controller接口控制器详解(三)
  • (四)stm32之通信协议
  • (转载)PyTorch代码规范最佳实践和样式指南
  • ..thread“main“ com.fasterxml.jackson.databind.JsonMappingException: Jackson version is too old 2.3.1
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .net core webapi 大文件上传到wwwroot文件夹