前端带有 VueJS 的应用程序的 Laravel Web 路由或 API 路由答案

【问题标题】：Laravel Web Route or API Routes for application with VueJS in front end前端带有 VueJS 的应用程序的 Laravel Web 路由或 API 路由
【发布时间】：2019-02-15 08:51:47
【问题描述】：

我们目前正在开发一个使用 VueJS 作为前端 javascript 框架、Element.io 作为 CSS 框架的多页应用程序。

我们没有公开任何网络服务或某种形式。

我们的应用程序具有响应性 - 用户可以使用桌面和移动设备创建记录。

我需要创建 API 路由还是 WEB 路由就足够了？您能想到我需要 API 路由的任何场景吗？

【问题讨论】：

例如，对于身份验证，您应该提供 API...
巴特等路由可以是WEB路由吗？所以创建一个 VUEJS 应用程序不需要我创建 API 路由，这样对吗？
除非需要用户身份验证，否则您只能使用网络路由。然而，一般来说，通过 API 访问 ajax 调用总是更好，因为你有一个用于创建移动应用程序的后端，它可以与你的服务器交互。 @emotatilitys 的回答更清楚地说明了这一点......
所以一般规则应该是使用 WEB.routes 来处理带有 html 代码的完整网页和 API.routes 来生成 JSON 响应的操作......

标签： laravel vue.js element

【解决方案1】：

Web 路由用于前端视图，其中 API 路由用于 API 调用，您肯定需要将它们分开，因为您的 VueJS 将使用 JSON 调用您的 API 并获得 JSON 响应以返回错误代码以处理您的错误有效率的。

网络控制器：

return view('blade_file')->with(compact('var1', 'var2'));

如果您在此处设置错误代码，它将显示该错误代码的刀片文件，例如。 404 将在 ./resources/views/errors/404.blade.php 处向您显示刀片视图文件，但您的应用程序将期望 JSON 响应而不是 HTML 响应。

API 控制器：

return response()->json(compact('var1', 'var2'), 200); // success

return response()->json(['error' => 'bad request'], 400); // bad request

如果您在此处设置错误代码，您仍然会收到 JSON 响应，只是指定了错误代码。

结论：

使用 API 和 Web 路由将前端和后端分开，因为请求/响应的处理方式不同。

注意事项：

向此 API 发出 ajax/axios 请求时，请记住 add your CSRF token in your header。
确保您的中间件是api。如果 API 只允许经过身份验证的用户，则需要中间件为 auth:api，并且需要使用 Laravel Passport。
记得将Api 的命名空间添加到您的API 路由中，在routes/api.php 文件或app/Providers/RouteServiceProvider.php 中。

【讨论】：