我有一个对数据库执行 CRUD 操作的 WidgetController.js
文件。这个 Controller 有一个 * 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
可以做我想做的事。怎么会这样?
最佳答案
您不能从客户端导入或访问服务器端的 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
关于javascript - 如何从使用 Adonis Controller 的路由在 Vue 组件中发出 axios 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45131896/