doesn't have a default value
1 报错及解决流程图
2 报错:必填字段没有值
- 表单提交时,页面弹窗:错误提示
- 前端控制台:日志无报错(前端代码没有运行时错误),请求状态码200 -------network-preview/response报错的另一种展示
- 后端控制台:无报错
3 debug
3.1 控制台没有报错信息:无运行时错误
操作平台 | 控制台打印(日志)输出位置 | 控制台没有报错信息 | |
---|---|---|---|
前端代码 | VUE | 页面上F12的console | 无运行时错误 |
后端代码 | idea | idea内部 | 无运行时错误 |
debug:
- 编译时错误:边写代码边提示,直到无编译报错才能运行
- 运行时错误:控制台报错(分母为零、中英输入法…)
- 业务逻辑错误:代码编译和运行都没错。数据交互之间没有衔接好(传值不正常)
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 初始困惑
- 初始困惑:提交整个表单,password字段没有被赋值。前端 validate校验怎么没有提示?
- 困惑具体:前端validate校验表单的数据时:加密密码password无值都没有提示!发出请求时,才出现弹窗的错误提示。
- 错误原因:前端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:后端处理加密的位置有问题!