ฉันจะสร้างข้อผิดพลาดในการเข้าถึงและข้อความแสดงข้อผิดพลาดโดยปล่อยให้ผู้ใช้อยู่บนเพจได้อย่างไร

ในแอป laravel / jquery หากฉันต้องตรวจสอบว่าผู้ใช้เข้าสู่ระบบหรือไม่ ฉันจะทำในคอนโทรลเลอร์:

$loggedUser = Auth::user();
if ( empty($loggedUser->id) ) {
    return response()->json(['error_code'=> 1, 'message'=> "You must be logged!"],HTTP_RESPONSE_INTERNAL_SERVER_ERROR);
}

เนื่องจากฉันไม่จำเป็นต้องออกจากเพจ แต่จำกัดเฉพาะฟังก์ชันบางอย่างเท่านั้น ฉันจึงแสดงข้อความแสดงข้อผิดพลาดด้านบนโดยใช้ไลบรารี bootstrapGrowl ขณะนี้มี laravel 7 /livewire 1.3 / turbolinks:5 / อัลไพน์@v2 ฉันค้นหาว่าฉันจะสร้างข้อผิดพลาดและแสดงข้อความแสดงข้อผิดพลาดที่คล้ายกันได้อย่างไร โดยปล่อยให้ผู้ใช้อยู่ในหน้านั้น

อัปเดตแล้ว :

ให้ฉันอธิบายด้วยตัวอย่างโดยละเอียด: ในแอป laravel / jquery ที่ฉันมีในโค้ด JS:

var quiz_quality_radio= $('input[name=quiz_quality_radio]:checked').val()
var href = this_frontend_home_url + "/make-quiz-quality";
$.ajax( {
    type: "POST",
    dataType: "json",
    url: href,
    data: {"quiz_quality_id": quiz_quality_radio, "vote_id": this_vote_id, "_token": this_csrf_token},
    success: function( response )
    {
        $('input[name=quiz_quality_radio]:checked').prop('checked', false);
        frontendVote.showQuizQualityResults()
        popupAlert("Thank you for rating ! Your rate was added!", 'success')
    },
    error: function( error )
    {
        $('input[name=quiz_quality_radio]:checked').prop('checked', false);
        popupAlert(error.responseJSON.message, 'danger') // 'info', 'success'
    }
});

และการกระทำสัมพันธ์ในการควบคุม :

public function make_quiz_quality(Request $request)
{
    $requestData     = $request->all();
    $quiz_quality_id = ! empty($requestData['quiz_quality_id']) ? $requestData['quiz_quality_id'] : '';
    $vote_id         = ! empty($requestData['vote_id']) ? $requestData['vote_id'] : '';

    if ( ! Auth::check()) {
        return response()->json(['message' => "To rate you must login to the system !"], HTTP_RESPONSE_BAD_REQUEST);
    }
    if (empty($quiz_quality_id)) {
        return response()->json([
            'message'         => "To rate you must select quiz quality !",
            'quiz_quality_id' => $quiz_quality_id
        ], HTTP_RESPONSE_OK);
    }

    $vote = Vote::find($vote_id);
    if ($vote === null) {
        return response()->json([ 'message' => "Vote Item # " . $vote_id . " not found !"],HTTP_RESPONSE_NOT_FOUND);
    }
    $loggedUser = Auth::user();

    $found_count = QuizQualityResult
        ::getByVoteIdAndUserId($vote_id, $loggedUser->id)
        ->count();
    if ($found_count > 0) {
        return response()->json(['message' => "You have already rated '" . $vote->name . "' # vote !", 'vote_id' => $vote_id],
            HTTP_RESPONSE_BAD_REQUEST);
    }

    $newVoteItemUsersResult = new QuizQualityResult();
    try {
        $newVoteItemUsersResult->quiz_quality_id = $quiz_quality_id;
        $newVoteItemUsersResult->vote_id         = $vote_id;
        $newVoteItemUsersResult->user_id         = $loggedUser->id;
        DB::beginTransaction();
        $newVoteItemUsersResult->save();

        DB::commit();
    } catch (Exception $e) {
        DB::rollBack();

        return response()->json(['message' => $e->getMessage(), 'voteCategory' => null], HTTP_RESPONSE_INTERNAL_SERVER_ERROR);
    }

    return response()->json(['message' => '', 'id' => $newVoteItemUsersResult->id], HTTP_RESPONSE_OK_RESOURCE_CREATED);
} //     public function make_quiz_quality(Request $request)

