Comment faire une requête axios dans un composant Vue à partir d'une route créée à l'aide d'un contrôleur Adonis

Question

J'ai un fichier WidgetController.js qui effectue des opérations CRUD sur la base de données. Ce contrôleur a une méthode/générateur * create (request, response) qui renvoie essentiellement une réponse contenant les attributs du widget et ajoute également une ligne à la table widgets de la base de données. L'itinéraire est défini comme Route.any('widgets/create', 'WidgetController.create').as('widgets.create').middleware('auth');. Je veux create être déclenché par un clic d'un bouton sur le frontend, et j'ai essayé l'importation normale Vue:

<template> 
    <div> 
     <button @click="createWidget">Click me</button> 
    </div> 
</template> 
<style></style> 
<script type="text/javascript"> 
    import WidgetController from '/path/to/WidgetController.js'; 
    export default{ 
     name: 'widget', 
     data() { 
      return{ 
       WidgetCtrl: WidgetController     
      } 
     }, 
     methods: { 
      createWidget() { 
       return this.WidgetCtrl.create(); 
      } 
     } 
    } 
</script> 

mais il ne fonctionne pas probablement à cause des dépendances et des fonctions qui sont exclusifs à Adonis et non défini dans Vue. J'ai appris que axios peut être en mesure de faire ce que je veux. Comment?

Answer 1

Vous ne pouvez pas importer ou accéder au fichier js côté serveur côté client. Lorsque vous essayez d'importer WidgetController.js d'adonis à partir de vue.js

Vous devez faire une requête HTTP dans la fonction 'createWidget' et pointez la sur la méthode WidgetController.create.

fichier des composants de Vue:

<template> 
    <div> 
     <button @click="createWidget">Click me</button> 
    </div> 
</template> 

<script type="text/javascript"> 

    export default{ 
     name: 'widget', 
     data() { 
      return{ 
       WidgetCtrl: WidgetController     
      } 
     }, 
     methods: { 
      createWidget() { 
       axios.get('/url-point-to-WidgetController.create') 
        .then(response => { 
         // do other stuff 
         }); 
      } 
     } 
    } 
</script> 

WidgetController.js de Adonis:

'use strict' 

class WidgetController { 

    * create(request, response) { 
     // save widget... 
    } 

} 

module.exports = WidgetController