Adonisコントローラを使用して作成されたルートからVueコンポーネントでaxios要求を行う方法

Question

データベースでCRUD操作を実行するファイルWidgetController.jsがあります。このコントローラーにはメソッド/ジェネレーター* create (request, response)があります。これは基本的にウィジェット属性を含む応答を返し、データベースwidgetsテーブルに行を追加します。経路はRoute.any('widgets/create', 'WidgetController.create').as('widgets.create').middleware('auth');と定義されています。私はcreateは、フロントエンド上のボタンのクリックによってトリガーされるようにしたい、と私は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> 

を、それが原因アドニスに排他的であり、依存関係および機能のおそらく動作しませんし、 Vueでは定義されていません。私はaxiosが私が望むことをすることができるかもしれないことを学んだ。どうして？

Answer 1

クライアント側からサーバー側のjsファイルをインポートまたはアクセスすることはできません。 adenisのWidgetController.jsをvue.jsからインポートしようとしているときに

あなたは 'createWidget'関数でHTTPリクエストを行い、それをWidgetController.createメソッドに向けます。

の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：

'use strict' 

class WidgetController { 

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

} 

module.exports = WidgetController