และในกรณีเกิดข้อผิดพลาดในบล็อกข้อผิดพลาด ฉันจะแสดงข้อความพร้อมฟังก์ชัน popupAlert (ใช้กับ bootstrapGrowl) โดยไม่ต้องออกจากหน้า นั่นคือสิ่งที่ฉันต้องการสร้างในแอป livewire / turbolinks / อัลไพน์ ฉันจะทำอย่างไร?

อัปเดต # 2:

นั่นเป็นเพียงรายการรายการที่ผู้ใช้สามารถลงคะแนนให้ได้:

<div class="table-responsive">
    <table class="table text-primary">
        @foreach($quizQualityOptions as $key=>$next_quiz_quality_option)
            <tr>
                <td>
                    <input class="" type="radio" name="quiz_quality_radio" id="quiz_quality_radio_{{ $next_quiz_quality_option }}" value="{{ $key }}">
                    <label class="col-form-label" for="quiz_quality_radio_{{ $next_quiz_quality_option }}">{{ $next_quiz_quality_option }}</label>
                </td>
            </tr>
        @endforeach
    </table>
</div>

<div class="row p-3">
    <a class="btn btn-primary a_link" onclick="javascript:frontendVote.MakeQuizQuality()">Rate !</a>
</div>

โดยมีข้อจำกัด 2 ประการ คือ

  1. ผู้ใช้จะต้องเข้าสู่ระบบ
  2. ผู้ใช้ที่เข้าสู่ระบบสามารถลงคะแนนได้เมื่อมีการสร้างข้อผิดพลาด 2 ข้อนี้ที่เซิร์ฟเวอร์เท่านั้น

อัปเดต # 3:

ฉันพบการตัดสินใจโดยใช้ axios เช่น:

    <button type="submit" class="btn btn-primary btn-sm m-2 ml-4 mr-4 action_link" @click.prevent="submitNewTodo()">
        Submit
    </button>



submitNewTodo() {
   console.log('submitNewTodo::')
    let is_insert= 1
    let current_toto_id= 1
    axios({
        method: (is_insert ? 'post' : 'patch'),
        url: '/api/todos' + (!is_insert ? "/" + current_toto_id : ''),
        data: {
            text : this.new_todo_text,
            priority : this.new_todo_priority
        },
    }).then((response) => {
        this.new_todo_text= ''
        this.new_todo_priority= ''
        this.loadTodosRows()
        popupAlert( 'Todo ' + (is_insert ? 'added' : 'updated') + ' successfully !', 'success' )
    }).catch((error) => {
        var validationErrors= convertObjectToArray(error.response.data.errors.text)
        
        this.validation_errors_text= ''
        validationErrors.map((next_error, index) => {
            if(next_error && typeof next_error[1] != "undefined" ) {
                this.validation_errors_text += '<li>'+next_error[1]+'</li>'
            }
        })

        popupErrorMessage(error.response.data.message)
    });

},

ด้วยมัน ฉันแสดงข้อความทั้งความสำเร็จและความล้มเหลวตามที่ฉันต้องการ แต่ฉันเห็นข้อเสียใหญ่กับมันเมื่อฉันใช้ livewire และฉันต้องการใช้ livewire ที่นี่ หากเป็นไปได้... หวังว่าฉันจะอธิบายสิ่งที่ฉันต้องการอย่างชัดเจน...

ขอบคุณ!


