Laravel Like System с Vue JS - PullRequest
Новая
       10

Laravel Like System с Vue JS

0 голосов
/ 12 декабря 2018

Я создаю веб-сайт блога, который владелец веб-сайта имеет возможность создавать или писать блог или книгу.

Теперь мы сосредоточимся на написании книги.У меня все работает до сих пор.Она может сделать книгу и добавить к ней главы.Теперь она сказала, что читатели имеют возможность любить каждую главу.

то, что я сделал, выглядит следующим образом

ReadChapter.blade.php 

    <section id="main-content">
      <div class="chapter-container">
        <div class="chapter-title text-center">{{$the_chapter->title}}</div>
        <community-reaction :chapter_id="{{$the_chapter->id}}" :view_counts="{{$the_chapter->view_count}}" :user_id="{{Auth::user()->id}}"></community-reaction>
        <div class="chapter-body" oncopy="return false" onpaste="return false" oncut="return false">
          {!!$the_chapter->body!!}
        </div>
      </div>
    </section>

CommunityReactionComponent.vue 

<template>
  <div>
    <div class="community-chapter-reaction-section">
      <div><i class="fas fa-eye"></i> {{view_counts}}</div>
      <div style="cursor: pointer;" v-if="!loved_chapter"><i class="fas fa-heart" @click="loveChapter(chapter_id)"></i> {{love_count}}</div>
      <div style="cursor: pointer;" v-else><i class="fas fa-heart" style="color: red;" @click="unloveChapter(chapter_id)"></i> {{love_count}}</div>
      <div><i class="fas fa-comments"></i> 0</div>
    </div>
  </div>
</template>

    <script>
      export default {
          props: ['chapter_id', 'view_counts', 'user_id'],
          data() {
              return {
                  love_count: 0,
                  loved_chapter: false,
                  chapter_lovers_id: []
              }
           },
           methods: {
               loveChapter(id) {
                   axios.post('/love-chapter/', {chapter_id: id}).then(result => {
                       this.getChapterLoves();
                   });
               },
               unloveChapter(id) {
                   axios.post('/unlove-chapter/', {user_id: this.user_id, chapter_id: id}).then(result => {
                   this.getChapterLoves();
                   });
               },
               getChapterLoves() {
                   this.chapter_lovers_id = [];
                   axios.post('/get-chapter-love', {id: this.chapter_id}).then(result => {
                   this.love_count = result.data.length;
                   for(let i in result.data) {
                         
                       this.chapter_lovers_id.push(result.data[i].user_id);
                   }
                   let love_checker = this.chapter_lovers_id.includes(this.user_id);

                        if(love_checker == true) {
                            this.loved_chapter = true;
                        } else {
                            this.loved_chapter = false;
                        }
                   });
		    	}
	    	},
	    	created() {
	    		this.getChapterLoves();
		    }
	    }
    </script>

Любить или любить главу - все работает нормально.Все, что я должен спросить, это нормально?или есть эффективный способ сделать это?спасибо!

Также не думайте, почему я не сделал это целым компонентом Vue.Я просто хочу освежить свой навык Laravel, так как большая часть моей работы - это чистый Vue JS с Laravel Backend.Этот проект предназначен для обновления моих знаний о Laravel и изучения чего-то нового.Спасибо!

...