Mise en œuvre d’une fonction complexe d’ajout, de suppression et de modification basée sur jeecg - boot

J'ai fait une base de données distribuée,Données du dictionnaire de coordination inter - bibliothèques,Ajouter, supprimer et modifier plusieurs tableaux,Champs redondants requis,L'interface est la suivante：

Besoins：

（1）listLes pages peuvent être réutilisées

（2）Ajouter、Suppression de la page personnalisée terminée

1、JEECG-BOOTCompréhension des pages frontales générées

（1）Mélanger les scripts

Page personnalisée frontaleListC'est une page de liste sans aucun doute,Mais il y a des façons de、La fonction n'apparaît pas,Parce queJEECGPour la simplicité du Code frontal,L'emballage de mélange a été effectué,Comprend principalement deux scripts de mélange：@/utils/[email protected]/mixins/JeecgListMixin

（2）J-modal

En outre,Ajouter、Supprimer,JEECG-BOOTInant-design-vueDea-modalModifié sur la base de,Donc...：Tous les POP - ups sont réalisés par slots,Comme suit：

Passer àDeviceModal.vueRegarde encore：

DeviceModal.vue La page n'a pas besoin d'autres modifications . Tout le Code est inutilement cohérent avec la construction .

Par la figure ci - dessus, Vous pouvez remplacer la page par défaut

2、 Accès aux données entre bibliothèques

JEECG Bien que le micro - service soit utilisé , Mais la base de données n'est toujours pas séparée . C'est une bonne continuation SOAIdées de développement.Alors..., La base de données doit être distribuée pendant le développement .Coopérationnacos Configuration en ligne pour , Réaliser l'accès à différentes bases de données par différentes applications .

（1） Configuration de la base de données

Comme le montre la figure ci - dessus, Chaque sous - système est une base de données indépendante ,Il y a beaucoup d'avantages., Le premier est de réduire le couplage （ Séparation des tables de bibliothèque ）, Deuxièmement, améliorer la robustesse du système （ Un problème de bibliothèque ou un blocage , N'affecte pas le fonctionnement d'autres systèmes d'affaires ）, Troisièmement, améliorer les performances du système （Réaliser la distribution）

（2）Innacos Configurer dans

N'oublie passpringboot Ordre de chargement de la configuration pour ：

Lire la priorité ：bootstrap.yml（Local） > application.yml （ Partage global ,C'est - à - dire:：test/dev/prodGénéralités）> application-dev.yml > order-service.yaml >order-service-dev.yaml

Priorité d'action ： Contrairement à l'ordre ci - dessus ,C'est - à - dire:： La dernière lecture annule la configuration précédemment lue

Application spécifique avec laquelle nacos Configuration associée ,InstartDans le modulebootstrap.ymlSpécifié dans la configuration,Comme le montre la figure ci - dessous:：

C'est officiellement recommandé., Théoriquement, tout peut être configuré localement , Ou configurer pour nacos,Pourquoi exactement?,Pas encore étudié en profondeur,À étudier plus avant.

3、Réalisation des fonctions

（1） Mise en œuvre de la lecture et du partage des données entre les bases de données à travers la vue

Comme indiqué ci - dessus ,JEECG-BOOT Malgré le micro - service , Mais il reste une base de données unique du côté de la base de données , Donc le code qu'il génère 、Contrôle,Deboot Extraire les données de la Bibliothèque （ Le contrôle par défaut lit les données dans boot）, Et sur cette base, nous avons réalisé la conception distribuée de la base de données （ Écrivez les données dans la base de données d'affaires spécifique ）, Bien qu'il puisse être complètement abandonné jeecg-bootCode de construction pour, Personnaliser divers contrôles pour atteindre l'objectif complet de la Sous - base de données ,Mais la charge de travail est plus lourde, Ce n'est pas nécessaire quand le temps presse. （ Peut être modifié ultérieurement jeecg-bootNiveau inférieur, Faire en sorte que le Code généré réponde également à vos besoins de personnalisation ）.

Pour se conformerjeecg-boot Exigences de lecture par défaut pour ,C'est très simple., Partager les données entre les bibliothèques à travers les vues ,De la figure ci - dessousdeviceExemple de tableau,InjeecgDebootDans la bibliothèque,Il suffit d'appuyer sur：select * from hanlin_product.deviceGénérer un nomdevice La vue de .

（2） Personnaliser les classes d'entités Multi - tables , Satisfaire aux exigences de désérialisation

La fonctionnalité réalisée cette fois est illustrée dans la figure ci - dessous ：

C'est typique“1Oui, beaucoup.”, Insertion de l'annexe principale .

JEECG Il n'y a pas de bonne façon de réaliser cette fonctionnalité hautement personnalisée . Par conséquent, l'avant et l'arrière doivent être réaménagés en fonction de la conception de l'interaction. .

Tout d'abord,,Jeecg La désérialisation de est bien encapsulée ,C'est pratique.,QueJQueryUtilisation directe moyennejson2C'est simple, Compatible avec toutes les idées de désrialisation ： Créer d'abord une classe d'entité ,Puis désérialiser. Donc le Code d'arrière - plan est JEECG Sur la base de la génération, faites ce qui suit: ：

