代码之家 › 专栏 › 技术社区 › Pankaj

Vue.js中的Laravel类访问

laravel-5.7 laravel-blade laravel-5.6 vue.js laravel

11

Pankaj · 技术社区 · 7 年前

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

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验证代码,我在其中使用了相同的服务器端类。

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

发行

由于我正在编写大量代码,所以我已经开始使用Vue.js,它已经嵌入到Laravel中。这里一切都很好

但是,正如我们所知,vue.js是一个前端框架,在客户端加载,因此无法使用上述服务器端类来集中最小和最大数量。

请建议如何解决这个问题。

3 回复 | 直到 7 年前

1

5

whmkr 7 年前

将您的用户配置放在/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文件中,那么您需要在blade模板(可能是布局)中定义一个js变量,如下所示

let MyUserReqs = @json('user');

然后可以使用js变量在vue组件中定义它 MyUserReqs .

2

Erubiel 7 年前

你可以设置 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){
        }
    },
}

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

3

0

George Hanson 7 年前

我会从前端去掉验证逻辑,而在后端处理这个问题。这样,您只需在一个地方编写验证逻辑,前端将适当地处理响应。

杰弗瑞·韦在这方面做了一个很好的指导。我建议你这样做- https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19