TD n°3

SpringBoot - VueJS

 

Notions abordées

  • Back-end :
    1. Service Rest
    2. Génération SPA
  1. Front-end :
    • SPA vueJS
    • Vuetify

Application messagerie (suite)

Rester sur le même projet :

- Ajouter la dépendance Maven SpringBoot-VueJS

<dependency>
    <groupId>io.github.jeemv.springboot.vuejs</groupId>
    <artifactId>springboot-vuejs</artifactId>
    <version>[1.0,)</version>
</dependency>

Ajouter VueJS et Vuetify dans les templates du projet (Webjars déconseillés) :

<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Messagerie</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.19/vuetify.min.css" />
	<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">	
</head>
<body>
<v-app>
  <v-content>
    <v-container fluid>

		</v-container>
	</v-content>
</v-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.19/vuetify.min.js"></script>
</body>
</html>

Service REST

Contrôleur RestOrgasController :

Action methode datas Route
read() GET /rest/orgas/
read(id) GET /rest/orgas/{id}
create()* POST orga /rest/orgas/create
update()* PUT orga /rest/orgas/update
delete()* DELETE orga /rest/orgas/delete
get(id,member) GET /rest/orgas/{member}/{id}

N'implémenter dans un premier temps que les méthodes marquées d'une étoile*.

Application

Back-end

Contrôleur OrgasController :

La route /orgas/ doit afficher les organisations et charger le module (SPA) de gestion des organisations.

Front-end, généré en back

On utilisera le composant Data-table de Vuetify, exemple destiné au CRUD, pour obtenir le résultat suivant :

SPA

data Defaut
orgas
Liste des organisations
Arraylist
headers
En-têtes du data-table
Array JSON
dialog
booléen pour affichage dialogue
false
editedItem
orga sélectionnée
{}
editedIndex
index de l'orga sélectionnée
-1
computed formTitle
Titre du dialogue
Varie en fonction de editedIndex
method Description
close()
Ferme le dialogue
Réinitialise editedItem et editedIndex
save()
Valide l'ajout ou la modification
POST/PUT vers REST + maj JS si succès
deleteItem(orga)
Supprime l'organisation
DELETE vers REST + maj JS si succès
editItem(orga)
Edite l'orga
maj JS + affichage dialogue

SPA (suite)

Sur sélection d'une organisation, afficher :

  • la liste des utilisateurs
  • la liste des groupes

dans un composant List

framework-web/spring/td3.txt · Dernière modification: 2019/10/05 15:57 par jcheron
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0