Maison > base de données > tutoriel mysql > Comment implémenter la fonction d'ajout d'utilisateur

Comment implémenter la fonction d'ajout d'utilisateur

醉折花枝作酒筹
Libérer: 2021-05-07 09:08:13
avant
2993 Les gens l'ont consulté

Cet article vous présentera comment implémenter la fonction d'ajout d'utilisateurs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment implémenter la fonction d'ajout d'utilisateur

Mise en œuvre de la fonction Ajouter un utilisateur

Exigences

Après avoir cliqué sur le bouton Ajouter, une boîte de dialogue pour ajouter des utilisateurs apparaîtra, puis dans Dans cette boîte de dialogue, entrez les informations pour ajouter l'utilisateur, cliquez sur Ajouter et les informations sur l'utilisateur seront affichées sur la dernière page.

Lier un événement de clic au bouton d'ajout d'utilisateur

Lier un événement de clic au bouton d'ajout d'utilisateur, une boîte de dialogue pour ajouter un utilisateur apparaîtra. L'événement de clic est tel qu'indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Ajouter l'effet et le code de la boîte de dialogue de l'utilisateur

L'effet est le suivant :

Comment implémenter la fonction dajout dutilisateur

Le code est le suivant :

Comment implémenter la fonction dajout dutilisateur

Les données du composant UserList.vue nécessaires pour ajouter la boîte de dialogue utilisateur

Saisissez-le dans le formulaire d'ajout Après avoir ajouté les informations de l'utilisateur, car il s'agit d'une liaison bidirectionnelle, les informations de l'utilisateur seront stockées dans les attributs de l'objet json nommé addForm. L'objet de données addForm est comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

La méthode addUser dans le composant UserList.vue

Le contenu de la méthode addUser est le suivant :

Comment implémenter la fonction dajout dutilisateur

Comment implémenter la fonction dajout dutilisateur

La méthode addUser a été exécutée avec succès. Après cela, une nouvelle donnée utilisateur a été ajoutée à la table easyUser de la base de données. Ces nouvelles données doivent être affichées dans la table qui s'affiche. utilisateurs dans le composant UserList.vue Comment l'afficher ? Il s'agit de remplacer le numéro de page actuel par une valeur élevée, supérieure au numéro de page total. Étant donné que le paramètre de rationalisation du paramètre de pagination raisonnable a été défini sur true dans le fichier de configuration SpringBoot, ce grand numéro de page est en fait équivalent à la dernière page. numéro de page. Après avoir défini le numéro de page actuel, appelez la méthode getUserList dans la méthode addUser pour recharger les données de collection utilisateur de la dernière page.

méthode getUserList

la méthode getUserList est utilisée pour attribuer des valeurs à userList et aux données totales, comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

dans le Composant UserList.vue Les données de pagination

sont présentées ci-dessous :

Comment implémenter la fonction dajout dutilisateur

La méthode getUserList

dans le contrôleur backend SpringBoot pour recevoir l'utilisateur de la page La demande est due au fait que le backend doit recevoir le frontend. L'objet json passé Page, donc une classe d'entité Page correspondante doit être écrite sur le backend, afin de faciliter la réception des paramètres transmis par le front-end. La classe d'entité Page est comme indiqué ci-dessous. :

Comment implémenter la fonction dajout dutilisateur

La méthode getUserList dans le backend SpringBoot est la suivante :

Comment implémenter la fonction dajout dutilisateur

La méthode getAllUser dans le proxy dynamique L'interface UserDao

est la suivante :

Comment implémenter la fonction dajout dutilisateur

Comment implémenter la fonction dajout dutilisateur

L'instruction SQL

dans UserDao. XML est le suivant :

Comment implémenter la fonction dajout dutilisateur

Une fois la méthode getUserList exécutée dans la méthode addUser, les données de pagination interrogées seront restituées dans la table où se trouve la UserList. Le composant vue affiche les informations utilisateur.

La table dans laquelle les informations utilisateur sont stockées, comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Une fois la méthode getUserList exécutée, les données du La page actuelle sera stockée dans la collection userList, comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Utiliser l'élément ui Le tableau affiche les données utilisateur dans la collection userList, comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Test

Le premier choix est d'accéder à la page d'accueil et de cliquer sur le bouton Ajouter un utilisateur comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Ensuite, dans la boîte de dialogue contextuelle, remplissez les informations utilisateur à ajouter, comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Cliquez sur le bouton Ajouter comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

Affichez la table easyUser de la base de données, comme indiqué ci-dessous :

Comment implémenter la fonction dajout dutilisateur

[Apprentissage recommandé : Tutoriel vidéo SQL]

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal