Laravel에서 Vue.js를 사용하여 Ajax 양식 제출 오류 확인 작업 구현

이 튜토리얼은 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="{&#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>
      </p>
      <!--如果body字段验证失败则添加.has-error-->
      <p 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>
      </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: [&#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 양식 제출 확인 기능이 완성되었습니다. 개발 효율성이 크게 향상되었다고 생각합니다.

관련 권장사항:

TP 프레임워크에서 ajax 양식 확인 방법 공유

Ajax 양식 비동기 업로드 파일 예제 코드에 대한 자세한 설명

Laravel에서 Vue.js를 사용하여 Ajax 양식 확인 구현 예

위 내용은 Laravel에서 Vue.js를 사용하여 Ajax 양식 제출 오류 확인 작업 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!