【Cadre de gestion arrière Ruoyi (version de séparation front-end et back-end)】 Comment déployer Ruoyi et ajouter vos propres modules et menus fonctionnels

[Cadre de tube arrière Ruoyi (version de séparation des extrémités avant et arrière)] Comment ajouter vos propres modules de fonction et menus

[Avant que l'article ne commence, permettez-moi de dire quelque chose, Ruoyi est génial ! 】

1 Introduction au cadre Ruoyi

RuoYi-Vue est une plate-forme de développement rapide Java EE au niveau de l'entreprise, basée sur des combinaisons de technologies classiques (Spring Boot, Spring Security, MyBatis, Jwt, Vue), des modules intégrés tels que : gestion de département, utilisateurs de rôle, menu et autorisation de bouton , autorisations de données, paramètres système, gestion des journaux, génération de code, etc. Configuration des tâches de synchronisation en ligne ; prend en charge les clusters, prend en charge plusieurs sources de données et prend en charge les transactions distribuées.

Selon l'adresse officielle du document de la version de séparation front-end et back-end : http://doc.ruoyi.vip/ruoyi-vue/

Adresse de l'entrepôt de code : https://gitee.com/y_project/RuoYi-Vue

2 Si vous téléchargez, installez et exécutez selon le cadre [version séparée des extrémités avant et arrière]

2.1 Exigences relatives à l'environnement du système d'exploitation

• JDK >= 1.8

• MySQL >= 5.7

• Maven >= 3.0

• Nœud >= 12

• Redis >= 3

2.2 Téléchargement du code source

[La recommandation officielle est de cloner directement l'entrepôt, et l'auteur télécharge directement le code source ici]

L'adresse du code source de la version de séparation front-end et back-end :

https://gitee.com/y_project/RuoYi-Vue

Télécharger directement le code source

Attendez que le téléchargement soit terminé

OK, décompressez

Cliquez pour voir

OK, un projet multi-module Maven standard.

2.3 Préparation des sources de données

sqlDossier dans le répertoire du code source décompressé

Ces deux fichiers sql doivent être importés dans la base de données

[Créer une nouvelle ry-vuebase de données nommée (bien sûr, cela peut être modifié)]

Parce que l'auteur a déjà une base de données avec le même nom, je vais faire un petit changement

Bien sûr

Faites glisser et déposez directement deux fichiers SQL

commencer

une autre empathie

L'effet de base de données final

D'ACCORD. De cette façon, la base de données est prête.

2.4 Exécution du projet

Utiliser IDEA [ou d'autres outils de développement pour importer des projets]

D'ACCORD.

Ceci termine la synchronisation.

Modifier la configuration de la source de données

Principalement le nom de la base de données et le nom d'utilisateur et le mot de passe de la base de données.

OK, maintenant vous pouvez démarrer le service

Notez qu'au démarrage, le service Redis doit être en cours d'exécution, sinon une exception sera levée [car si le cache est utilisé conformément au framework]

OK, donc le backend est démarré avec succès. Mais parce que les extrémités avant et arrière sont complètement séparées,
un accès direct

Vous devez donc démarrer le projet

Vous pouvez ouvrir la ligne de commande directement dans l'outil IDEA

cd vers ruoyi-uirépertoire

OK, utilisez la commande npm install pour installer les dépendances requises par le projet frontal

Attendez que l'installation soit terminée

OK, le téléchargement de la dépendance est terminé. Vous pouvez maintenant exécuter le projet frontal

utiliser la commandenpm run dev

Attendez que la course soit terminée

OK, une fois la compilation réussie, la page apparaîtra automatiquement

Il s'agit du système Ruoyi [version frontale et version frontale séparées].

3 Ajoutez vos propres modules de fonction

Entrez le mot de passe de calcul pour entrer dans le système

On peut voir que le système par défaut est comme ça, et on peut dire que les fonctions de base sont assez complètes. Les gens ne peuvent s'empêcher de le répéter, [Ruoyi est génial ! 】

Ajoutons maintenant notre propre module de fonction simple [principalement pour que tout le monde sache comment l'utiliser]

3.1 Préparer la source de données

Ici l'auteur est simple, par exemple, pour faire une "gestion d'événement", il faut qu'il y ait un tableau d'activité

directement dans la base de données

Venez juste à quelques champs** [Remarque : Remplissez les notes, c'est utile ! ! ! ! ! ! 】**

Faites aussi un commentaire sur le tableau lui-même ! ! ! Ça marche! ! ! ! ! !

【Bien sûr】

D'ACCORD. La table de données a été créée avec succès.

Insérez simplement une donnée

D'ACCORD.

3.2 Utiliser le générateur de code Ruoyi pour générer des menus, des interfaces et des pages

Suivant est le cœur de cet article

Ajoutez une gestion des activités à côté de celle-ci pour gérer le tableau des activités que nous venons de créer

Cliquez sur la gestion du menu, venez d'abord à un "grand menu"

Bien sûr

Ceci est ajouté, et la génération de code est présentée ci-dessous !

Importer la table d'activité dans nos données

Bien sûr

OK, maintenant faites quelques réglages, cliquez sur编辑

Vous pouvez voir qu'il y a trois colonnes

① Informations de base

Il n'y a rien à dire à ce sujet, changeons l'auteur, pour que dans le code d'interface généré, l'auteur du commentaire du document affiche ceci

② Informations sur le terrain

Modifiez simplement cela en fonction de vos besoins

③ Générer des informations [c'est le noyau ]

OK, soumettez directement. 【Faites attention au menu supérieur】

Cliquez sur生成 代码

télécharge le

D'ACCORD. La génération de code est terminée.

3.3 Ajouter des modules de code au backend

Il ne suffit certainement pas de s'appuyer sur le code généré par Ruoyi, nous devons apporter quelques modifications sur la base du code source back-end

Créer un nouveau sous-module

créer

OK, un sous-module propre

Modifier le fichier pom

    <dependencies>
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-common</artifactId>
        </dependency>
    </dependencies>

Parce que certaines fonctions du "module général" doivent être utilisées, il convient de l'ajouter en tant que dépendance à notre module d'activité [les propriétés doivent être supprimées, le projet parent existe déjà, il est préférable de ne pas écrire ici]

Modifiez le fichier pom du module ruoyi-admin et ajoutez le module d'activité que nous avons ajouté nous-mêmes

        <!--    活动信息管理    -->
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-activity</artifactId>
            <version>${ruoyi.version}</version>
        </dependency>

[N'oubliez pas de le glisser, et ce sera fini lorsque vous arriverez à l'endroit "faites-le vous-même" ici]

3.4 Ajouter le code généré au projet

OK, maintenant nous pouvons sacrifier le package compressé généré à l'étape de notre génération de code

l'extraire

Le reste est très simple

① base de données

exécuter directement

OK, l'opération est réussie.

② Ajouter un code back-end

voir ce qui est généré

OK, il existe des contrôleurs, des classes d'entités, des interfaces de couche de données, des interfaces de couche métier et des classes d'implémentation de couche métier

Un à gauche, fichier de mappage de mappeur

c'est ici

copier directement dans

OK, le backend est fait.

③ Collez le code frontal

Copiez tout ce dossier directement

Collez ici, OK

il y a une autre page

Copiez également ce dossier directement

D'ACCORD. vous avez terminé

Redémarrez le service de backend

Voir la première page

Génial!

4 Fonction d'essai

4.1 augmentation

4.2 supprimer

4.3 changement

4.4 Vérifier

légèrement

OK, ça y est, la force de Zoyi est bien plus que ça, explorons lentement, Zoyi est incroyable ! ! !

enfin我们一定能够成为我们想要去成为的人。