首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Laravel Vue POST到api使用web路由而不是api路由

Laravel是一种流行的PHP开发框架,而Vue是一种流行的JavaScript前端框架。在Laravel中,可以使用Vue来构建交互式的前端界面。当我们需要将数据通过POST请求发送到后端API时,通常会使用API路由来处理这些请求。然而,有时候我们希望使用Web路由来处理这些请求,而不是API路由。

使用Web路由而不是API路由的主要区别在于路由的命名和响应的方式。在Web路由中,我们可以为每个路由指定一个名称,以便在视图中使用。而在API路由中,通常不需要为路由指定名称。

另外,使用Web路由时,响应的方式也有所不同。在API路由中,通常会返回JSON格式的数据作为响应。而在Web路由中,我们可以返回HTML视图作为响应,这样可以更好地控制页面的展示和交互。

对于这个问题,我们可以使用Laravel和Vue来实现POST请求到Web路由的功能。首先,我们需要在Laravel中定义一个Web路由,用于处理POST请求。可以使用以下代码来定义一个Web路由:

代码语言:txt
复制
Route::post('/api/post', 'PostController@store');

上述代码中,我们定义了一个POST请求的路由,路径为/api/post,并将其指向PostController控制器的store方法。

接下来,我们需要在Vue中发送POST请求到这个Web路由。可以使用以下代码来发送POST请求:

