[英]Laravel class access in Vue.js
我有以下类,我定义了我的最小/最大长度值:
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是一个前端框架并在客户端加载,因此无法使用上述服务器端类来保持最大最大数量集中。
请建议如何摆脱这个问题。
将您的用户配置放在/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组件中定义它。
您可以设置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
我会从前端获取验证逻辑,而是在后端处理它。 这样,您只需在一个位置编写验证逻辑,前端将适当地处理响应。
Jeffery Way做了一个非常好的教程。 我建议遵循这个 - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.