Vue.js中的Laravel類訪問

Question

我有以下類，我定義了我的最小/最大長度值：

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是一個前端框架並在客戶端加載，因此無法使用上述服務器端類來保持最大最大數量集中。

請建議如何擺脫這個問題。

Answer 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');

然后，您可以使用js變量MyUserReqs在vue組件中定義它。

Answer 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 /模板一樣使用它

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

如果你想在腳本中訪問它：

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

在globalProps.maxlength之外，你可以簡單地將它稱為globalProps.maxlength

Answer 3

我會從前端獲取驗證邏輯，而是在后端處理它。 這樣，您只需在一個位置編寫驗證邏輯，前端將適當地處理響應。

Jeffery Way做了一個非常好的教程。 我建議遵循這個 - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19

Vue.js中的Laravel類訪問

問題描述

3 個解決方案

解決方案1
5 2018-09-21 00:27:25

解決方案2
2 2018-09-23 08:48:06

解決方案3
0 2018-09-24 14:27:33

Vue.js中的Laravel類訪問

問題描述

3 個解決方案

解決方案1 5 2018-09-21 00:27:25

解決方案2 2 2018-09-23 08:48:06

解決方案3 0 2018-09-24 14:27:33

解決方案1
5 2018-09-21 00:27:25

解決方案2
2 2018-09-23 08:48:06

解決方案3
0 2018-09-24 14:27:33