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中,所有数据处理都要用到的,绝对的重点:转换器ÿ…...
机器翻译之创建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时代࿰…...
2024 go-zero社交项目实战
背景 一位商业大亨,他非常看好国内的社交产品赛道,想要造一款属于的社交产品,于是他找到了负责软件研发的小明。 小明跟张三一拍即合,小明决定跟张三大干一番。 社交产品MVP版本需求 MVP指:Minimum Viable Product&…...
js跑马灯效果、横向、纵向滚动效果
比如横向滚动,则在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#的基础知识点大概讲完,接下来我们会讲解一些关于算法相关的东西。 我们一样来问一下gpt吧: Q:解释算法 A: 算法是一组有序的逻辑步骤,用于解决特定问题或执行特定任务。它可以是一个计算过程、一个…...
喜报 | 众数信科荣获2024年“火炬瞪羚企业”称号
近日,厦门火炬高新区公布2024年“火炬瞪羚企业”名单,众数(厦门)信息科技有限公司凭借在AI领域的综合实力、技术创新及典型场景应用等方面的卓越表现,成功入选。 瞪羚企业 一般指高成长性科技型企业,是跨过…...
中央企业数智化薪酬信息系统建设如何实现穿透式监管?
近年来,深化国有企业改革成为推动高质量发展的重要抓手,薪酬管理作为其中的关键领域,备受关注。国资委于近日发布了《关于加强中央企业薪酬管理信息系统建设的通知》,并召开了中央企业薪酬管理信息系统建设工作部署会议࿰…...
110Redis 简明教程--Redis 数据类型
Redis strings 字符串是一种最基本、最常用的 Redis 值类型。 Redis 字符串是二进制安全的,这意味着一个 Redis 字符串能包含任意类型的数据,例如: 一张经过 base64 编码的图片或者一个序列化的 Ruby 对象。通过这样的方式,Redis …...
Spring Data Rest 远程命令执行命令(CVE-2017-8046)
(1)访问 http://your-ip:8080/customers/1,然后抓取数据包,使用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查找是一种搜索算法,它结合了Fibonacci数列和二分查找的思想,用于在有序数组中查找目标值。它的主要优点是在某些情况下可以比普通二分查找更高效。 ### Fibonacci数列 Fibonacci数列是一个递归定义的数列࿰…...
软件验收测试报告有什么作用?第三方验收测试报告包括哪些内容?
在现代软件开发中,软件验收测试报告占据了极为重要的地位,不仅是软件交付过程中的一环,更是软件质量保障的关键工具。 软件验收测试报告是指在软件开发过程中,针对软件的功能、性能、安全等方面进行的一系列测试后,形…...
AI大模型教程 Prompt提示词工程 AI原生应用开发零基础入门到实战【2024超细超全,建议收藏】
在AGI(通用人工智能)时代,那些既精通AI技术、又具备编程能力和业务洞察力的复合型人才将成为最宝贵的资源。为此,我们提出了‘AI全栈工程师’这一概念,旨在更精准地描述这一复合型人才群体,而非过分夸大其词…...
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 -文件类控件
前言 各位师傅大家好,我是qmx_07,今天给大家讲解MFC中的文件类 MFC文件类 在MFC中,CFILE 是基本的文件操作类,提供了读取、写入、打开、关闭等操作方法主要成员函数:Open(用于打开文件,设置模式 例如 只读 只写 读…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
