Javascript 如何从使用Adonis控制器生成的路由在Vue组件中发出axios请求

我有一个

WidgetController.js

文件，它对数据库执行CRUD操作。该控制器有一个

*create（request，response）

方法/生成器，它基本上返回一个包含小部件属性的响应，并向数据库

小部件
表中添加一行。路由定义为
route.any（'widgets/create'，'WidgetController.create'）。as（'widgets.create'）。中间件（'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>


点击我
从“/path/to/WidgetController.js”导入WidgetController；
导出默认值{
名称：'widget'，
数据（）{
返回{
WidgetCtrl:WidgetController
}
},
方法：{
createWidget（）{
返回这个.WidgetCtrl.create（）；
}
}
}

但它不起作用，可能是因为依赖项和函数是Adonis独有的，并且没有在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>

'use strict'

class WidgetController {

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

}

module.exports = WidgetController