springboot vue 프로젝트 관리 프런트엔드 및 백엔드에서 편집 기능을 구현하는 방법

springboot+vue 기반 테스트 플랫폼 개발

1. 편집 페이지를 열어 데이터 표시

1. 편집 버튼

전에 복사한 테이블 컴포넌트에 2개의 버튼이 있는데 그 중 하나를 [편집] 버튼으로 수정하세요.

클릭 이벤트 handleUpdate(scope.row)를 바인딩합니다. 이 row는 현재 레코드의 개체입니다. 콘솔을 추가하여 인쇄할 수 있습니다. handleUpdate(scope.row)，这个row就是当前这条记录的对象，可以加个console打印一下。

2. 编写 handleUpdate 方法处理数据外显

需要查询当前记录的项目名称和描述并将其赋值给表单才能将数据外显。这里需要根据项目id(唯一性)来查询。

修改一下后端项目列表的接口，使其支持根据项目id查询数据：

在 handleUpdate 中调用接口：

this.dialogFormVisible = true，首先打开对话框在 data 的 projectQuery 对象中，新增一个 id，用于传参给接口。再把row.id把每行里的 id 赋值给this.projectQuery.id最后请求接口，返回的list中只有一个元素，把这个结果的projectName和description，再赋值给 form 表单即可。

测试一下：

二、保存编辑页面的内容

1. 后端增加 update 接口

编辑页表单与新增页面一致，没必要再写一个。因此，需要对表单进行一些修改，以便在创建和编辑时分别调用相应的API。

新增接口已有，现在增加一个更新的接口，继续在 ProjectService 里编写。

还有对应外面的 controller 处理器：

自测一下更新接口，功能正常。

2. 前端页面修改

为了可以区分这是新增表单还是编辑表单，需要在 data 里增加一个字段来标识：dialogStatus。

修改表单里的【保存按钮】，点击的时候通过dialogStatus的值，来决定调用新增还是更新的方法：

当dialogStatus等于"create"，就是新增，否则就是修改更。

那么处理编辑页数据外显的方法handleUpdate也修改修改，给dialogStatus赋值为update:

新增updateData方法，来调用后端的 update 接口。但是别忘记在 js 文件里添加好接口的请求，然后导入到 vue 页面文件中去。

然后继续完成的updateData方法的代码：

这里还设计到【新增项目】按钮的改动，因为点击了【编辑】按钮，dialogStatus等于update，那自然点击新增的时候要赋值为create才可以调用到add()方法。

但由于之前的【新增项目】按钮已经绑定了一个this.dialogFormVisible = true，所以把这2个抽出来，写到一个方法handleAdd

🎜🎜2. 데이터 표시를 처리하기 위한 handlerUpdate 메소드 작성🎜🎜현재 레코드의 프로젝트 이름과 설명을 쿼리하고 이를 양식에 할당하여 데이터를 표시해야 합니다. 여기서는 프로젝트 ID(고유성)를 기반으로 쿼리해야 합니다. 🎜🎜프로젝트 ID를 기반으로 데이터 쿼리를 지원하도록 백엔드 프로젝트 목록의 인터페이스를 수정합니다. 🎜🎜🎜🎜handleUpdate에서 인터페이스 호출: 🎜🎜🎜🎜this.dialogFormVisible = true, 먼저 데이터의 projectQuery 개체에서 대화 상자를 열고 인터페이스에 매개 변수를 전달하는 데 사용되는 ID를 추가합니다. 그런 다음 <code>this.projectQuery.id에 대한 각 행의 ID에 row.id를 할당하고 마지막으로 인터페이스를 요청합니다. 반환된 목록에는 단 하나의 요소가 있습니다. projectName 및 description을 선택한 다음 양식에 할당합니다. 🎜🎜테스트해 보세요: 🎜🎜🎜🎜2. 편집 페이지 내용 저장🎜🎜1. 백엔드에 업데이트 인터페이스 추가🎜🎜편집 페이지 양식은 새 페이지와 동일하므로 작성할 필요가 없습니다. 다른 것. 따라서 각각 생성 및 편집 시 해당 API를 호출하려면 폼에 일부 수정이 필요합니다. 🎜🎜새 인터페이스가 이미 존재합니다. 이제 업데이트된 인터페이스를 추가하고 ProjectService에서 계속 작성하세요. 🎜🎜🎜🎜또한 해당 외부 컨트롤러 프로세서가 있습니다: 🎜🎜🎜🎜업데이트 인터페이스를 직접 테스트하면 정상적으로 작동합니다. 🎜🎜🎜🎜2. 프런트 엔드 페이지 수정🎜🎜새 양식인지 편집 양식인지 구별하려면 데이터에 필드를 추가하여 식별해야 합니다. dialogStatus . 🎜🎜🎜🎜수정 양식에서 [저장 버튼]을 클릭하면 dialogStatus 값을 사용하여 새 메서드를 호출할지 업데이트된 메서드를 호출할지 결정합니다. 🎜🎜🎜 🎜dialogStatus가 "create" code>와 같으면 새로 추가된 것이고, 그렇지 않으면 수정입니다. 🎜🎜그런 다음 편집 페이지 데이터 표시를 처리하기 위한 handleUpdate 메소드도 수정되고 dialogStatus 값이 update에 할당됩니다.🎜 🎜🎜🎜백엔드의 업데이트 인터페이스를 호출하는 updateData code> 메소드가 새로 추가되었습니다. 하지만 js 파일에 인터페이스 요청을 추가한 다음 이를 vue 페이지 파일로 가져오는 것을 잊지 마세요. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/164/168437962991065.png" class="lazy" alt="springboot vue 프로젝트 관리 프런트 엔드 및 백에서 편집 기능을 구현하는 방법 -end">🎜🎜그런 다음 계속해서 <code>updateData 메소드의 코드를 완성하세요: 🎜🎜🎜🎜여기에서도 [항목 추가] 버튼에 대한 변경 사항을 설계했습니다. [편집] 버튼을 클릭하면 dialogStatus는 update와 동일하고 자연스럽게 추가를 클릭하면 create에 값을 할당해야 합니다. add() 메서드를 호출합니다. 🎜🎜하지만 이전 [항목 추가] 버튼이 this.dialogFormVisible = true에 바인딩되었기 때문에 이 두 개를 추출하여 handleAdd 메소드에 썼습니다. Medium: 🎜

그런 다음 이 새로운 버튼 바인딩 방법을 추가하세요.

마지막으로 기능을 테스트합니다.

위 내용은 springboot vue 프로젝트 관리 프런트엔드 및 백엔드에서 편집 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!