Vue.js 中的 Laravel 类访问答案

【问题标题】：Laravel class access in Vue.jsVue.js 中的 Laravel 类访问
【发布时间】：2019-02-22 12:27:24
【问题描述】：

我在以下类中定义了我的最小/最大长度值：

class MinMaxValuesUser {
    const Min_UserName = 6;
    const Max_UserName = 30;
}

以下是请求类中使用最小最大值而不是硬编码的规则。

public function messages() {
    return [

        "Min_UserName.min" =>  trans("Profile.Min_UserName"),
        "Max_UserName.max" =>  trans("Profile.Max_UserName")
    ];
}

public function rules() {

    return [
        "UserName" =>  "min:" . MinMaxValuesUser::Min_UserName 
                          . "|max:" . MinMaxValuesUser::Max_UserName
    ];
}

以下是我使用相同服务器端类的 JQuery Validate 代码。

$('form#frmProfile').validate({
    rules: {
        UserName: {
            minlength: {!! \App\MinMaxValues\MinMaxValuesUser::Min_UserName !!},
            maxlength: {!! \App\MinMaxValues\MinMaxValuesUser::Max_UserName !!}
        }
    }
});

问题

由于我写了很多代码，所以我开始使用已经嵌入在 Laravel 中的 Vue.js。在这里一切都很好

但我们知道 vue.js 是一个前端框架并在客户端加载，因此将无法使用上述服务器端类来保持最小最大数量集中。

请建议如何摆脱这个问题。

【问题讨论】：

我们的 Vue 应用程序对 /api/config 进行 HTTP 调用，以获取在 Vuex 存储中操作所需的各种值。
你能告诉/api/config的位置以及vue.js存储在哪里吗？
我们创建了它。我们创建了一个 Laravel 路由，它输出一个 JSON 响应，包括我们希望 Vue 应用程序拥有的各种配置项。它不是内置的。
使用全局 JS 变量创建一个刀片文件，这些变量是类中的常量。您还可以使用中间件来知道将这些变量放在哪里。我没有，只是一个想法
@ceejayoz：你能分享任何示例代码吗？

标签： laravel vue.js laravel-5.6 laravel-blade laravel-5.7

【解决方案1】：

将您的用户配置放在这样的 /config/user.php 文件中

<?php

return [
  'Min_UserName' => 4,
  'Max_UserName' => 10
];

您现在可以像这样在 php 中的任何位置访问它

config('user.Min_userName'); // specific value
config('user'); // array of both values

你可以像这样把它放到你的视图文件中：

@json(config('user'))

如果您的视图组件是在刀片文件中定义的，您可以将其放入数据定义中：

'user_requirements': @json(config('user'))

如果您的 vue 组件被进一步隐藏在 js 文件中，那么您需要像这样在刀片模板（可能是您的布局）中定义一个 js 变量

let MyUserReqs = @json('user');

然后你可以在你的vue组件中使用js变量MyUserReqs来定义它。

【讨论】：

【解决方案2】：

您可以像这样设置app.blade.php 模板：

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Site Properties -->
    <title>{{ config('app.name') }}</title>

    <!-- Styles -->
    <link href="{{ asset('inside/css/app.css') }}" rel="stylesheet">

</head>
<body>

    <div id="app"></div>

    <!-- Scripts -->
    <script src="{{ asset('inside/js/app.js') }}"></script>

    <script type="text/javascript">
        const globalProps = {
            minlength: {!! \App\MinMaxValues\MinMaxValuesUser::Min_UserName !!},
            maxlength: {!! \App\MinMaxValues\MinMaxValuesUser::Max_UserName !!}
        }

        globalProps.install = function(){
          Object.defineProperty(Vue.prototype, '$globalProps', {
            get () { return globalProps }
          })
        }

        Vue.use(globalProps);
    </script>

</body>
</html>

我们定义一个常量，然后将该常量“安装/定义”为 vue.prototype 对象，然后我们告诉 vue 使用它。您也可以在任何刀片模板中进行设置...但如果您在应用程序的任何地方都需要它，您可以在此处进行设置。

然后你准备好了，在你的 vue 实例中你可以像这样将它用于 html/template

<div v-if="$globalProps.minlength == 6"></div>

如果你想在脚本中访问它：

methods: {
    someMethod() {
        if(this.$globalProps.maxlength == 6){
        }
    },
}

在 vue 之外，在 jquery 上，您可以将其简称为 globalProps.maxlength

【讨论】：

【解决方案3】：

我会将验证逻辑从前端拿走，而在后端处理。这样，您只需在一个地方编写验证逻辑，前端就会适当地处理响应。

Jeffery Way 在这方面做了一个非常好的教程。我建议遵循这个 - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19

【讨论】：