提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我是Laravel 5和angularjs的新手。 我正在一个项目中,该项目使用laravel 5作为后端,并使用angularjs作为前端。 我将laravel 5用于RESTful API路由,这些路由可通过angularjs前端访问。
我已经找到了一种解决方案,用于捕获laravel 5表单验证错误并将其显示在angularjs前端中,如下所示。
我的问题是:这是可接受的工作方式吗? 还是有更好的方法来实现这一目标?
我的代码:
在Laravel 5中 :1.我正在通过专用的请求类进行表单验证。 例如,对于创建页面表单,我在app\\requests
文件夹中有一个PageRequest类,其代码如下:
class PageRequest extends Request {
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
//any authorized user validations here..
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'menuName' => 'required | min:5 | max:50',
'position' => 'required',
'visible' => 'required'
];
}
}
2.接下来,在我的PagesController中,该页面提供了RESTful api的方法,例如create page表单将发回到PagesController
的store
方法,如下所示:
class PagesController extends BaseController{
/**
* Store a newly created resource in storage.
*
* @param PageRequest $request
* @return Response
*/
public function store(PageRequest $request)
{
$request['slug'] =$request['menuName'];
return $this->page->create($request->all()) ? json_encode(['success'=>'true']) : json_encode($request->messages());
}
}
3.然后在我的angular content.js文件中,该文件使用控制器定义了ui路由器状态,我有以下代码片段来处理创建页面:
.state('content.subjects.pages.create',{
url:'/create',
views:{
'forms@content.subjects':{
templateUrl:'/partials/create-page.html',
controller:['$scope', '$stateParams','$state', 'Subject', 'Page',
function($scope, $stateParams, $state, Subject, Page){
$scope.subject = {};
$scope.pages={};
$scope.messages={}; //place holder for the error messages
Subject.edit($stateParams.subjectSlug).success(function(data){
$scope.subject = data;
});
Subject.pages($stateParams.subjectSlug).success(function(data){
$scope.pages = data;
});
$scope.subject_id = $scope.subject.id;
$scope.submitPage = function(){
$scope.pageData['subject_id'] = $scope.subject.id;
Page.save($scope.pageData).success(function(data){
$scope.pages.push($scope.pageData);
$state.go('content.subjects.pages', {subjectSlug:$scope.subject.slug});
}).error(function(data){
//if the validation in laravel fails it will return the $request->messages as json
// we assign it to the $scope.messages object
$scope.messages = data;
});
};
}]
}
}
})
4.最后,在create-pages.html部分中,我可以将$ scope.messages引用为:
<div class="row page create-form" >
<!--<div id="messages" ng-show="message">{{ message }}</div>-->
<form class="form-horizontal create page" role="form" data-ng-submit="submitPage()">
<h4 class="form-title">Create New Page</h4>
<div class="form-group menuName">
<div class="input-group has-feedback" data-ng-class="{'has-error':errorMenuName}">
<span class="input-group-addon">Page Name</span>
<input type="text" class="form-control menuName" name="menuName" data-ng-model="pageData.menuName"/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<span class="text-danger">{{messages['menuName']}}</span>
</div>
<div class="form-group position">
<div class="input-group has-feedback" data-ng-class="{'has-error':errorPosition}">
<span class="input-group-addon">Position</span>
<input type="text" class="form-control position" name="position" data-ng-model="pageData.position"/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback">}</span>
</div>
<span class="text-danger">{{messages['position'][0]}}</span>
</div>
<div class="form-group visible">
<div class="input-group has-feedback" data-ng-class="{'has-error':errorVisible}">
<span class="input-group-addon">Published</span>
<input type="text" class="form-control visible" name="visible" data-ng-model="pageData.visible"/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<span class="text-danger">{{messages['visible'][0]}}</span>
</div>
<div class="form-group layout">
<div class="input-group hidden has-feedback" data-ng-class="{'has-error':errorLayout}">
<span class="input-group-addon">Page Layout</span>
<input type="text" class="form-control layout" name="layout" data-ng-model="pageData.layout"/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group form-action create">
<div class="btn-container create">
<button class="btn btn-formIcon" type="submit"><span class="glyphicon glyphicon-plus"> Create</span></button>
</div>
</div>
</form>
有更好的方法吗?
任何有关更好方法的建议将不胜感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.