-
- Partie cours
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
framework-web:spring:td3 [2019/03/13 01:26] jcheron [SPA (suite)] |
framework-web:spring:td3 [2020/02/19 02:32] (Version actuelle) jcheron [Service REST] |
||
|---|---|---|---|
| Ligne 26: | Ligne 26: | ||
| - | ===== Application messagerie (suite) ===== | ||
| - | Rester sur le même projet : | + | ===== Service REST ===== |
| + | |||
| + | Créer un nouveau projet (Web, JPA, Devtools, Mustache) et récupérer la partie données du projet précédent (models, repositories, database) : | ||
| + | |||
| + | Contrôleur **RestOrgasController** : | ||
| + | |||
| + | |< 100% >| | ||
| + | ^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} | | ||
| + | |||
| + | * Tester avec un client REST en ligne (par exemple https://reqbin.com ou [[https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo|Chrome REST client]]) | ||
| + | ===== Application ===== | ||
| - Ajouter la dépendance **Maven SpringBoot-VueJS** | - Ajouter la dépendance **Maven SpringBoot-VueJS** | ||
| Ligne 48: | Ligne 63: | ||
| <meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| <title>Messagerie</title> | <title>Messagerie</title> | ||
| - | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.min.css" /> | + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.2.12/vuetify.min.css" /> |
| <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> | <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> | ||
| </head> | </head> | ||
| Ligne 61: | Ligne 76: | ||
| </v-content> | </v-content> | ||
| </v-app> | </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/axios/0.19.0/axios.min.js"></script> |
| - | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.min.js"></script> | + | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
| - | <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.min.js"></script> | + | <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.2.12/vuetify.min.js"></script> |
| </body> | </body> | ||
| </html> | </html> | ||
| </sxh> | </sxh> | ||
| - | ===== Service REST ===== | ||
| - | |||
| - | Contrôleur **RestOrgasController** : | ||
| - | |||
| - | |< 100% >| | ||
| - | ^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 ==== | ==== Back-end ==== | ||
| Ligne 92: | Ligne 91: | ||
| ==== Front-end, généré en back ==== | ==== Front-end, généré en back ==== | ||
| + | |||
| + | Lire la première partie du guide [[https://vuejs.org/v2/guide/|VueJS]] | ||
| On utilisera le composant Data-table de Vuetify, exemple destiné au [[https://vuetifyjs.com/en/components/data-tables#crud-actions|CRUD]], pour obtenir le résultat suivant : | On utilisera le composant Data-table de Vuetify, exemple destiné au [[https://vuetifyjs.com/en/components/data-tables#crud-actions|CRUD]], pour obtenir le résultat suivant : | ||
