所谓做网站就这么几步,网站建设需要什么资料,小型网络架构,济南市住房和城乡建设厅官网Vue前端无法接收到后端返回的数据
前提#xff1a;把很久以前的项目#xff0c;翻出来重新优化一下#xff0c;做一下前端的美化#xff08;以前都是用的element的UI#xff0c;现在想自己写#xff09;。
由于是自己利用简单的html语句#xff0c;主要面向各个按钮控…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的不是什么情况都可以用的…
