web:framework:spring:td4

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:framework:spring:td4 [2023/03/07 02:01] – [Client/serveur REST] jcheronweb:framework:spring:td4 [2023/03/07 16:18] (Version actuelle) – jcheron
Ligne 6: Ligne 6:
  
 ==== Client/serveur REST ==== ==== Client/serveur REST ====
- 
-<html><div class="imageB"></html>{{:web:framework:spring:api-rest.png?900|}}<html></div></html> 
  
 ==== Rest controller ==== ==== Rest controller ====
Ligne 101: Ligne 99:
  
 ==== SPA VueJS ==== ==== SPA VueJS ====
 +
 +<html><div class="imageB"></html>{{:web:framework:spring:api-rest.png?900|}}<html></div></html>
 +
 === Intégration === === Intégration ===
  
Ligne 109: Ligne 110:
             <groupId>io.github.jeemv.springboot.vuejs</groupId>             <groupId>io.github.jeemv.springboot.vuejs</groupId>
             <artifactId>springboot-vuejs</artifactId>             <artifactId>springboot-vuejs</artifactId>
-            <version>1.1.7</version>+            <version>1.1.11</version>
         </dependency>         </dependency>
 </sxh> </sxh>
Ligne 133: Ligne 134:
 </sxh> </sxh>
  
 +Inégration de **vueJS** et **axios** dans **footer.html** :
 +<sxh html;title:templates/main/footer.html>
 +<script src="https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js"></script>
 +<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
 +</body>
 +</html>
 +</sxh>
 === Injection dans un contrôleur === === Injection dans un contrôleur ===
  
Ligne 168: Ligne 176:
     @GetMapping(path = ["/","","/index"])     @GetMapping(path = ["/","","/index"])
     fun index(): String {     fun index(): String {
-        vue.adddataRaw("masters", "[]")+        vue.addDataRaw("masters", "[]")
         vue.onMounted(         vue.onMounted(
                     Http.get("/masters",                     Http.get("/masters",
Ligne 267: Ligne 275:
 **Template HTML (basé sur le ui message de semantic) :** **Template HTML (basé sur le ui message de semantic) :**
  
-<sxh html;title:template/vueJS/AppMessage.html>+<sxh html;title:templates/vueJS/AppMessage.html>
 <div v-show="visible" :class="[error ? 'ui icon error message' : 'ui icon success message']"> <div v-show="visible" :class="[error ? 'ui icon error message' : 'ui icon success message']">
     <i :class="[error ? 'exclamation circle icon' : 'check circle icon']"></i>     <i :class="[error ? 'exclamation circle icon' : 'check circle icon']"></i>
Ligne 279: Ligne 287:
 </sxh> </sxh>
  
-**Création du composant global sur l'instance de Vue** :+**Création du composant global sur l'instance de Vue** dans le contrôleur :
  
-<sxh kotlin;title:SPAController:index>+<sxh kotlin;gutter:false>
 vue.addGlobalComponent("AppMessage").setProps("title","content","error","visible").setDefaultTemplateFile() vue.addGlobalComponent("AppMessage").setProps("title","content","error","visible").setDefaultTemplateFile()
 </sxh> </sxh>
  
 +**Exemple d'utilisation dans un template : **
 +
 +<sxh html;gutter:false>
 +<app-message title="Titre du message" content="Tout va bien !" :error="false" :visible="true"></app-message>
 +</sxh>
 +
 +Ajout de méthodes à l'instance de vue pour faciliter l'affichage des messages :
 +<sxh kotlin;title:SPAController>
 +vue.addDataRaw("message","{title:'',content:''}")
 +vue.addMethod("showMessage",
 +    "this.message={error: error,title: title, content: content, display: true};"+
 +    "setTimeout(function(){this.message.display=false;}.bind(this),5000);",
 +"title","content","error")
 +vue.addMethod("successMessage",
 +            "this.showMessage(title,content,false);",
 +            "title","content")
 +vue.addMethod("errorsMessage",
 +            "this.showMessage(title,content,true);",
 +            "title","content")
 +</sxh>
 +==== A faire ====
 +<WRAP TODO>
 +Implémenter le comportement de l'interface du TD précédent (Dogs ou Stories) dans le contrôleur Spring:
 +
 +</WRAP>
 +
 +=== Data ===
  
 +^Data ^Rôle ^Initial value ^
 +|**masters** | Liste des maîtres (Developers) | <nowiki>[]</nowiki> |
 +|**dogs** | Liste des chiens SPA (Stories sans dev) | loaded with repository |
 +|**master** | Le maître (dev) à ajouter | nouvelle instance |
 +|**masterId** | L'id de master sélectionné dans la liste d'affectation SPA | |
 +|**dogNames** | Liste des noms de chiens à adopter | [] |
 +|**dog** | Le chien à ajouter | nouvelle instance |
 +|**message** | Le message à afficher après une opération | nouvelle instance |
  
 +=== Methods ===
 +^Method ^Rôle ^Opérations ^
 +|**addMaster(master)** | Ajoute le maître passé en paramètre | <html><ul><li>Si formulaire ok, effectue un </html>''POST''<html> de master</li><li>Affiche un message en cas de succès</li></ul></html> |
 +|**remove(master)** | Supprime le maître passé en paramètre | ''DELETE'' vers **<nowiki>/masters/{id}</nowiki>** |
 +|**addDog(master,dogName,index)** | Le maître adopte un chien | ''POST'' une instance de dog vers **<nowiki>/dogs</nowiki>** |
 +|**giveup(master,dogName)** | Le maître Abandonne le chien dont le nom est passé en paramètre | ''PUT'' vers **<nowiki>/dogs/{id}</nowiki>** |
 +|**removeDog(dog)** | Supprime le chien SPA passé en paramètre | ''DELETE'' vers **<nowiki>/dogs/{id}</nowiki>** |
 +|**adopt(gog,masterId)** | Le chien est adopté par le maître dont l'id est passé en paramètre | ''PUT'' vers **<nowiki>/dogs/{id}</nowiki>** |
  
  • web/framework/spring/td4.1678150905.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron