홈>
기사와 태그가있는 작은 블로그 앱이 있습니다. 지금까지 멋진 것은 없습니다. 모든 기사에는 여러 개의 태그가있을 수 있습니다.
라 라벨 백엔드는 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
-
답변 # 1
관련 질문
- laravel - Vuejs를 사용하여 axios catch 블록에서 부모 구성 요소로 객체를 전달하는 방법
- laravel - 생성 후 편집하는 방법
- vue.js - My Laravel Vue 프로젝트에서 여러 관계 데이터를 얻는 방법
- javascript - Vue의 Laravel에서 배열 객체 속성 전달
- vue.js - Axiospost 모의 함수는 Jest, VueJS와 함께 호출되지 않습니다
- laravel - Vue에서 SEO의 실제 페이지 소스를 동적 메타 데이터로 변경하려면 어떻게해야합니까?
- javascript - Vue 3에서 Vueprototype 또는 전역 변수를 사용하는 방법은 무엇입니까?
- typescript - vue - 유효하지 않은 소품 : 유형
- vue.js - Laravel Passport 및 Vue와 Guzzle이 토큰을 반환하지 않음
- axios - Laravel이 내 문제를 보여주는 로그를 작성하도록하려면 어떻게해야합니까?
개인적으로 자바 스크립트의 객체를 API와 다소 동일하게 유지하면서 데이터베이스 리소스를 참조하기 위해 ID를 사용하고 싶습니다.
1
이 경우 태그를 문자열 대신 객체로 변경하고 태그 ID를 API로 보냅니다.
내 기사의 예는 다음과 같습니다.
객체 나 ID를 매개 변수로 사용하는 것은 제 생각에는 괜찮습니다. "클리너"코드가 마음에 들면 객체를 고수해야합니다. ID 선택과 함께 객체에 ID가 있는지 확인하는 곳은 한 곳뿐입니다.
사례 :
2
일반적으로 변수가 처음 초기화되는 구성 요소의 변수를 변경하는 논리를 유지합니다. 그래서 당신이
this.article = someApiData;
에게 먼저 말한 곳 . 삭제 된 태그의 최종 제거를 처리하는 기능이 있습니다.3
세계 최고의 성능을 원한다면 자바 스크립트에서 태그를 제거합니다. 응답에서 업데이트 된 태그 목록을 다시 전송하고이 데이터로 기사의 모든 태그를 업데이트하고 코드를 슬림하게 유지할 수 있습니다. 그러나 나는 여전히
slice()
를 좋아합니다 배열에서 삭제 된 태그.이것이 내 의견이라는 것을 기억하십시오. 당신의 choises는 완전히 괜찮아, 나 자신처럼, 당신과 다른 사람들에게 질문하는 것을 멈추지 말아야한다.