홈>2020-02-01 00:11

vue.js - vuex 및 laravel 5 - 기사에서 태그를 제거하는 방법

기사와 태그가있는 작은 블로그 앱이 있습니다. 지금까지 멋진 것은 없습니다. 모든 기사에는 여러 개의 태그가있을 수 있습니다.

라 라벨 백엔드는 Vue Frontend의 Axios에서 API 호출을 통해 데이터를 제공합니다. 라 라벨 모델에서 기사에는 방법이 있습니다

public function tags(){
        return $this->belongsToMany('App\Tag');
    }

태그의 경우

. 피벗 테이블이 있고이 모든 것이 https ://laracasts.com/series/laravel-5-fundamentals/episodes/21 이 모든 것이 잘 작동합니다.

이제 Vue에서 deleteTag () 메소드를 호출하여 Article과 Tag 사이의 연결을 제거해야한다고 가정 해 봅시다. PHP의 "addTag"도 새로운 태그 모델을 추가하고 피벗 테이블의 태그와 기사 사이의 연결을 추가하거나 태그가 이미 존재하는 경우 기사가있는 기존 태그를 연결하기 때문에 상황이 약간 더 복잡합니다.

이를 달성하는 가장 좋은 방법은 무엇입니까?

지금까지하고있는 일 :

ArticleTags.vue

   deleteTag(tagName){
            let articleId = this.articleId;
            this.$store.dispatch('removeTagFromArticle', { articleId, tagName });
      },

index.js (Vuex 스토어)

actions: {
    removeTagFromArticle(context,param) {
       axios.post('api/articles/delete-tag/', param)
                    .then((res) => {
                        let article = context.getters.getArticleById(param.articleId);
                        let tagName =  param.tagName;
                        context.commit('deleteTag', {article, tagName} );
                    })
                    .catch((err) => console.error(err));
    } }
mutations : {    deleteTag (state, { article, tag }) {
      let tagIndex = article.tags.indexOf(tag);
      article.tags.splice(tagIndex,1);
    } }

ArticleController.php

/**
 * Remove Tag from Article
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function deleteTag(Request $request)
{   
    $tag = \App\Tag::firstOrCreate(array('name' => $request->tagName));
    $article = Article::findOrFail($request->articleId);
    $result = $article->tags()->detach([$tag->id]);
    $this->cleanUpTags();
    return response('true', 200);
}

라우트 /web.php

Route::post('api/articles/delete-tag', 'ArticleController@deleteTag');

지금까지 작동합니다. 코드는 정확히 수행해야합니다. 단지느낌만으로 정말 어색합니다. 그리고 아마도 복잡 할 것입니다. 어쩌면 예제가 간단하지만 전체 설정이 크기 때문일 수 있습니다. 그럼에도 불구하고 코딩을 개선하려고합니다. :)

내 질문은 :

1) Vue의 article 객체를 articleId 대신 상점으로 전달하는 것이 더 좋습니까?

2) 저장소에서 Array.slice ()를 사용하는 아이디어가 너무 복잡합니까? 구성 요소에서 바로 수행 할 수 있습니다.

3) PHP 방식으로 태그를 삭제 한 후 Laravel에서 전체 매장을 다시로드하는 것이 합리적입니까?

수정 : 누군가이 질문을 찾고있는 경우 마지막에 어떻게 해결했는지. 이 앱의 소스 코드는 https://github.com/shopfreelancer/streamyourconsciousness-laravel

laravelvue.jsaxiosvuex

답변 # 1
개인적으로 자바 스크립트의 객체를 API와 다소 동일하게 유지하면서 데이터베이스 리소스를 참조하기 위해 ID를 사용하고 싶습니다.

1

이 경우 태그를 문자열 대신 객체로 변경하고 태그 ID를 API로 보냅니다.

내 기사의 예는 다음과 같습니다.
```
let article = {
    tags: [{ id: 1, name: 'tag 1' }, { id: 2 ... }]
}
```
객체 나 ID를 매개 변수로 사용하는 것은 제 생각에는 괜찮습니다. "클리너"코드가 마음에 들면 객체를 고수해야합니다. ID 선택과 함께 객체에 ID가 있는지 확인하는 곳은 한 곳뿐입니다.

사례 :
```
// Somehwere in code
this.deleteArticle(article);
// Somehwere else in code
this.deleteArticle(article);
// Somewhere else in code
this.deleteArticle(article);
// Function
deleteArticle(article) {
  // This check or other code will only be here instead of 3 times in code
  if (!article.hasOwnProperty('id')) {
    console.error('No id!');
  }
  let id = article.id;
  ...
}
```
2

일반적으로 변수가 처음 초기화되는 구성 요소의 변수를 변경하는 논리를 유지합니다. 그래서 당신이 this.article = someApiData; 에게 먼저 말한 곳 . 삭제 된 태그의 최종 제거를 처리하는 기능이 있습니다.

3

세계 최고의 성능을 원한다면 자바 스크립트에서 태그를 제거합니다. 응답에서 업데이트 된 태그 목록을 다시 전송하고이 데이터로 기사의 모든 태그를 업데이트하고 코드를 슬림하게 유지할 수 있습니다. 그러나 나는 여전히 slice() 를 좋아합니다 배열에서 삭제 된 태그.

이것이 내 의견이라는 것을 기억하십시오. 당신의 choises는 완전히 괜찮아, 나 자신처럼, 당신과 다른 사람들에게 질문하는 것을 멈추지 말아야한다.

Python2.net

vue.js - vuex 및 laravel 5 - 기사에서 태그를 제거하는 방법

관련 자료