Comment implémenter la fonction d'édition dans le front-end et le back-end de gestion de projet Springboot Vue

Testez le développement de la plate-forme basée sur springboot+vue

1. Ouvrez la page d'édition pour afficher les données

1. Bouton Modifier

Le composant de table copié auparavant contient 2 boutons.

Lier un événement de clic handleUpdate(scope.row). Cette ligne est l'objet de l'enregistrement actuel. Vous pouvez ajouter une console pour l'imprimer. 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 . Écrivez la méthode handleUpdate pour traiter l'affichage des données🎜🎜Vous devez interroger le nom du projet et la description de l'enregistrement actuel et l'attribuer au formulaire pour afficher les données. Ici, vous devez effectuer une requête en fonction de l'identifiant du projet (unicité). 🎜🎜Modifiez l'interface de la liste des projets backend pour prendre en charge l'interrogation des données en fonction de l'ID du projet : 🎜🎜🎜🎜Appelez l'interface dans handleUpdate : 🎜🎜🎜🎜this.dialogFormVisible = true , ouvrez d'abord la boîte de dialogue dans l'objet de données projectQuery, ajoutez un identifiant utilisé pour transmettre les paramètres à l'interface. Attribuez ensuite row.id à l'identifiant de chaque ligne à this.projectQuery.id et enfin demandez l'interface. Il n'y a qu'un seul élément dans la liste renvoyée. code >projectName et description, puis attribuez-les au formulaire. 🎜🎜Testez-le : 🎜🎜🎜🎜2. Enregistrez le contenu de la page d'édition🎜🎜1. Ajoutez une interface de mise à jour au backend🎜🎜Le formulaire de la page d'édition est le même que la nouvelle page, il n'est pas nécessaire d'écrire un autre. Par conséquent, certaines modifications doivent être apportées au formulaire pour appeler l'API correspondante lors de la création et de l'édition respectivement. 🎜🎜La nouvelle interface existe déjà. Ajoutez maintenant une interface mise à jour et continuez à écrire dans ProjectService. 🎜🎜🎜🎜Il existe également un processeur de contrôleur externe correspondant : 🎜🎜🎜🎜Testez vous-même l'interface de mise à jour et elle fonctionne normalement. 🎜🎜🎜🎜2 . Modification de la page front-end🎜🎜Afin de distinguer s'il s'agit d'un nouveau formulaire ou d'un formulaire d'édition, vous devez ajouter un champ aux données pour l'identifier : dialogStatus . 🎜🎜🎜🎜Modification Lorsque vous cliquez sur le [Bouton Enregistrer] dans le formulaire, la valeur de dialogStatus est utilisée pour décider d'appeler la méthode nouvelle ou mise à jour : 🎜🎜🎜 🎜Lorsque dialogStatus est égal à "create" code>, c'est un nouvel ajout, sinon c'est une modification. 🎜🎜Ensuite, la méthode handleUpdate de traitement de l'affichage des données de la page d'édition est également modifiée, et la valeur de dialogStatus est affectée à update :🎜 🎜🎜🎜Méthode updateData code> nouvellement ajoutée pour appeler l'interface de mise à jour du backend. Mais n'oubliez pas d'ajouter la requête d'interface dans le fichier js, puis de l'importer dans le fichier de la page vue. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/164/168437962991065.png" class="lazy" alt="Comment implémenter la fonction d'édition dans le front-end et le back-end de springboot vue project management">🎜🎜Puis continuez à compléter le code de la méthode <code>updateData : 🎜🎜🎜🎜Ici, nous avons également conçu une modification du bouton [Ajouter un élément], car lorsque vous cliquez sur le bouton [Modifier], dialogStatus est égal à update code>, alors naturellement lorsque vous cliquez sur Ajouter, vous devez attribuer la valeur à <code>create code> pour appeler la méthode <code>add(). 🎜🎜Mais comme le bouton [Ajouter un élément] précédent a été lié à un this.dialogFormVisible = true, nous avons extrait ces deux éléments et les avons écrits dans une méthode handleAdd Medium : 🎜

Ensuite, ajoutez cette nouvelle méthode de liaison de boutons.

Enfin, testez la fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!