


Springboot Vue Front-End et Back-End Interface Test Tree Noeud Ajout de méthode de fonction
Développement de plate-forme de test basé sur springboot+vue
1 La méthode append du contrôle d'arborescence frontal
Il existe une méthode append
sous le contrôle d'arborescence elementUI, qui peut être utilisée pour ajouter un nœud dans l'arborescence un nœud enfant. append
方法,可以用来为 Tree 中的一个节点追加一个子节点。
目前我们已经完成了树列表的接口,可以在 append 方法中输出一下传入的 data 里到底是什么。
console.log('传入的node:' + JSON.stringify(data))
点击顶层的默认节点,F12 查看控制台,
可以看到:
格式化看下其实就是整个节点的树形结构。点击哪一个节点,data 内容就是这个节点下的所有节点数据。
但实际上,我只需要当前点击的节点的数据即可,这个节点下的 children 可以不关心,不过考虑到数据量也不大,就整个传给后端好了。
二、后端实现节点新增接口
我要实现的功能是点击哪个节点的添加按钮,就是添加这个节点的子节点,比如:
既然前端可以拿到当前节点的数据,那么新增接口的思路也就有了:
拿到前端传过来的当前节点的数据set 创建时间、更新时间set 好 pos,也就是这个新增的子结点在兄弟节点中的位置顺序set 子结点的层级,也就是当前节点的 level + 1set 子节点的父节点,也就是当前传入接口的节点的 idset 新增节点的名称,=最后进行 insert
1. controller 层
新增对应的控制器方法:
@PostMapping("/add") public Result addNode(@RequestBody ApiModule node) { try { System.out.println(node); Long nodeId = apiModuleService.addNode(node); return Result.success(nodeId); } catch (Exception e) { return Result.fail(e.toString()); } }
2. service 层
实现 addNode 方法:
public Long addNode(ApiModule node) { node.setCreateTime(new Date()); node.setUpdateTime(new Date()); double pos = getNextLevelPos(node.getProjectId(), node.getLevel(), node.getId()); node.setPos(pos); node.setLevel(node.getLevel() + 1); node.setParentId(node.getId()); node.setName("ceshi111"); apiModuleDAO.insert(node); return node.getId(); }
这里就是按照上述思路来进行实现,setName 暂时用一个固定值代替,先看下新增接口是否可以正常实现。
这里 pos 处理稍微麻烦一点,这个是代表新增的这个节点处于的位置顺序,所以抽出去新增了一个方法实现getNextLevelPos