Ici., Une suggestion personnelle est de créer un paquet Multi - tables , Placer toutes les entités impliquées dans plusieurs tables dans ce dossier , Facilité d'exploitation, d'entretien et de gestion .Comme le montre la figure ci - dessus, Le paquet créé s'appelle ：multiTable

Deuxièmement,, Créer une opération de back - end pour plusieurs tables ,Toujours basé surjeecgLe Code généré est juste, Écrire très efficacement 、Simple.

Ce qui est important ici, c'est que：jeecgProduitsaveBatchFonctionnement（jeecgAussi parmybatis-plusCode généré） N'est pas vraiment l'enregistrement par lots , Goulot d'étranglement de l'efficacité dans les grandes écritures simultanées . Aucun problème lors de l'écriture de petits lots de contenu , Une fois la concurrence trop élevée ,Oui.redis+mqBriser le goulot d'étranglement（On en reparlera plus tard.,Écris - le toi - même.）.

（3）Code frontal, Et les appels avant et arrière

Regardez d'abord l'avant data, Notes

data() {
  return {
    showPopMsg: false,// Contrôle popup 
    deviceId:'',//Matériel actuelid, Allocation par défaut lors de l'ajout guid, Est l'enregistrement actuellement édité au moment de l'édition id
    model: {},// Suivre le Code de construction , Placez l'entité de la table courante ,C'est - à - dire:： Divers attributs de table pour model.xxExiste
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 }
    },
    confirmLoading: false,// Indique s'il faut charger , Utilisé pour les opérations de données en vrac 
    validatorRules: {},
    url: {
      add: '/jeecg-product/deviceMultiTable/saveWhole',
      edit: '/jeecg-product/deviceMultiTable/editWhole',
      queryById: '/jeecg-product/device/device/queryById'
    },//Édition、 Arrière - plan supprimé controllerAdresse de l'interface
    columns: [
      {
        title: 'Types d'indicateurs',
        dataIndex: 'itemTypeId',
        key: 'itemTypeId',
        width: 80,
        scopedSlots: { customRender: 'itemTypeId' }
      },
      {
        title: 'Nom de l'indicateur',
        dataIndex: 'itemName',
        key: 'itemName',
        width: 120,
        scopedSlots: { customRender: 'itemName' }
      },
      {
        title: 'Type d'affichage',
        dataIndex: 'dataShowingTypeId',
        key: 'dataShowingTypeId',
        width: 80,
        scopedSlots: { customRender: 'dataShowingTypeId' }
      },
      {
        title: 'Par défaut',
        dataIndex: 'defaultValue',
        key: 'defaultValue',
        width: 80,
        scopedSlots: { customRender: 'defaultValue' }
      },
      { title: 'Unité', dataIndex: 'unit', key: 'unit', width: 80, scopedSlots: { customRender: 'unit' } },
      {
        title: 'PLCAdresse',
        dataIndex: 'plcPlace',
        key: 'plcPlace',
        width: 80,
        scopedSlots: { customRender: 'plcPlace' }
      },
      {
        title: 'PLCType de données',
        dataIndex: 'plcType',
        key: 'plcType',
        width: 100,
        scopedSlots: { customRender: 'plcType' }
      },
      {
        title: ' Observation ciblée ou non ',
        dataIndex: 'isObservingItem',
        key: 'isObservingItem',
        width: 80,
        scopedSlots: { customRender: 'isObservingItem' }
      },
      {
        title: ' Surveillance de l'entretien ou non ',
        dataIndex: 'isMaintainingItem',
        key: 'isMaintainingItem',
        width: 80,
        scopedSlots: { customRender: 'isMaintainingItem' }
      },
      {
        dataIndex: 'oper',
        key: 'oper',
        width: 80,
        scopedSlots: { customRender: 'oper' },
        slots: { title: 'operTitle' }
      }
    ],//listChamps de la liste
    deviceItemData: [],//Propriétés personnalisées, Contenu pour la production en vrac 
    selectedDeviceTypeId: ''//Propriétés personnalisées, Valeur utilisée pour enregistrer le contrôle personnalisé 
  }
},

Methods Les codes ne sont pas affichés un par un （ Voir l'annexe pour plus de détails ）

Il convient de noter ici que submitForm()Modification de：

4、Améliorer les idées

（1）saveBatch Une véritable mise en œuvre de l'enregistrement par lots peut être fournie dans le processus de grande concurrence ,Également disponible viaredis+mq Pour écrire de façon stable dans la base de données （ Évitez la base de données “Écris.”Blocage）,Maintenant.mybatis-plusLe Code généré est“Cycle+Insérer”, Il doit y avoir un goulot d'étranglement d'écriture en cas de grande concurrence .

（2） La base de données est distribuée , Encore une fois, la séparation lecture - écriture , Améliore considérablement l'efficacité de la concurrence

（3） Bien que le Code frontal fonctionne , Mais c'est plus épais. ,Mauvais entretien, Peut être encapsulé sur la base du Code existant ,Y compris:js Encapsulation et Encapsulation d'un seul composant de fichier .