前后端不报错&传值正常：前端接收不到数据|前后端检查问题流程

原创已于 2022-01-23 10:09:23 修改 · 1.7w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #开发语言

于 2021-12-22 11:09:58 首次发布

项目梳理同时被 3 个专栏收录

8 篇文章

订阅专栏

后端

8 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

当前后端数据传输无误但前端无法显示数据时，通常是由于后端未正确查询数据库。检查流程包括：判断问题源头、前端控制台分析、网络请求验证及后端控制台排查。解决办法涉及理解callback函数的角色，确保数据从底层系统到应用层的完整传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 问题：前后端不报错&传值正常：前端接收不到数据

1.1 前端

在这里插入图片描述

1.2 后端

@RestController
@RequestMapping("/ums-user")
public class UmsUserController {
    @Resource
    IUmsUserService userService;
    @GetMapping("/page")
    ResultJson page(UmsUser umsUser) throws InterruptedException {
        System.out.println(umsUser);
        System.out.println(umsUser.getPageNo());
        System.out.println(umsUser.getPageSize());
        return ResultJson.success(new Page<>(umsUser.getPageNo(),umsUser.getPageSize()),"检验：后端是否正常传值给前端");
         }
}

在这里插入图片描述

1.3 解决

在这里插入图片描述

return ResultJson.success(userService.page(new Page<>(umsUser.getPageNo(),umsUser.getPageSize())),"解决传值问题的返回值");

在这里插入图片描述
之后开始查询数据库

1.4 原因：后端没查询数据库

页面没数据----->后端没查询数据库----->接受前端参数没赋值给service，直接将前端接受的参数返回给前端

前端参数两个作用：

单纯提供：当前页，一页几条数据（有问题时前端控制台依旧有：current、size）
传递到service，让service带这参数，对数据库经行【分页查询】----service没有收到参数，所以没有查询数据库。后端：控制台没有输出查询语句+前端：返回records是0

传值正常：此次报错指前后端传值功能正常（都能收到数据），但是问题也体现在此：值≠预期值。前端传后端：参数A（√），后端传前端：参数A（×），预期值是数据库数据。

2 检查问题流程

2.1 判断是前后端，谁的问题----传值

在这里插入图片描述

2.2 前端问题----控制台（Fn+F12）

2.2.1 console—看报错：ReferenceError: params is not defined

在这里插入图片描述

2.2.1 对比前端代码

在这里插入图片描述
解决：对象。属性才能用

2.2.1 network:查看自己的请求

在这里插入图片描述

2.2.2 点击请求：preview

在这里插入图片描述
由图，前端成功发送参数，后端也成功返回返回值

2.2 后端问题----控制台

3 前端问题：response is not defined

在这里插入图片描述

3.1 原因

在这里插入图片描述
括号里都是：传过来的值/函数（用形参表示）
callback（回调函数）是一个系统函数，就好像println

【index页面】
methods:{
			getTableData(){
				this.get('/ums-user/page',this.params,response => {   ---发出请求，拿返回值
					this.tableData = response               ---拿【加工2】返回值赋值给tableData
				//等价于 this.tableData = response.data.obj
				})
			},

const get = (url,params,callback) => {
	request(url,'get',params,response =>{
		callback(response.obj)           ---接收【加工1】，返回【加工2】response.obj = response.data.obj
	})
}

【request底层】
const request = (url, method, params,callback) => {
     ......
			 callback(response.data)    ----后端返回response，再返回给调用函数get返回值response.data【加工1】
		}

callback意义：如果只是在没有callback函数，我只能在request处新建接收函数response，新建一个请求发送给get，get收到值再新建一个请求发送给getTabledate。即值到谁手里，就得接收包装再发送。

callback在参数的位置（）：get方法内部调用callback方法后的返回值，再传给调用get方法的方法A
调用的结果，都用response（满载而归卡车）返回给调用方
1.调用get函数的函数A，需要传入3个参数
2.3个参数去向=get方法执行：
1）调用request函数:发送请求后，get拿回来response=（request的）response.data
2）调用callback函数：将1）get拿回来response，返回给index组件中调用get方法的函数

解决：
在这里插入图片描述

const get = (url,params,callback) => {
	request(url,'get',params,response =>{
		callback(response.obj)
	})
}

4 callback（回调函数）

一般情况：程序运行
▶ 程序员-------调用：接口API（application programming interface，应用编程接口）------实现：应用编程（利用各种库，编写成具某种功用的应用）-------位于底层：系统编程(编写库函数：底层函数)
▶操作员 -----开关键------机器-----零件

特殊情况：callback（回调函数）-----私人定制
▶程序员-------接口API：传入【函数1】------应用编程:传递【函数1】-------位于底层：系统编程，接收【函数1】中间函数，组装完成【特定函数2】-------应用编程:接收【特定函数2】-------API-----程序员
▶ 公民 -----办事处：传入【个人信息】------身份证系统------用【个人信息】制作身份证-------身份证系统------办事处------公民拿到【专有身份证】
callback（回调函数） =函数1/个人信息。
有一些位于底层库函数是不完整的，即：在传入一个回调函数之前，中间函数是不完整的。