Comment implémenter la fonction d'édition de définition de test d'interface Springboot Vue

1. Backend

Le backend doit ajouter 2 interfaces : interroger et mettre à jour l'interface en fonction de l'ID de l'interface.

1. Interface de requête

@GetMapping("/getApi")
  public Result getApiById(Long id) {
      return Result.success(apiDefinitionService.getApi(id));
  }

mybatis-plus a une méthode de requête directe utilisant l'identifiant disponible selectById : selectById：

public ApiDefinition getApi(Long id) {
      return apiDefinitionDAO.selectById(id);
  }

这个查询接口就不在路径后面拼接参数了，刚好用作我后面功能的调试。

2. 更新接口

ApiDefinitionController 继续增加编辑请求的处理方法：

@PostMapping("/update")
  public Result update(@RequestBody ApiDefinition request) {
      try {
          apiDefinitionService.update(request);
          return Result.success();
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

接着在 ApiDefinitionService 里实现：

public void update(ApiDefinition request) {
      QueryWrapper<ApiDefinition> wrapper = new QueryWrapper<>();
      wrapper.eq("id", request.getId());
      request.setUpdateTime(new Date());
      apiDefinitionDAO.update(request, wrapper);
  }

先用传进来的 id 去查询出数据，然后更新apiDefinitionDAO.update(request, wrapper)。

二、前端

1. 实现编辑外显

点击接口列表的【编辑】按钮，打开对话框并且显示该接口的数据。

在接口列表的【编辑】按钮上增加一个绑定事件的方法handleApiUpdate。

还有别忘记添加好要请求的查询接口，后续这个步骤就不再赘述了。

在handleApiUpdate方法里，实现外显。

但是把接口返回的 request 赋值给页面的时候发现了问题。因为存在着 3 个tabs，那么我需要知道后端返回的是属于其中的哪一种tabs。

决定加个字段requestType：参数类型 (0：query, 1: rest，2：body)。

对应的新增接口的请求参数里也要增加：

那么这个字段的值从哪里来呢？

发现<el-tabs></el-tabs>组件里是有个事件的，当点击tab时候会触发，那么就在这个方法里赋值即可。

接着，我又想到了一个问题：比如我参数放在了请求体的tab中，但是又点了其他tab，最后点击了保存，那么这样落库的类型就不对了。

为了解决这个问题，我决定加个判断：保存的时候，会判断当前 tab里的值是否不为空，有值的才可以保存，没有的话给提示出来。

新增一个方法checkRequestNull用于检查当前 tab 里的值是不是空：

这里为什么用domains[0].key判断? 因为默认有个空节点，不填写的时候数据的长度也是 1，所以我改成了判断各自的 key。

最后修改saveApi保存接口的请求方法，在里面加入上面的请求参数判断，注意位置：

测试一下：

继续开发外显功能。

接下来还要做一件事：打开编辑页后，自动显示到有数据的 tabs 页去，比如我是请求体的参数，就自动显示请求体 tab页。

这里有 2 处改动：

先看下面的，就是增加的判断，根据接口返回的请求参数类型，然后赋值给this.activeName，就可以显示对应的 tab再看上面的，是新增了一个字段id，用来保存接口返回的接口id，编辑的时候需要传给后端接口。

测试一下外显功能：

2. 实现接口更新

首先要修改的是对话框保存按钮，我需要通过增加一个字段apiDefinitionDialogStatus，在点击的时候判断是调用新增接口，还是编辑接口，默认是createrrreee

Cette interface de requête ne fusionne pas les paramètres après le chemin, et elle est simplement utilisée pour mon fonctions ultérieures. 🎜🎜2. Mettez à jour l'interface 🎜🎜ApiDefinitionController et continuez à ajouter la méthode de traitement des demandes d'édition : 🎜rrreee🎜Puis implémentez-la dans ApiDefinitionService : 🎜rrreee🎜Utilisez d'abord l'identifiant transmis pour interroger les données, puis mettez à jour apiDefinitionDAO. .update(requête, wrapper). 🎜🎜2. Front-end 🎜🎜1. Implémenter l'affichage d'édition 🎜🎜Cliquez sur le bouton [Modifier] dans la liste des interfaces pour ouvrir la boîte de dialogue et afficher les données de l'interface. 🎜🎜Ajoutez une méthode d'événement de liaison handleApiUpdate au bouton [Modifier] de la liste des interfaces. 🎜🎜🎜🎜Aussi N'oubliez pas d'ajouter l'interface de requête que vous souhaitez demander. Je n'entrerai pas dans les détails de cette étape ultérieure. 🎜🎜🎜🎜in handleApiUpdate, l'affichage explicite est implémenté. 🎜🎜🎜🎜Mais Un problème a été découvert lors de l'affectation de la requête renvoyée par l'interface à la page. Comme il y a 3 onglets, j'ai besoin de savoir quel onglet est renvoyé par le backend. 🎜🎜J'ai décidé d'ajouter un champ requestType : Type de paramètre (0 : requête, 1 : repos, 2 : corps). 🎜🎜🎜🎜correspondant Les paramètres de requête de la nouvelle interface doivent également être ajoutés : 🎜🎜🎜🎜Alors d'où vient la valeur de ce champ ? 🎜🎜🎜🎜Découvert Il y a un événement dans le composant, qui sera déclenché lorsqu'un onglet est cliqué, il suffit donc d'attribuer une valeur dans cette méthode. 🎜🎜🎜🎜Alors , j'ai pensé à un autre problème : par exemple, si je mets les paramètres dans l'onglet du corps de la requête, mais que je clique sur d'autres onglets, et finalement clique sur Enregistrer, alors le type de stockage serait erroné. 🎜🎜Afin de résoudre ce problème, j'ai décidé d'ajouter un jugement : lors de la sauvegarde, il jugera si la valeur dans l'onglet actuel n'est pas vide. Seulement si elle a une valeur, elle pourra être enregistrée. Sinon, elle le sera. rapide. 🎜🎜Ajoutez une nouvelle méthode checkRequestNull pour vérifier si la valeur dans l'onglet actuel est vide : 🎜🎜🎜🎜Pourquoi utiliser domains[0].key pour juger ici ? Parce qu'il y a un nœud vide par défaut, non Lors du remplissage des données, la longueur des données était également de 1, je l'ai donc modifiée pour déterminer les clés respectives. 🎜🎜Enfin, modifiez la méthode de requête de l'interface de sauvegarde saveApi et ajoutez-y le jugement du paramètre de requête ci-dessus. Faites attention à l'emplacement : 🎜🎜🎜🎜Testez-le :🎜🎜🎜🎜Continuez à développer des fonctions explicites. 🎜🎜La prochaine chose à faire est : après avoir ouvert la page d'édition, afficher automatiquement la page des onglets avec les données. Par exemple, si je suis le paramètre du corps de la requête, la page de l'onglet du corps de la requête sera automatiquement affichée. 🎜🎜🎜🎜ici 2 changements : 🎜🎜 Regardez d'abord ce qui suit, qui est le jugement ajouté. Selon le type de paramètre de requête renvoyé par l'interface, puis attribuez-le à this.activeName, l'onglet correspondant peut être affiché. Ensuite, regardez ce qui précède, c'est Un nouveau champ id est ajouté, qui est utilisé pour enregistrer l'identifiant d'interface renvoyé par l'interface. Il doit être transmis à l'interface backend lors de l'édition. 🎜🎜Testez la fonction explicite : 🎜🎜🎜🎜2. Implémenter la mise à jour de l'interface🎜🎜La première chose à modifier est le bouton d'enregistrement de la boîte de dialogue. Je dois ajouter un champ apiDefinitionDialogStatus pour déterminer s'il faut appeler la nouvelle interface ou appeler la nouvelle interface. lorsque vous cliquez sur l'interface d'édition, la valeur par défaut est create. 🎜

Ce champ a été utilisé dans la méthode handleApiUpdate lorsque vous cliquez sur [Modifier], ouvrez la boîte de dialogue, puis attribuez la valeur à update :handleApiUpdate方法里就已经使用了，打开对话框，然后赋值为update:

接着修改对话框的保存按钮的点击事件，当值等于create就调用saveApi()，否则就调用updateApi()。

实现updateApi方法，进行更新的操作。

在此之前，我要需要在请求对象里增加一个字段，就是接口 id，因为后端需要用 id 去查询库里的这条数据。

对应的，在请求参数的处理方法里，也需要增加id的赋值。

就是把外显时候拿到的id赋值到请求参数体里。

最后，在请求接口之前也需要校验下当前 tab 下是否有参数，通过了再请求后端更新接口：

测试一下功能：

功能完成，但是还遗漏了一点，少了个重置，不然点击【创建接口】按钮，;总是会看到上次打开的内容。

新增一个方法resetApiForm

Puis modifiez l'événement de clic du bouton de sauvegarde de la boîte de dialogue. Quand Si la valeur est égale à create, appelez saveApi(), sinon appelez updateApi().

implémentation Méthode updateApi, effectue des opérations de mise à jour.

Avant cela, je dois ajouter un champ à l'objet de requête, qui est l'identifiant de l'interface, car le backend doit utiliser l'identifiant pour interroger ces données dans la bibliothèque.

correspondant , dans la méthode de traitement des paramètres de requête, l'attribution de id doit également être ajoutée.

🎜🎜🎜Juste put Le id obtenu lors de l'affichage est affecté au corps du paramètre de la requête. 🎜🎜Enfin, avant de demander l'interface, vous devez également vérifier s'il y a des paramètres sous l'onglet actuel. Si cela réussit, alors demandez l'interface de mise à jour du backend : 🎜🎜🎜🎜Testez la fonction :🎜🎜🎜🎜La fonction est terminée, mais il manque une chose, une réinitialisation est manquant, sinon cliquez sur le bouton [Créer une interface], ; verra toujours le dernier contenu ouvert. 🎜🎜Ajoutez une nouvelle méthode resetApiForm pour réinitialiser les champs du formulaire : 🎜🎜🎜🎜🎜Utilisé lors du clic sur le bouton [Créer une interface], modifiez-le ici. Auparavant, il s'agissait de changer l'état de. une boîte de dialogue, maintenant mettez-les tous dans une méthode : 🎜🎜🎜🎜🎜Appelez la méthode : 🎜🎜🎜🎜

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!