如何在使用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文件。 正如您試圖從vue.js導入adonis的WidgetController.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