doesn‘t have a default value /前端控制台network、console

本文介绍了在前端开发中遇到的必填字段没有默认值的问题,通过分析控制台的network和console进行debug。前端网络请求无误,但后端反馈错误,最终发现是后端缺少密码加密语句导致。通过控制台的network部分查看headers、payload和response,以及console.log辅助定位问题,揭示了前端和后端交互中可能存在的问题和解决策略。

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

1 报错及解决流程图

在这里插入图片描述

2 报错:必填字段没有值

  1. 表单提交时,页面弹窗:错误提示

在这里插入图片描述

  1. 前端控制台:日志无报错(前端代码没有运行时错误),请求状态码200 -------network-preview/response报错的另一种展示
  2. 后端控制台:无报错

3 debug

3.1 控制台没有报错信息:无运行时错误

操作平台控制台打印(日志)输出位置控制台没有报错信息
前端代码VUE页面上F12的console无运行时错误
后端代码ideaidea内部无运行时错误

debug:

  1. 编译时错误:边写代码边提示,直到无编译报错才能运行
  2. 运行时错误:控制台报错(分母为零、中英输入法…)
  3. 业务逻辑错误:代码编译和运行都没错。数据交互之间没有衔接好(传值不正常)

3.2 前端

3.2.1 network

1. 请求是否发送成功:network-headers

在这里插入图片描述

2. 查看前端传给后端的值:network-payload

payload是一种以JSON格式进行数据传输的一种方式。数据以键值对展示。

在这里插入图片描述

3. 后端响应内容:network-preview(排版整齐,便于查看)

在这里插入图片描述

一般情况下,Preview和Response的结果似乎一模一样。
Preview:便于查看(数据展示格式规整,可以层层展开)后端相应的数据
Response:一串数据(无排版)

4. 后端响应内容:network-response(无排版,不便查看)

在这里插入图片描述

3.2.2 console

在这里插入图片描述

1. 报错弹窗的代码位置:
_axios.request({
		url: url,
		method: method,
		params: params
	}).then(response => {
		if(response.data.code === 500){
			// element-ui:弹窗出现错误提示
			Message.error(response.data.message)
		} else if(response.data.code === 200){
			 callback(response.data)
		}
	}).catch(Error => {
		Mmessage.error(response.data.message)
	}).finally(() => {
		loading.close()
	})
2. console内容可以看到:运行错误、日志

1.运行时报错
2.手动在前端代码中设置:console.log(想打印的内容)
当运行的业务:没有运行时错误+该业务线无console.log()=控制台空(无内容)

3. 前端控制台console复现报错
if(response.data.code === 500){
			// 控制台日志输出:错误提示 
			console.log(response.data)  
			// element-ui:弹窗出现错误提示
			Message.error(response.data.message)
		}
4. console.log:只输出你要的数据内容,省略标题

例如:想要输出response.data 。
❌控制台:response.data{…} ✔控制台:{…}
在这里插入图片描述

5. 前端看到问题方式:3种

1.原设计:element-ui 弹出报错信息
2.控制台network-preview(便于查看)—隐藏
3.修改代码console.log()在控制台network-console中显示—隐藏

4 问题在后端,解决

4.1 初始困惑

  1. 初始困惑:提交整个表单,password字段没有被赋值。前端 validate校验怎么没有提示?
  2. 困惑具体:前端validate校验表单的数据时:加密密码password无值都没有提示!发出请求时,才出现弹窗的错误提示。
  3. 错误原因:前端validate校验只有明文密码rawpassword,确实校验成功,确实该发请求。明文密码rawpassword加密是在后端返回数据前处理的。

在这里插入图片描述

4.2 后端解决:缺少密码加密语句

@PostMapping("/add")
    ResultJson add(UmsUser umsUser) {
        umsUser.setPassword(passwordEncoder.encode(umsUser.getRawPassword()));       -------------错误原因:缺少密码加密
        return ResultJson.success(userService.save(umsUser), "添加用户成功");
    }

5 该问题最简单逻辑

弹窗提示:password密码加密的字段没有值----------密码加密后端处理---------前端正确传值,状态200:后端处理加密的位置有问题!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值