person Petro Gromovo    schedule 08.08.2020    source แหล่งที่มา
comment
โปรดดูที่ UPDATED \   -  person Petro Gromovo    schedule 13.08.2020
comment
คุณช่วยรวมโค้ดที่สร้างแบบฟอร์มที่มี input[name=quiz_quality_radio] ได้ไหม   -  person Hugo    schedule 18.08.2020
comment
ขออภัย ถ้าฉันยากจน ใส่สิ่งที่ฉันต้องการ นั่นคือตัวอย่างของแอป laravel / jquery ก่อนหน้าของฉัน ฉันต้องทำสิ่งที่คล้ายกันในแอป livewire / alphajs   -  person Petro Gromovo    schedule 18.08.2020
comment
แน่นอนว่า การทราบว่าแบบฟอร์มของคุณเป็นอย่างไรเพื่อแนะนำทางเลือกอื่นด้วย Alpine.js จะเป็นประโยชน์มาก   -  person Hugo    schedule 18.08.2020
comment
โปรดดูที่อัปเดต # 2   -  person Petro Gromovo    schedule 18.08.2020
comment
โปรดดูที่อัปเดต # 3   -  person Petro Gromovo    schedule 21.08.2020
comment
อ่า เยี่ยมมาก เมื่อฉันกำลังจะแนะนำโซลูชัน Alpine ที่คล้ายกัน ฉันไม่คุ้นเคยกับ Livewire มากนัก ดังนั้นจะไม่ช่วยอะไรได้มากในตอนนี้   -  person Hugo    schedule 21.08.2020
comment
คุณช่วยยกตัวอย่าง/ลิงค์ของโซลูชัน Alpine ที่คล้ายกันได้ไหม   -  person Petro Gromovo    schedule 21.08.2020
comment
เพิ่มคำตอบโดยใช้ Alpine.js + axios ตามโค้ดเริ่มต้นของคุณ มีตัวแปรบางตัวที่ฉันไม่แน่ใจว่าจะถูกกำหนดไว้ แต่ควรเป็นจุดเริ่มต้นที่ดี   -  person Hugo    schedule 21.08.2020


คำตอบ (1)


ด้วย Alpine.js และ axios คุณสามารถทำสิ่งนี้ได้ โปรดทราบว่าฉันไม่แน่ใจว่าจะกำหนด this_frontend_home_url, this_vote_id และ this_csrf_token หรือไม่

<div x-data="quiz()">
  <div>
    <div class="table-responsive">
      <table class="table text-primary">
        @foreach($quizQualityOptions as $key=>$next_quiz_quality_option)
        <tr>
          <td>
            <input x-model="selected_quiz" class="" type="radio" name="quiz_quality_radio"
              id="quiz_quality_radio_{{ $next_quiz_quality_option }}" value="{{ $key }}">
            <label class="col-form-label"
              for="quiz_quality_radio_{{ $next_quiz_quality_option }}">{{ $next_quiz_quality_option }}</label>
          </td>
        </tr>
        @endforeach
      </table>
    </div>

    <div class="row p-3">
      <a class="btn btn-primary a_link" @click="submitQuizQuality()">Rate !</a>
    </div>
  </div>
</div>
<script>
  function quiz() {
    return {
      selected_quiz: null,
      submitQuizQuality() {
        const url = this_frontend_home_url + "/make-quiz-quality";
        axios.post(url, {
          quiz_quality_id: this.selected_quiz,
          vote_id: this_vote_id, // no idea where this is coming from,
          _token: this_csrf_token // no idea where this is coming from
        }).then(() => {
          // reset "checked" state
          this.selected_quiz = null;
          frontendVote.showQuizQualityResults();
          popupAlert("Thank you for rating ! Your rate was added!", 'success');
        }).catch(error => {
          // reset "checked" state
          this.selected_quiz = null;
          if (error && error.response) {
            popupAlert(error.response.message, 'danger')
          }
        });
      }
    }
  }
</script>
person Hugo    schedule 21.08.2020
comment
ขอบคุณ! แต่ฉันชอบโซลูชัน laravel-Livewire ถ้ามี - person Petro Gromovo; 21.08.2020
comment
อย่างที่ฉันบอกไปแล้ว ฉันไม่คุ้นเคยกับ Livewire แต่ถึงอย่างนั้น ฉันเชื่อว่าสิ่งนี้จะได้ผล ดังนั้นจึงสมเหตุสมผลที่จะยอมรับมันหรือไม่ - person Hugo; 21.08.2020