您的位置:首页 > 财经 > 金融 > 团购网站建设_营销软件代理推广_seo薪资seo_企业网站开发公司

团购网站建设_营销软件代理推广_seo薪资seo_企业网站开发公司

2024/11/18 2:46:28 来源:https://blog.csdn.net/m0_51581537/article/details/142316648  浏览:    关键词:团购网站建设_营销软件代理推广_seo薪资seo_企业网站开发公司
团购网站建设_营销软件代理推广_seo薪资seo_企业网站开发公司

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的,不是什么情况都可以用的…

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com