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

【问题标题】：How do I make an axios request in a Vue component from a route made using an Adonis controller如何从使用 Adonis 控制器制作的路由在 Vue 组件中发出 axios 请求
【发布时间】：2017-12-21 06:17:57
【问题描述】：

我有一个在数据库上执行 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>

但它不起作用可能是因为依赖项和函数是 Adonis 独有的并且没有在 Vue 中定义。我了解到axios 可以做我想做的事。怎么样？

【问题讨论】：

标签： javascript vue.js axios vuex adonis.js

【解决方案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>

Adonis 的 WidgetController.js：

'use strict'

class WidgetController {

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

}

module.exports = WidgetController

【讨论】：