Question

我有一个WidgetController.js文件，可以对数据库执行CRUD操作。此控制器具有* 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可以做我想做的事。怎么样？

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>

Adonis的WidgetController.js：

'use strict'

class WidgetController {

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

}

module.exports = WidgetController

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

1 个答案: