当前位置: 首页 > 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的,不是什么情况都可以用的…

相关文章:

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

Vue前端无法接收到后端返回的数据 前提:把很久以前的项目,翻出来重新优化一下,做一下前端的美化(以前都是用的element的UI,现在想自己写)。 由于是自己利用简单的html语句,主要面向各个按钮控…...

力扣234 回文链表 Java版本

文章目录 题目描述代码 题目描述 给你一个单链表的头节点 head ,请你判断该链表是否为 回文链表 。如果是,返回 true ;否则,返回 false 。 示例 1: 输入:head [1,2,2,1] 输出:true 示例 2&…...

银行性能测试怎么做?来认识下这4个性能测试工具!

一、银行项目性能测试是什么? 银行项目性能测试是一种软件测试形式,用于评估银行应用程序的性能和负载能力。 它的主要目标是确保银行系统能够在不同负载水平下提供稳定、高效的服务。 性能测试涵盖了多个方面,包括响应时间、吞吐量、并发用…...

FME学习笔记

读取数据 方法一:add reader 通过读模块来进行数据的读取 方法二:FeatureReader Parameters 通过转换器来进行数据的读取 可以通过空间范围进行筛选 在FME中,所有数据处理都要用到的,绝对的重点:转换器&#xff…...

机器翻译之创建Seq2Seq的编码器、解码器

1.创建编码器、解码器的基类 1.1创建编码器的基类 from torch import nn#构建编码器的基类 class Encoder(nn.Module): #继承父类nn.Moduledef __init__(self, **kwargs): #**kwargs:不定常的关键字参数super().__init__(**kwargs)def forward(self, X, *args…...

锤炼核心技能以应对编程革命

一、引言  随着人工智能的快速发展,尤其是AIGC等大语言模型的涌现,AI辅助编程工具逐渐成为程序员的新伙伴。这一变革不仅引发了关于AI是否能取代部分编程工作的讨论,也促使程序员重新思考自己的职业发展和技能提升路径。在AI时代&#xff0…...

2024 go-zero社交项目实战

背景 一位商业大亨,他非常看好国内的社交产品赛道,想要造一款属于的社交产品,于是他找到了负责软件研发的小明。 小明跟张三一拍即合,小明决定跟张三大干一番。 社交产品MVP版本需求 MVP指:Minimum Viable Product&…...

js跑马灯效果、横向、纵向滚动效果

比如横向滚动&#xff0c;则在li标签里设置 display: table-cell;滚动效果 transform: translateX(-200px); <div id"div1" ><ul><li><img src"imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src"i…...

C#基础(14)冒泡排序

前言 其实到上一节结构体我们就已经将c#的基础知识点大概讲完&#xff0c;接下来我们会讲解一些关于算法相关的东西。 我们一样来问一下gpt吧&#xff1a; Q:解释算法 A: 算法是一组有序的逻辑步骤&#xff0c;用于解决特定问题或执行特定任务。它可以是一个计算过程、一个…...

喜报 | 众数信科荣获2024年“火炬瞪羚企业”称号

近日&#xff0c;厦门火炬高新区公布2024年“火炬瞪羚企业”名单&#xff0c;众数&#xff08;厦门&#xff09;信息科技有限公司凭借在AI领域的综合实力、技术创新及典型场景应用等方面的卓越表现&#xff0c;成功入选。 瞪羚企业 一般指高成长性科技型企业&#xff0c;是跨过…...

中央企业数智化薪酬信息系统建设如何实现穿透式监管?

近年来&#xff0c;深化国有企业改革成为推动高质量发展的重要抓手&#xff0c;薪酬管理作为其中的关键领域&#xff0c;备受关注。国资委于近日发布了《关于加强中央企业薪酬管理信息系统建设的通知》&#xff0c;并召开了中央企业薪酬管理信息系统建设工作部署会议&#xff0…...

110Redis 简明教程--Redis 数据类型

Redis strings 字符串是一种最基本、最常用的 Redis 值类型。 Redis 字符串是二进制安全的&#xff0c;这意味着一个 Redis 字符串能包含任意类型的数据&#xff0c;例如&#xff1a; 一张经过 base64 编码的图片或者一个序列化的 Ruby 对象。通过这样的方式&#xff0c;Redis …...

Spring Data Rest 远程命令执行命令(CVE-2017-8046)

&#xff08;1&#xff09;访问 http://your-ip:8080/customers/1&#xff0c;然后抓取数据包&#xff0c;使用PATCH请求来修改 PATCH /customers/1 HTTP/1.1 Host: Accept-Encoding: gzip, deflate Accept: */* Accept-Language: en User-Agent: Mozilla/5.0 (compatible; MS…...

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-18

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-18 1. The Application of Large Language Models in Primary Healthcare Services and the Challenges W YAN, J HU, H ZENG, M LIU, W LIANG - Chinese General Practice, 2024 人工智能大语言模型在基层医疗…...

搜索算法:Fibonacci查找

### 什么是Fibonacci查找 Fibonacci查找是一种搜索算法&#xff0c;它结合了Fibonacci数列和二分查找的思想&#xff0c;用于在有序数组中查找目标值。它的主要优点是在某些情况下可以比普通二分查找更高效。 ### Fibonacci数列 Fibonacci数列是一个递归定义的数列&#xff0…...

软件验收测试报告有什么作用?第三方验收测试报告包括哪些内容?

在现代软件开发中&#xff0c;软件验收测试报告占据了极为重要的地位&#xff0c;不仅是软件交付过程中的一环&#xff0c;更是软件质量保障的关键工具。 软件验收测试报告是指在软件开发过程中&#xff0c;针对软件的功能、性能、安全等方面进行的一系列测试后&#xff0c;形…...

AI大模型教程 Prompt提示词工程 AI原生应用开发零基础入门到实战【2024超细超全,建议收藏】

在AGI&#xff08;通用人工智能&#xff09;时代&#xff0c;那些既精通AI技术、又具备编程能力和业务洞察力的复合型人才将成为最宝贵的资源。为此&#xff0c;我们提出了‘AI全栈工程师’这一概念&#xff0c;旨在更精准地描述这一复合型人才群体&#xff0c;而非过分夸大其词…...

Pinia的快捷使用方法

安装Pinia npm install pinia 在main.js里面引入并注册挂载使用 在src下创建一个store inex.js // index.js import { defineStore } from pinia import { computed, ref } from vue //更简洁的的模块化 transferringValuesBetweenComponents simulationModule //简单定义了…...

一文搞懂C++继承

一文搞懂C继承 1.继承的概念及定义1.1继承的概念1.2 继承定义1.2.1定义格式1.2.2继承关系和访问限定符1.2.3继承基类成员访问方式的变化 2.基类和派生类对象赋值转换3.继承中的作用域4.派生类的默认成员函数4.1 构造函数4.2 拷贝构造4.3 赋值重载4.4 析构函数 5.继承与友元6. 继…...

MFC -文件类控件

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解MFC中的文件类 MFC文件类 在MFC中&#xff0c;CFILE 是基本的文件操作类&#xff0c;提供了读取、写入、打开、关闭等操作方法主要成员函数:Open(用于打开文件&#xff0c;设置模式 例如 只读 只写 读…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...