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

2023-11-22 01:43| 来源: 网络整理| 查看: 265

这里写目录标题 1 问题：前后端不报错&传值正常：前端接收不到数据1.1 前端1.2 后端1.3 解决1.4 原因：后端没查询数据库 2 检查问题流程2.1 判断是前后端，谁的问题----传值2.2 前端问题----控制台（Fn+F12）2.2.1 console---看报错：ReferenceError: params is not defined2.2.1 对比前端代码2.2.1 network:查看自己的请求2.2.2 点击请求：preview2.2 后端问题----控制台 3 前端问题：response is not defined3.1 原因 4 callback（回调函数）

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/个人信息。有一些位于底层库函数是不完整的，即：在传入一个回调函数之前，中间函数是不完整的。

【本文地址】

公司简介

联系我们