TD n°3

Ceci est une ancienne révision du document !

Back-end :
1. Service Rest
2. Génération SPA

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) :

vue/header.html
1 2 3 4 5 6 7 8 9 10 11 12	`<!doctype` `html>` `<html` `lang="fr">` `<head>` `<meta` `charset="UTF-8">` `<title>Messagerie</title>` `<link` `rel="stylesheet"` `href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/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>`

vue/footer.html
1 2 3 4 5 6 7 8	`</v-container>` `</v-content>` `</v-app>` `<script` `src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>` `<script` `src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.min.js"></script>` `<script` `src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.min.js"></script>` `</body>` `</html>`

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*.

Contrôleur OrgasController :

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

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

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