vue应用程序在里面:C:\xampp\htdocs\booking

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

仅供参考:vue应用程序正在100上运行

如果文件夹 struct 如上图所示,那么应用程序运行良好,我可以这样调用api,

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

但我想在booking文件夹中放入booking-api文件夹.如果我放置它并调用下面的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

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

推荐答案

好吧,我猜你在项目中使用了vue.js个网页包构建.

  1. 使用npm run dev为您的vue.js projet服务
  2. 对于npm run dev,vue的默认服务器是localhost:8080

现在是api部分

  1. 不管你把它放在哪里.按照正常程序安装laravel;用php artisan serve上菜.

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

在这里发布时,您应该注意跨来源资源共享,如果删除现有组件,可能会出现csrf问题.

Vue.js相关问答推荐

Nuxt.js i18n不提供默认区域设置中的页面而不重定向

可组合数据获取示例

已分配计算(computed)属性,但它没有设置器

vue 模板中无法识别 pug 语言

Vue:根元素内容和内容分发槽

使用 Laravel 作为后端刷新 Vue.js SPA 的身份验证令牌

VueJS中的绑定函数含义

如何渲染数组以 Select 选项 vue.js

Vuetify Datatable - 在所有列上启用内容编辑

Object.assign 没有正确复制

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径?

Vuex - 如何跨不同选项卡持久存储更新?

单击复选框后,V-model 未更新

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

如何在 VUE 应用中使用 sass?

取消选中单选按钮

[Vue 警告]:无效的props:propsscrollThreshold的类型判断失败.期望的数字,得到字符串

Vuetify Jest 未知自定义元素

使密码字符隐藏在 Vuetify 字段中

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误