如何解决PHP - 使用 Slim 4 从 Vue 3 前端表单提交数据并将其保存到数据库
我正在编写一个简单的应用程序,它将收集人们的 instagram 图片链接,以将它们显示在主页上。我已经成功设置了一个 vuejs 前端,我正在努力实现 Instagram 链接提交表单。由于我想避免使用随应用程序一起提供的无头 wordpress,我想使用 Slim 4 来设置一些端点来保存和获取数据。问题是我不知道如何提供运行我的 Vue SPA 的 index.html
文件。
我的另一个选择是使用 node 开发应用程序,但生产服务器不支持它,以避免将应用程序部署在没有包含数据库的 heroku 上,并且在 dyno 未运行时不会保留文件,唯一的方法是使用 PHP。
目前我的表单组件看起来像下面的代码,我已经创建了一个 axios 实例,但我还没有将 Slim 4 添加到项目中来管理请求。
<template>
<div class="container">
<div class="row m-0">
<div class="col-6 mx-auto">
<label>Instagram poto link</label>
<input type="text" placeholder="https://instagram.com/p/CM4VGOkDaZ/" v-model="igLink">
<a href="#" @click.prevent="submitPhotoLink()">SUBMIT</a>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Home',data() {
return { igLink: '' }
}
created() {},mounted() {},computed: {},methods: {
submitPhotoLink() {
axios({
method: 'POST',url: 'https://my-site.com/linkendpoint'
data: { iglink: this.igLink }
}).then( (res) => { console.log(res) });
}
}
}
</script>
谁能指出我正确的方向?在后端,为了连接数据并将数据保存到数据库中,我将使用 Redbean,因此目前我需要帮助来在达到纤薄前端控制器中的 index.html
路由时提供 /
文件。在 vue 应用程序中,视图是使用 vue-router
管理的,因为我知道这与精简路由没有冲突,对吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。