如何在使用Adonis控制器的路由Vue组件中制作axios请求

问题描述：

我有一个在数据库上执行CRUD操作的WidgetController.js文件。该控制器具有一个* create (request, response)方法/生成器，该方法/生成器基本上返回包含窗口小部件属性的响应，并且还将一行添加到数据库widgets表中。路线定义为Route.any('widgets/create', 'WidgetController.create').as('widgets.create').middleware('auth');。我想create通过对前端的按钮的点击触发的，我试过在Vue公司正常进口：如何在使用Adonis控制器的路由Vue组件中制作axios请求

<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可能可以做我想做的事。怎么会这样？

答

您不能从客户端导入或访问服务器端的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

如何在使用Adonis控制器的路由Vue组件中制作axios请求

相关推荐