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

从Laravel向Vue传输数据的四种方法一直在做同时使用Vue和Laravel的项目，在每个项目开发之初，我都要问自己“我将如何将数据从Laravel传输到Vue？”。这适用于Vue前端组件与Blade模板紧密耦合的应用程序，以及完全独立于Laravel后端运行的单页应用程序。这里有四种不同的方法来从一个到另一个获取数据。直接回显到数据对象或组件属性优点：简单明了缺点：必须与嵌入在Blade模板中的Vue应用程序一起使用可以说是将数据从Laravel应用程序移动到Vue前端的最简单方法。使用上述任何一种方法，您都可以将JSON编码的数据回显给您的应用程序或其组件。然而，最大的缺点是可扩展性。您的JavaScript需要直接在模板文件中公开，以便引擎可以呈现您的数据。如果您使用Vue向Laravel站点的页面或区域添加一些基本的交互性，这应该不是问题，但是您很容易遇到将数据强制写入缩小脚本的困难。UsingthejsondirectiveforLaravel5.5+：使用自定义组件和Laravel自己的jsonblade指令可以让你轻松地将数据移动到props中。这种方法允许您划分Vue代码，将脚本与Webpack或Mix捆绑在一起，同时仍将数据直接注入其中。Injectpropertyasglobalwindow优点：在整个Vue应用程序和任何其他脚本中全局可用缺点：可能会造成混淆，通常不推荐用于大型数据集虽然这看起来很老套，但将数据添加到窗口对象可以轻松创建可以访问的全局变量来自应用程序中使用的任何其他脚本或组件。过去，我用它来存储和访问API基本URL、公钥、特定于模型的ID以及需要在整个前端使用的各种其他小数据项。但是，此方法有一个注意事项，即如何访问Vue组件的内部数据。在模板内部，您将无法使用以下内容，因为Vue假定您尝试访问的窗口对象位于同一组件内：//won'twork相反，您需要使用返回值的计算方法：//将起作用如果这个方法的用例是一个小的字符串或者值，并且使用Laravel自带的mix来编译，那么事情其实会变得很简单。您可以使用process.env对象在JavaScript中引用.env文件中的值。例如，如果我的环境变量文件中有API_DOMAIN=example.com，我可以在我的Vue组件（或使用mix编译的其他JavaScript）中使用process.env.API_DOMAIN。使用API与Laravel自己的web中间件和CSRF令牌优点：易于上手，非常适合单页应用程序缺点：需要前端由Blade模板渲染对我来说，解决方案是Vue前端+Laravel后端世界最简单的方法来获得开始了。Laravel提供了两种不同的路由文件：web.php和api.php。它们通过应用程序提供者目录中的RouteServiceProvider.php文件被引入和映射。默认情况下，web组的中间件设置为web，api组的中间件设置为api。追溯到app/Http/Kernel.php；您会注意到在第30行附近，两个组被映射到一个数组中，web组包含诸如会话、cookie加密和CSRF令牌身份验证之类的内容。同时，api组只有一个基本限制和一些绑定。如果您的目标只是通过不需要身份验证或发布请求的基本、轻量级API将信息拉入Vue，那么您可以到此为止。不然的话，一个修改就能保证秒级完全兼容Vue。回到上面的RouteServiceProvider，换掉web方法中的api中间件。我们为什么要做这个？这有什么作用吗？它允许我们通过api引入的路由也包含应用程序的正常网络路由通常使用的所有会话标量和令牌。在使用axios或其他异步JavaScripthttp调用时，我们可以在后端使用Auth::user()或其他认证技术，这是默认api无法做到的。这种方法的唯一警告是您必须使用Laravel和刀片模板来呈现前端。这样框架就可以将必要的会话令牌和变量注入到请求中。使用JWT身份验证的API调用优点：最安全和解耦的选项缺点：需要安装和配置第三方包JSONWebTokens是一种安全、易于使用的方法来锁定对API端点的访问并使用Tymon的jwt-authpackage，最重要的是，构建新项目或在现有Laravel应用程序中使用绝对是轻而易举的事。要在API上安装和配置此功能，只需几个简单的步骤：在您的应用程序根目录中运行composerrequiretymon/jwt-auth。在撰写本文时正处于过渡期，因此您可能需要指定一个版本（例如1.0.0-rc.5）。如果您使用的是Laravel5.4及以下版本，请将行Tymon\JWTAuth\Providers\LaravelServiceProvider::class添加到config/app.php中的提供程序数组。通过运行phpartisanvendor:publish选择jwt-auth包发布配置文件。运行phpartisanjwt:secret以生成签署应用程序令牌所需的秘密。完成后，您需要决定哪些路由将受JWT保护并针对JWT进行身份验证。您可以使用内置的apiauth中间件来执行此操作，或者您可以自己滚动以获取令牌作为请求的一部分。在API的登录方法中，您将使用与默认Laravel应用程序相同的auth()->attempt方法，除了从它返回的是您应该传回的JSONWebToken令牌。从那里，您的Vue应用程序应该存储该令牌（在LocalStorage或Vuex中），并在每个传出请求中，将其作为授权标头添加到Authorization标头中。回到你的Laravel应用程序，你可以使用它们的令牌来引用特定的用户请求。返回应该显示给他们的数据。