代码语言:txt
复制
axios.post('/api/post', {
  data: 'example data'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

上述代码中,我们使用axios库来发送POST请求到/api/post路径,并传递一个包含数据的对象作为请求体。在请求成功后,我们可以通过response.data来获取响应的数据。

关于推荐的腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供相关链接。但是,腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,你可以在腾讯云官方网站上找到相关产品和详细介绍。

总结起来,使用Laravel和Vue进行POST请求到Web路由可以通过定义一个Web路由来处理POST请求,并使用axios库在Vue中发送POST请求到该路由。这样可以实现前后端的数据交互和处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Http Server API路由请求web程序

引言 接上文,容器内web程序一般会绑定http://0.0.0.0:{某监听端口}或http://+:{某监听端口},以确保使用容器IP可以访问到web应用。...请求为什么会被路由监听http://+:80地址的web服务器?...程序启动后,根据监听地址UrlPrefix中的主机元素,会向系统组件Http Server API注册不同的路由桶,由Http Server API将接收的请求路由合适的web程序。...作为主机元素出现时, 这种类型的UrlPrefix将会匹配尚未与以上强通配符、显式或IP绑定的弱通配符匹配的任意主机名, 此主机元素可以用作默认的catch-all,也可以用于指定URL名称空间的较大部分,不必使用许多...app3 总结 HTTP Sever API 提供了将请求路由web程序的机制 应用程序监听地址UrlPrefix的主机元素决定了路由策略,其中+强通配符 表示忽略请求主机名和请求的方式,可以认为是囫囵吞枣的接收满足

84030

详解将数据从Laravel传送到vue的四种方式

在过去的两三年里,我一直在研究同时使用 VueLaravel 的项目,在每个项目开发的开始阶段,我必须问自己 “我将如何将数据从 Laravel 传递 Vue ?”。...直接回显数据对象或组件属性中 ? 赞成: 简单明了 反对: 必须与嵌入 Blade 模板中的 Vue 应用程序一起使用 可以说是将数据从 Laravel 应用程序移动到 Vue 前端的最简单方法。...如果您使用 VueLaravel 站点的页面或区域添加一些基本的交互,这应该不是问题,但是您很容易就会遇到将数据强制放入压缩脚本的困难。 ?...将 APILaravel 自身的 web 中间件和 CSRF 令牌一起使用 ?...同时,api 组只有一个基本的限制和一些绑定。如果您的目标只是通过一个基本的、轻量级的 api 将信息拉入 Vue ,而这个 api 不需要身份验证或 post 请求,那么您可以到此为止。

8K31

通过 Laravel 创建一个 Vue 单页面应用(一)

使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。...首先我们将注意力集中在编写每一个小的功能代码块上,然后在后续的教程中,我们再演示如何将 Laravel 作为 API构建一个完整的应用。...服务器端 我们使用带有 Vue SPA 的 Laravel 应用程序框架,可以很方便的在我们的应用程序中构建服务端 API。...watch 当我们在浏览器中输入对应 URL 时,将会看到如下页面: 下一步 我们已经建立起了一个使用 Laravel 作为 API 层的 Vue SPA 应用的骨架。...但这个应用仍有很多功能需要我们在后续的教程中来实现: 在前端定义一个 404 路由 使用路由参数 子路由 在组件中向 Laravel 发起一个 API 请求 可能还有很多,但我不准备全部列在这里...

4.2K20

通过 Laravel 创建一个 Vue 单页面应用(六)

提醒一下,本教程并不关注权限;我们使用内置的 Laravel users 表演示如何在 Vue 路由器项目的上下文中使用 CURD。...以下是迄今为止的系列概要: 第1部分 – 设置项目和 Vue 路由器 第2部分 – 在 Vue 路由器中加载异步数据 第3部分 – 在 Laravel 中创建真实的用户端 第4部分 – 编辑用户 第5部分...唯一的区别是用现有用户数据(包括用户id)填充表单,不是用空表单创建用户。 配置路由 接下来,我们需要配置 Vue 路由并链接到页面,以便可以导航用户创建页面。...create(data) { return client.post('users', data); }, // ... }; 表单将会通过发送一个 POST 请求 UsersController...原文地址:https://laravel-news.com/building-a-vue-spa-with-laravel-part-6 译文地址:https://learnku.com/laravel

3.8K20

Laravel系列7.4】安全相关

这就是系统为我们生成的界面,这个时候如果我们查看 route/web.php 的话,是看不到任何路由信息的,那么它的路由是在哪里定义的呢?...其实上面的 npm run dev 操作就是编译了 Laravel 框架自带的 Vue 框架,模板走的正是 Vue ,文件在 resource/js/Pages 中,在这里我们可以找到 Auth/Register.vue...不过,更多情况下其实我们还是宁愿自己使用 vue 脚手架去让前后端完全分离,所以这一块的功能,大家了解一下就好。接下来我们看看怎么自己实现这些注册登录操作,以接口形式。...(网页形式也是同理的) 自已实现的注册、登录 要自己实现登录注册其实非常简单,如果只是网页的登录,同样我们还是使用 Laravel 自带的那个 users 数据表,然后自定义几个路由和控制器。...api_token=xxxxx(POST也没问题) 在请求头中添加 Authorization ,内容格式为 Bearer XXXXX ,这里的 XXXXX 就是 token 的内容。

3.6K40

laravel5.5功能尝鲜

preset命令共有4种(none, bootstrap, vue, react),默认为vue。 执行以下命令可以将前端切换为react设置。...factory命令生成假数据 php artisan tinker factory('App\Post',5)->create(); 9 Blade if 自定义标签 Laravel 5.5 的时候针对在视图中使用很多的逻辑判断推出了...10 Markdown 邮件渲染 邮件的 Markdown 写法其实在 Laravel 5.4 的时候就已经支持了,但是对于邮件测试来说,这样的渲染结果其实不是很方便,所以在 Laravel 5.5 的时候...; 11 Route::view 路由注册 Laravel 5.5 引进了一个新的路由注册方法:Route::view,这个主要的应用场景就是在我们站点某些页面是不需要数据操作,只是返回一个静态的视图文件的时候就可以直接这样用上...Resource Laravel 5.5 引入了新的 API 支持:Api Resource ,这对于我们使用 Laravel 开发 API 应用的使用非常有用,我们可以快速方便的自定义 API 数据的各种格式和返回的字段等

3K40

Laravel 路由使用入门

而我们的 Laravel 从入门精通系列教程之旅也将从路由开始,在这篇真正意义上的开篇教程中,我们将学习如何定义路由,然后将其指向要执行的代码,并处理各种路由需求。...1、路由入门 在 Laravel 应用中,定义路由有两个入口,一个是 routes/web.php,用于处理终端用户通过 Web 浏览器直接访问的请求,另一个是 routes/api.php,用于处理其他接入方的...在本章中,我们将主要聚焦于 routes/web.php,关于 routes/api.php 将会在后面编写 API 章节中重点介绍。...这就是一个最简单的 Laravel 路由定义,但是涵盖了一个 Web 框架的基本功能:处理请求,返回响应。...::match(['get', 'post'], '/', function () {}); 3、复杂业务逻辑处理 当然,传递闭包并不是定义路由的唯一方式,闭包简单快捷,但是随着应用体量的增长,将日趋复杂的业务逻辑全部放到路由文件中显然是不合适的

2.6K50

为什么 Laravel 这么优秀?

Introduction Laravel # Laravel 的定位是一个全栈 WEB 框架,它提供了 WEB 开发的全套组件;如路由、中间件、MVC、ORM、Testing 等。...API通过这些 API 我们就能轻松的注册一个符合行业标准的 RSETful 风格的路由,如我们为我们课程注册的路由: Route::apiResource('courses', CourseController...::class); Laravel 会自动帮我们注册 5 条路由如下所示,包括用于新增操作的 POST 请求,用于删除的 DELETE 请求等: file Laravel 路由虽然是非常优秀的设计,...这些组件都用一个共通的设计:即开发者只需要面对一套高度抽象的 API 不用关心具体的实现。...本来我们只需要熟悉标准的 Vue/React API 就好了,现在却不得不学习一种新的语法,而这些语法是构建在我们熟悉的 API 之上的;有时候你原始的 API 你知道怎么写,但是新框架的新语法让你不得不查看更多的文档甚至源码

15210

通过 Laravel 创建一个 Vue 单页面应用(五)

你也可以使用诸如 portal-vue 之类的插件或者布局中的一个组件来临时闪烁消息(或者在消息弹出后,使用强制关闭按钮关闭),显示一个操作是否已经成功(或者失败),从而向用户提供反馈。...使用服务端的 Laravel 应用,我们可以很容易地从 ModelNotFoundException 渲染一个 404.blade.php 。不过SPA有些不同。...我们将在 resources/assets/js/app.js 中Vue 路由的配置中添加一些新路由,这些路由提供一个专门的404视图和一个可以将所有无法匹配的路由重定向404路由的万能路由: { path...*'); 如果你数入一个无效的 URL 比如 /does-not-exist,你会看到像下面的一堆东西: Vue路由器触发了会将浏览器重定向 /404 的通配符路由规则。...$router.push({ name: '404' }); }); } 现在,如果您直接向 /users/2000/edit 这样的 URI 发出请求,你应该会看到应用重定向404页面,不是挂在

4.4K20

为任意后端构建单页应用,这个开源项目有点牛逼!

大家好,我是「前端实验室」爱分享的了不起~ 单页Web应用(single page web application,SPA):SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的...我们通常使用Laravel,Ruby on Rails或Django等框架构建服务器端渲染的应用程序,通过创建控制器,从数据库中获取数据(通过ORM),并呈现视图。...使用Inertia 也可以像使用所选的服务器端 Web 框架一样构建应用程序,使用框架的闲鱼功能进行路由、控制器、身份验证等。...下面我们就简单介绍了解下Inertia.js Inertia.js Inertia 允许创建完全客户端呈现的单页应用程序,没有现代 SPA 带来的复杂性。...Inertia 没有客户端路由,也不需要 API。像往常一样简单地构建控制器和页面视图! Inertia 不是框架,也不是现有服务器端或客户端框架的替代品。相反,它旨在与他们合作。

32510

结合 Bootstrap + Vue 组件实现 Laravel 异步分页功能

关于如何使用 Laravel 自带的分页功能进行分页,可以参考官方文档中的分页章节,说的非常清楚,在这篇教程中我们就不再一一演示了,不过 Laravel 自带的分页器实现的分页链接是动态 URL,不利于...定义后端 API 接口 由于我们要实现的是基于 Vue 的异步分页组件,所以我们需要在后端定义好分页数据获取 API 接口。...然后,我们在 routes/api.php 中定义一个指向该控制器方法的 API 路由: Route::get('/posts/fetch', 'PostController@fetch'); 这样,...这样,后端接口和路由都已经准备好了,接下来我们前端编写视图文件和 Vue 组件。...目前,我们在视图文件中没有编写任何可视化的代码,所有文章渲染和分页链接功能都将集成 Vue 组件中完成,接下来,就让我们来编写这个 Vue 组件。

7.3K20

通过 Laravel 创建一个 Vue 单页面应用(二)

在这个教程中,我们通过学习怎样从 Vue 组件中的 Laravel API 加载异步数据,来继续在 Laravel 中创建一个 Vue 单页应用(SPA)。...API 路由 Vue 单页应用是无状态的,这就要求我们发起 API 请求 Laravel 路由的时候,需要通过定义在 routes/api.php 中的路由。...API 路由没有使用 session 状态,表示应用在后端是真的没有状态。...在 第三部分 我们尝试在 Vue Router 中使用一个回调来获取数,在导航组件之前,让你看看如何在渲染 router view 之前获取数据。...我们也会转换 API 为从已经初始化的数据库表获取数据,因此我们可以通过设置路由参数来导航一个具体的用户。 现在,来看看通过 Laravel 创建一个 Vue 单页面应用的 第三部分 !

3.3K30

Laravel 7 新特性-路由的趟坑之路(自定义键名以及作用域)

Laravel 7 开始新增了一些新特性,今天我们来讲解下 路由绑定的新用法,自定义键名(slug)以及作用域(范围限定) 首先我们 安装最新版本的 Laravel ,并且创建两张数据表。.../ui npm install && npm run dev 我们使用内置服务,来启动一个 web server php artisan serve 生成用户填充数据 首先修改 .env 文件。...假如我们查找文章 id 为 1,同时 他的 user_id 是 2, 那么访问的路由就是 http://laravel7.test/api/users/2/posts/1 ?...http://laravel7.test/api/users/2/posts/2 然而实际情况确 并非如此。数据也是返回来了。 ? 文档上就是这样呀?就是改变路由文件而已,照着做了,发现并不可以。...$post; }); 那么 路由就得换成如下的方式: http://laravel7.test/api/users/2/posts/et-saepe-enim-minus-et 这下终于可以了,终于实现我们想要的效果了

2.4K10

使用 Laravel 5.5+ 更好的来实现 404 响应

laravel 5.5.10 中,我们有一个新的 Route::fallback() 方法,用于定义当没有其他路由与请求匹配时 Laravel 回退的路由。... @stop 当 Laravel 渲染这个回退(fallback)路由时,会运行所有的中间件,因此当你在 web.php 路由文件中定义了回退路由时,所有处在 web 中间件组的中间件都会被执行...,你可以 api 回退路由中定义 JSON 响应,让我们 api.php 路由文件中定义另外一个回退路由: Route::fallback(function() { return response...; }); 由于 api 中间件组带有 /api 前缀,所有带有 /api 前缀的未定义的路由,都会进入 api.php 路由文件中的回退路由不是 web.php 路由文件中所定义的那个。...视图文件,同样的 ModelNotFoundException 异常也会做同样的处理,那么我们应该如何如何处理才能在更好的渲染出回退路由的视图,不是一个普通的视图呢?

2.2K20

基于 Laravel + Vue 组件实现文件异步上传

定义文件上传路由 首先我们在 routes/web.php 中定义上传文件涉及路由: // 用于显式上传表单 Route::get('form', 'RequestController@formPage...,用于渲染用户上传表单页面,然后定义了一个 POST 路由 /form/file_upload,用于实现文件上传逻辑。...请求的时候(axios 是一个功能强大的基于 Promise 的 JavaScript HTTP 客户端,推荐使用它来替代传统的 ajax 或 XMLHttpRequest API 发送 HTTP 请求...然后在 resources/js/app.js 文件中将这个组件全局注册 Vue 实例: Vue.component('fileupload-component', require('..../components/FileUploadComponent.vue')); 注:如果是在 Laravel 5.8+ 中,需要这样注册:Vue.component('fileupload-component

2.5K20

Laravel学习笔记(二)—— 路由,请求接收与转发

前言 对于新手而言,你可能只需要会使用Laravel就行了,这也是我第一章没写Laravel生命周期的原因。...(~~其实目前我也不是蛮懂,我怕写了被打脸~~)不过,学到后面肯定是要把她(Laravel)摸透的,暂时先留个坑,学会了再来填坑。毕竟,在我写笔记的时候,我也是一个Laravel的新手、初学者。...路由文件—— routes文件夹 上篇文章我有提到routes文件夹里四个文件,web.php、api.php、 console.php 和 channels.php。...这些文件都是路由文件,唯一的区别是它们给不同的入口使用。我们初学者主要探讨的还是web.php的用法。 默认路由介绍 默认路由文件 <?...这就是默认的welcome视图,当我们部署好默认的Laravel项目后,打开浏览器后看到的是Laravel的默认welcome界面,就是web.php路由和welcome.blade.php视图文件起的作用

3K01

JSON Web Token(JWT)教程:一个基于Laravel和AngularJS的例子

同时,由于目前个人用的后台一直是java,前端也没用过AngularJS,vue也是最近才开始学,所以Laravel和AngularJS部分 并不十分了解,若有错误,欢迎及时提出。 ?...这使我们能够扩展我们的应用程序,不必担心用户登录的位置。我们可以轻松地使用相同的token从除了我们登录的域之外的域中获取安全资源。...如果我们使用负载均衡配置,我们可以将用户传递给任何服务器,不是仅被绑定在我们登陆的那台服务器上。...当我们向一个API 服务器( server),如 api.jwt.dev/v1/restricted发出POST请求时,我们正在进行跨域请求,并且必须在后端启用CORS。...如果不是这样,服务器将使用401未经授权的错误状态代码进行响应。 认证服务 Auth服务负责登录并向后端注册HTTP请求。

30.5K10
领券