private double getNextLevelPos(Long projectId, int level, Long nodeId) { // 查询项目下,同parentId下,所有节点 QueryWrapper<ApiModule> queryWrapper = new QueryWrapper<>(); queryWrapper.eq("projectId", projectId) .eq("level", level + 1) .eq("parentId", nodeId) .orderByDesc("pos"); List<ApiModule> apiModules = apiModuleDAO.selectList(queryWrapper); if (!CollectionUtil.isEmpty(apiModules)) { // 不为空,获取最新的同级结点 pos 再加 1,作为下一个 return apiModules.get(0).getPos() + 1; } else { // 否则就是当前父节点里的第一个子结点,pos 直接为 1 return 1; } }



Le formatage est en fait la structure arborescente de l'ensemble du nœud. Sur quel nœud est cliqué, le contenu des données est toutes les données du nœud sous ce nœud.
Mais en fait, je n'ai besoin que des données du nœud actuellement cliqué. Je n'ai pas besoin de me soucier des enfants sous ce nœud. Cependant, étant donné que la quantité de données n'est pas importante, je les transmets simplement au backend. dans son intégralité.
2. Implémentation back-end de la nouvelle interface du nœud

Depuis le le front-end peut obtenir les données du nœud actuel, puis le nouveau L'idée d'ajouter une interface est ici :
Obtenir l'ensemble de données du nœud actuel transmis par le front-end, l'heure de création et l'heure de mise à jour .Définir la bonne pos, c'est-à-dire l'ordre de position de ce nœud enfant nouvellement ajouté parmi les nœuds frères. Définir le nœud enfant Le niveau du point, c'est-à-dire le niveau du nœud actuel + 1set Le nœud parent du nœud enfant. , qui est l'idset du nœud actuellement passé dans l'interface. Le nom du nouveau nœud, = enfin insert
1 Couche contrôleur
Ajoutez la méthode Controller correspondante :
rrreee2 La couche service
implémente addNode. méthode : rrreee
getNextLevelPos
: rrreeeSous le projet de requête, la même que parentId, Toutes les données du nœud, faites attention aux conditions de requête ici.
.eq("level", level + 1), le niveau actuel + 1 est utilisé comme niveau du nœud enfant.eq("parentId", nodeId), le nœud actuel est utilisé comme nœud parent
Ensuite jugez le résultat de la requête, si la liste ne le fait pas. Si elle est vide, renvoie la pos du dernier nœud enfant plus 1 comme position du nœud enfant suivant.
Sinon, le nœud nouvellement ajouté est le premier nœud enfant du nœud parent actuel et 1 est renvoyé directement comme valeur pos.
🎜3. Débogage conjoint du front-end et du back-end🎜🎜Écrivez l'interface sur le front-end, puis appelez l'interface sur la page. 🎜🎜🎜🎜🎜Appelez l'interface, ajoutez une invite de réussite, puis actualisez la liste arborescente. 🎜🎜🎜🎜🎜La fonction est normale. Un nœud enfant avec le nom fixe "ceshi111" est ajouté sous le nœud correspondant, et l'arborescence est actualisée pour afficher les dernières données. 🎜🎜🎜🎜🎜 4. Modifiez le nom du nœud 🎜🎜Ce qui précède est terminé, ce qui prouve qu'il n'y a pas de gros problème avec la fonction. Il ne nous reste plus qu'à résoudre le problème de la modification du nom du nœud. J'ai décidé d'utiliser la boîte de dialogue pour résoudre le problème. 🎜🎜Cliquez sur le bouton Ajouter pour ouvrir la boîte de dialogue, dans laquelle vous pouvez saisir le nom du nœud et l'enregistrer. Cette boîte de dialogue est également disponible pour éditer des scènes. 🎜🎜Dans la fonction gestion de projet, j'ai déjà utilisé une fois la boîte de dialogue, j'ai directement copié le code concerné et l'ai modifié. 🎜🎜🎜🎜🎜 correspond au retour : 🎜🎜🎜🎜🎜Il y aura 2 boutons dans la boîte de dialogue : Annuler et Enregistrer. Lorsque vous cliquez sur le bouton Enregistrer, différentes méthodes seront appelées selon qu'elles sont nouvelles ou modifiées. 🎜🎜1. Ouvrez la boîte de dialogue🎜🎜Modifiez la méthode d'ajout et vous devez ouvrir la boîte de dialogue lorsque vous cliquez sur le nouveau bouton. 🎜Il y a un autre point important, car l'ajout d'un nœud nécessite la transmission de données, et maintenant l'opération d'ajout réelle est la méthode handleNodeAdd
. Vous devez donc enregistrer les données lors de l'ouverture de la boîte de dialogue. handleNodeAdd
方法。所以需要在打开对话框的时候,把 data 存下来。
于是,在 return 里新建一个字段currentNode: {}:
在 append 方法里把 data 赋值给 currentNode:
这里this.dialogStatus = 'create'就是显示对话框。
2. 新增节点
在对话框里输入节点名称,点击保存,就好调用handleNodeAdd
Attribuez des données à currentNode dans la méthode d'ajout :
handleNodeAdd
pour demander l'interface backend.
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

L'utilisation d'ECharts dans Vue facilite l'ajout de fonctionnalités de visualisation de données à votre application. Les étapes spécifiques incluent : l'installation des packages ECharts et Vue ECharts, l'introduction d'ECharts, la création de composants de graphique, la configuration des options, l'utilisation de composants de graphique, la création de graphiques réactifs aux données Vue, l'ajout de fonctionnalités interactives et l'utilisation avancée.

Question : Quel est le rôle de l'exportation par défaut dans Vue ? Description détaillée : export default définit l'export par défaut du composant. Lors de l'importation, les composants sont automatiquement importés. Simplifiez le processus d’importation, améliorez la clarté et évitez les conflits. Couramment utilisé pour exporter des composants individuels, en utilisant à la fois les exportations nommées et par défaut, et pour enregistrer des composants globaux.

La fonction map Vue.js est une fonction intégrée d'ordre supérieur qui crée un nouveau tableau où chaque élément est le résultat transformé de chaque élément du tableau d'origine. La syntaxe est map(callbackFn), où callbackFn reçoit chaque élément du tableau comme premier argument, éventuellement l'index comme deuxième argument, et renvoie une valeur. La fonction map ne modifie pas le tableau d'origine.

Dans Vue.js, event est un événement JavaScript natif déclenché par le navigateur, tandis que $event est un objet d'événement abstrait spécifique à Vue utilisé dans les composants Vue. Il est généralement plus pratique d'utiliser $event car il est formaté et amélioré pour prendre en charge la liaison de données. Utilisez l'événement lorsque vous devez accéder à des fonctionnalités spécifiques de l'objet événement natif.

Il existe deux manières d'exporter des modules dans Vue.js : exporter et exporter par défaut. export est utilisé pour exporter des entités nommées et nécessite l'utilisation d'accolades ; export default est utilisé pour exporter des entités par défaut et ne nécessite pas d'accolades. Lors de l'importation, les entités exportées par export doivent utiliser leurs noms, tandis que les entités exportées par défaut d'exportation peuvent être utilisées implicitement. Il est recommandé d'utiliser l'exportation par défaut pour les modules qui doivent être importés plusieurs fois et d'utiliser l'exportation pour les modules qui ne sont exportés qu'une seule fois.

onMounted est un hook de cycle de vie de montage de composant dans Vue. Sa fonction est d'effectuer des opérations d'initialisation après le montage du composant sur le DOM, telles que l'obtention de références aux éléments du DOM, la définition de données, l'envoi de requêtes HTTP, l'enregistrement d'écouteurs d'événements, etc. Il n'est appelé qu'une seule fois lorsque le composant est monté. Si vous devez effectuer des opérations après la mise à jour du composant ou avant sa destruction, vous pouvez utiliser d'autres hooks de cycle de vie.

Les hooks Vue sont des fonctions de rappel qui effectuent des actions sur des événements spécifiques ou des étapes du cycle de vie. Ils incluent des hooks de cycle de vie (tels que beforeCreate, Mounted, beforeDestroy), des hooks de gestion d'événements (tels que click, input, keydown) et des hooks personnalisés. Les hooks améliorent le contrôle des composants, répondent aux cycles de vie des composants, gèrent les interactions des utilisateurs et améliorent la réutilisabilité des composants. Pour utiliser des hooks, définissez simplement la fonction hook, exécutez la logique et renvoyez une valeur facultative.

Les modificateurs d'événements Vue.js sont utilisés pour ajouter des comportements spécifiques, notamment : empêcher le comportement par défaut (.prevent) arrêter le bouillonnement d'événements (.stop) événement ponctuel (.once) capturer l'événement (.capture) écouter passivement les événements (.passive) Adaptatif modificateur (.self)Modificateur de touche (.key)
