在Vue cli项目中,在哪里放置Laravel api app以及如何在vue js中调用api？

Question

vue app在里面: C:\xampp\htdocs\booking

Laravel api在里面: C:\xampp\htdocs\booking-api

仅供参考:vue app正在开发http:// localhost:8080

如果文件夹结构如上所述,那么app工作正常我可以像这样调用api,

axios.get('http://localhost/booking-api/public/Rooms').then((response)=>this.items = response.data);

但我想要booking-api文件夹内的booking文件夹.如果我放置它,如果我打电话给api如下,

axios.get('/booking-api/public/Rooms').then((response)=>this.items = response.data);

它不会工作,控制台窗口是这样的,

Request URL:http://localhost:8080/booking-api/public/Rooms
Request Method:GET
Status Code:404 Not Found

那么,我如何api在vueapp中放置项目以及如何从vue调用api.

Answer 1

好吧，我猜你vue.js在项目中使用了 webpack 构建。脚步。

1. 使用服务您的vue.js项目npm run dev
2. npm run devvue 的默认服务器是localhost:8080

现在你的 api 部分

1. 你把它放在哪里并不重要。按照正常程序进行安装laravel；使用 进行服务php artisan serve。它将在127.0.0.1或 上正常运行localhost:8000。

2. 让我们假设：示例组件上的脚本 axios.post('localhost:8000/api/postData',data).then((response) => {//do something here}

在这里发帖时，您应该注意跨源资源共享，或者如果删除现有组件，可能会出现 csrf 问题。