若依框架学习笔记：不使用AjaxResult返回前端导致的form表单无法填入数据

Enter Enter

于 2024-05-04 16:48:25 发布

阅读量525

点赞数 8

文章标签：学习笔记前端

本文链接：https://blog.csdn.net/luke31959/article/details/138444549

版权

1. 前端页面使用中的问题

1.1 点击更新操作按钮点击两次才能弹出对话框

1.2 对话框中的输入框不能进行输入

查错过程

首先检查了表单校验rules是否无误和表单对象form{}是否存在在data()中，其次检查了更新操作handleUpdate()执行流程是否正确，在此过程中发现：this.form = response.data 语句没有起作用，表单中没有对应数据，在开发者工具中查询到getSubject()已从数据库中查询到数据并且成功返回，但是表单中没有数据，将this.form = response.data注释掉后，点击一次修改按钮就能弹出对话框，并且能在输入框中输入数据。

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const subjectId = row.subjectId || this.ids
      getSubject(subjectId).then(response => {
     /*    this.form = response.data */
        this.open = true
        this.title = '修改课程'
      })
    },

2. 导致原因

2.1 Vue 响应式原理

this.form = response.data无法做到页面数据响应，使用console.log(response.data) 发现后端传递给前端的response中没有data，控制台输出为 undefined

2.2 Controller层没有使用 `AjaxResult` 向前端传输数据（主要原因）

使用AjaxResult返回

    @PreAuthorize("@ss.hasPermi('system:school:query')")
    @GetMapping(value = "/{schoolId}")
    public AjaxResult getInfo(@PathVariable("schoolId") Long schoolId) {
        return success(schoolService.getById(schoolId));
    }

更改代码后没有使用AjaxResult返回

    @PreAuthorize("@ss.hasPermi('system:school:query')")
    @GetMapping(value = "/{schoolId}")
    public School getInfo(@PathVariable("schoolId") Long schoolId) {
        return schoolService.getById(schoolId);
    }