laravel5.4 프레임워크의 Vue.js는 Ajax 양식 제출 오류 확인을 구현합니다.

이 글의 내용은 laravel5.4 프레임워크에서 vue.js가 구현한 Ajax 양식 제출 오류 확인에 대해 공유하는 것입니다. 이는 특정 참조 가치가 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

시작하기 전에 먼저 Laravel을 설치했다고 가정합니다. Vue 소개는 공식 문서를 참조하세요.

위의 준비가 완료되면 개발을 시작할 수 있습니다. 이 튜토리얼에서는 기사 게시 페이지의 양식 확인을 시연합니다.

먼저 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

라라벨에 포함된 인증 기능 페이지 레이아웃을 재사용할 수 있도록 post/create.blade.php 뷰 파일을 생성하고 파일 내용을 다음과 같이 편집하세요:

@extends('layouts.app')
@section('content')
    <div class="container">
        <!--创建成功显示消息-->
        <div class="alert alert-success" v-if="submitted">
            创建成功!
        </div>
        <!--页面提交之后阻止刷新-->
        <form @submit.prevent="createPost" method="POST">
            <legend>创建文章</legend>
            <!--如果title字段验证失败则添加.has-error-->
            <div class="form-group" :class="{&#39;has-error&#39;:errors.title}">
                <label>文章标题</label>
                <input type="text" name="title" class="form-control" v-model="post.title" value="{{ old(&#39;title&#39;) }}">
                <!--如果验证失败通过FormError组件显示错误信息-->
                <form-error v-if="errors.title" :errors="errors">
                    @{{errors.title.join(&#39;,&#39;)}}
                </form-error>
            </div>
            <!--如果body字段验证失败则添加.has-error-->
            <div class="form-group" :class="{&#39;has-error&#39;:errors.body}">
                <label>文章正文</label>
                <textarea name="body" class="form-control" rows="5" v-model="post.body">{{ old(&#39;body&#39;) }}</textarea>
                <!--如果验证失败通过FormError组件显示错误信息-->
                <form-error v-if="errors.body" :errors="errors">
                    @{{errors.body.join(&#39;,&#39;)}}
                </form-error>
            </div>
            <button type="submit" class="btn btn-primary">创建文章</button>
        </form>
    </div>
@endsection

현재 Vue 관련 데이터 변수를 정의하지 않았기 때문에 액세스 페이지가 비어 있습니다. 레이아웃 보기는 app.js를 참조하며 이 js는 resources/assets/에서 제공됩니다. Node.js /app.js가 컴파일되었으므로 여기서 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의 하위 구성 요소인 뷰 파일에서도 form-error를 확인했습니다. 이 새 구성 요소 파일은 resources/assets/js/comComponents 디렉터리에 생성될 수 있습니다. 이 디렉터리에 샘플 example.vue가 제공됩니다. 이 예제를 참조하여 새 FormError.vue를 작성할 수 있습니다.

<template>
    <span class="help-block">
        <slot></slot>
    </span>
</template>
<script>
    export default {
        props: [&#39;errors&#39;]
    }
</script>

# 🎜🎜#여기서는 오류 정보가 하위 구성 요소에 표시될 수 있도록 상위 구성 요소의 데이터 오류를 하위 구성 요소에 전달합니다. 하위 구성 요소 생성을 마친 후에는 위의 resources/assets/js/app.js에 이를 도입하는 것을 잊지 마세요:

Vue.component('form-error', require('./components/FormError.vue'));

이렇게 하면 모든 코딩 작업이 완료되었으며, 다음 명령을 실행하여 js를 다시 컴파일하세요. ：

npm run dev

물론 개발 환경에서는 npm run watch를 사용하는 것이 좋습니다. 이 명령은 프런트 엔드 리소스 파일의 변경 사항을 수신한 다음 다시 컴파일합니다. 각 수정 후에는 수동으로 컴파일하지 마세요.

이렇게 하면 브라우저에서 게시물/작성 페이지에 접속하면 정상적으로 표시됩니다:

아무것도 입력하지 않고 만들기 버튼을 클릭하면 페이지에 오류 메시지가 표시됩니다:

해당 필드를 입력한 후 제출하면 생성이 성공했다는 메시지를 표시합니다.

이렇게 해서 Laravel에서 Vue를 기반으로 한 간단한 Ajax 양식 제출 확인 기능이 완성되었습니다. 개인적으로 개발 효율성이 크게 향상되었다고 생각합니다

관련 권장 사항:

laravel의 새로운 고급 메시징 기능

ACL 사용자 인증 및 Laravel 5.1 프레임워크의 권한 확인 기능 실현 중

위 내용은 laravel5.4 프레임워크의 Vue.js는 Ajax 양식 제출 오류 확인을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!