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(用于打开文件,设置模式 例如 只读 只写 读…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
