javascript - PHP - 使用 Slim 4 从 Vue 3 前端表单提交数据并将其保存到数据库

Question

我正在编写一个简单的应用程序，它将收集人们的 Instagram 图像链接，以将它们显示为主页上的特色。我已经成功设置了一个 vuejs 前端，我正在努力实现 instagram 链接提交表单。由于我想避免使用应用程序附带的无头 wordpress，我正在考虑使用 Slim 4 设置一些端点来保存和获取数据。问题是我不知道如何提供index.html运行我的 Vue SPA 的文件。

我的另一个选择是使用节点开发应用程序，但生产服务器不支持它，以避免将应用程序部署在没有包含数据库并且在 dyno 未运行时不会持久保存文件的 heroku 上，这是唯一的方法去是用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因为我知道与纤细路由没有冲突，对吗？

标签： javascriptphpvue.jsslim