Доступ к классу Laravel в Vue.js - PullRequest
Новая
       30

Доступ к классу Laravel в Vue.js

0 голосов
/ 18 сентября 2018

У меня есть следующий класс, в котором я определил свои значения минимальной / максимальной длины: 

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

Ниже приведено правило в классе запросов, в котором вместо жестких кодов используются значения min max. 

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, в котором я использовал тот же класс на стороне сервера. 

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

выпуск

Поскольку я пишу много кода, я начал использовать Vue.js, который уже встроен в Laravel.Здесь все прекрасно работает

, но, как мы знаем, vue.js является интерфейсной средой и загружается на стороне клиента, поэтому он не сможет использовать вышеупомянутые классы на стороне сервера для централизации минимальных чисел.

Пожалуйста, подскажите, как избавиться от этой проблемы.

Ответы [ 3 ]

0 голосов
/ 23 сентября 2018

Вы можете настроить свой шаблон 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

0 голосов
/ 24 сентября 2018

Я бы убрал логику проверки из внешнего интерфейса и вместо этого обработал бы это в бэкэнде.Таким образом, вам нужно всего лишь написать логику проверки в одном месте, и внешний интерфейс обработает ответ надлежащим образом.

Джеффри Уэй сделал действительно хороший урок по этому вопросу.Я бы порекомендовал следующее - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19

0 голосов
/ 21 сентября 2018

поместите ваши пользовательские конфигурации в файл /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.

...