이 튜토리얼은 Laravel 5.4를 기반으로 합니다.
시작하기 전에 먼저 Laravel을 설치했다고 가정합니다. Vue 소개는 공식 문서를 참조하세요. 위의 준비가 완료되면 개발을 시작할 수 있습니다. 이 튜토리얼에서는 기사 게시 페이지의 양식 확인을 시연합니다. 이 글은 Ajax 기반의 양식 제출 오류 확인 기능을 구현하기 위해 Laravel에서 Vue.js를 사용하는 방법을 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있으므로 모두에게 도움이 되기를 바랍니다.
먼저 Routes/web.php에 두 개의 라우팅 규칙을 추가합니다:
Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save');
그런 다음 프로젝트 루트 디렉터리에서 Artisan 명령을 실행하여 컨트롤러 PostController를 생성합니다:
php artisan make:controller PostController
생성된 컨트롤러에서 두 가지 새로운 방법 라우팅 요청을 처리하기 위해 추가되었습니다:
public function create() { return view('post.create'); } public function save(Request $request) { // 设置验证规则 $this->validate($request, [ 'title' => 'required', 'body' => 'required' ]); }
다음으로 기존 스타일과 페이지 레이아웃을 재사용하려면 먼저 다음 Artisan 명령을 실행해야 합니다.
php artisan make:auth
이렇게 하면 됩니다. Laravel에 포함된 인증 기능 페이지 레이아웃을 재사용하고 post/create.blade.php 뷰 파일을 생성하고 다음과 같이 파일 내용을 편집할 수 있습니다.
@extends('layouts.app') @section('content') <p class="container"> <!--创建成功显示消息--> <p class="alert alert-success" v-if="submitted"> 创建成功! </p> <!--页面提交之后阻止刷新--> <form @submit.prevent="createPost" method="POST"> <legend>创建文章</legend> <!--如果title字段验证失败则添加.has-error--> <p class="form-group" :class="{'has-error':errors.title}"> <label>文章标题</label> <input type="text" name="title" class="form-control" v-model="post.title" value="{{ old('title') }}"> <!--如果验证失败通过FormError组件显示错误信息--> <form-error v-if="errors.title" :errors="errors"> @{{errors.title.join(',')}} </form-error> </p> <!--如果body字段验证失败则添加.has-error--> <p class="form-group" :class="{'has-error':errors.body}"> <label>文章正文</label> <textarea name="body" class="form-control" rows="5" v-model="post.body">{{ old('body') }}</textarea> <!--如果验证失败通过FormError组件显示错误信息--> <form-error v-if="errors.body" :errors="errors"> @{{errors.body.join(',')}} </form-error> </p> <button type="submit" class="btn btn-primary">创建文章</button> </form> </p> @endsection
이 때 액세스 페이지 페이지는 비어 있기 때문에 Vue 관련 데이터 변수는 아직 정의되지 않았습니다. 여기에 코드가 있습니다:
var app = new Vue({ el: '#app', data: { post: { title: '', body: '' }, errors: [], submitted: false }, methods: { createPost: function () { var self = this; axios.post('/post/save', self.post).then(function(response) { // form submission successful, reset post data and set submitted to true self.post = { title: '', body: '', }; // clear previous form errors self.errors = ''; self.submitted = true; }).catch(function (error) { // form submission failed, pass form errors to errors array self.errors = error.response.data; }); } } });
실제로 Vue의 하위 구성 요소인 뷰 파일에서 양식 오류를 확인했습니다. 샘플 예제.vue, 이 샘플을 참조하여 새 FormError.vue를 작성할 수 있습니다.
<template> <span class="help-block"> <slot></slot> </span> </template> <script> export default { props: ['errors'] } </script>
여기서 상위 구성 요소의 데이터 오류를 하위 구성 요소에 전달하여 하위 구성 요소에 오류 정보를 표시합니다. 하위 컴포넌트 생성을 마친 후에는 위의 resources/assets/js/app.js에 꼭 소개해주세요:
Vue.component('form-error', require('./components/FormError.vue'));
이렇게 모든 코딩 작업이 완료되었으며, 다음을 실행합니다. js를 다시 컴파일하는 명령:
npm run dev
물론 개발 환경에서는 npm run watch
를 사용하는 것을 선호합니다. 이 명령은 프런트 엔드 리소스 파일의 변경 사항을 수신한 다음 각 수정 후 수동 컴파일을 피하기 위해 다시 컴파일합니다.
이렇게 하면 브라우저에서 게시물/작성 페이지를 방문하면 정상적으로 표시됩니다:
아무것도 채우지 않고 생성 버튼을 클릭하면 페이지에 오류 메시지가 표시됩니다:
해당 항목을 입력하면 해당 필드가 다시 제출되면 생성이 성공했다는 메시지가 표시됩니다.
이렇게 해서 Laravel에서 Vue 기반의 간단한 Ajax 양식 제출 확인 기능이 완성되었습니다. 개발 효율성이 크게 향상되었다고 생각합니다.
관련 권장사항:
Ajax 양식 비동기 업로드 파일 예제 코드에 대한 자세한 설명
Laravel에서 Vue.js를 사용하여 Ajax 양식 확인 구현 예
위 내용은 Laravel에서 Vue.js를 사용하여 Ajax 양식 제출 오류 확인 작업 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!