수정 로직 개발

src/front/src/api/articleApi.js

@@ -40,6 +40,20 @@ function postArticle({title = '', content = ''}) {
   });
 }
 
+function updateArticle(id, {title = '', content = ''}) {
+  return axios({
+    url: '/api/articles/' + id,
+    method: 'put',
+    headers: {
+      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+    },
+    data: {
+      title,
+      content
+    }
+  });
+}
+
 function removeArticle(id) {
 
   return axios({
@@ -55,5 +69,6 @@ export default {
   getArticles,
   getArticle,
   postArticle,
+  updateArticle,
   removeArticle
 }

src/front/src/pages/articles/Detail.vue

@@ -13,6 +13,7 @@
 
         <div v-if="article.isOwn">
             <button type="button" @click="remove">삭제</button>
+            <router-link :to="{name: 'WriteArticle', query: {id: article.id}}">수정</router-link>
         </div>
     </div>
 </template>

src/front/src/pages/articles/Write.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <form @submit="submit">
+        <form @submit="isEdit ? update($event) : create($event)">
             <div class="row">
                 <label for="title">Title</label>
                 <input type="text" id="title" v-model="title">
@@ -25,19 +25,35 @@
     data() {
       return {
         title: '',
-        content: ''
+        content: '',
+        isEdit: false
       }
     },
     async beforeCreate() {
       try {
         authentication.bind(this)();
-      } catch (e) {
+      } catch (err) {
         alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
         await this.$router.replace('/');
+        return;
+      }
+
+      const id = this.$route.query.id;
+
+      if (id) {
+        try {
+          const result = await articleApi.getArticle.bind(this)(id);
+          const {title, content} = result.data;
+          this.title = title;
+          this.content = content;
+          this.isEdit = true;
+        } catch (err) {
+          console.log(err);
+        }
       }
     },
     methods: {
-        submit: async function(evt) {
+        create: async function(evt) {
           evt.preventDefault();
 
           const {title, content} = this;
@@ -55,6 +71,25 @@
             console.log(err);
           }
 
+        },
+        async update(evt) {
+          evt.preventDefault();
+
+          const id = this.$route.query.id;
+
+          const {title, content} = this;
+          const data = {
+            title,
+            content
+          };
+
+          try {
+            await articleApi.updateArticle.bind(this)(id, data);
+            await this.$router.push('/articles');
+          } catch (err) {
+            alert('문제가 발생하였습니다.');
+            console.log(err);
+          }
         }
     }
   }

src/front/src/routes/index.js

@@ -31,6 +31,7 @@ export const router = new VueRouter({
     },
     {
       path: '/articles/write',
+      name: 'WriteArticle',
       component: WriteArticle
     },
     {

src/main/java/com/example/vue/domain/article/Article.java

@@ -39,6 +39,13 @@ public class Article {
         this.user = user;
     }
 
+    public Article(Long id, ArticleRequestDto articleRequestDto, User user) {
+        this.id = id;
+        this.title = articleRequestDto.getTitle();
+        this.content = articleRequestDto.getContent();
+        this.user = user;
+    }
+
     @PrePersist
     private void prePersist() {
         this.createdAt = LocalDateTime.now();
@@ -49,6 +56,12 @@ public class Article {
         this.updatedAt = LocalDateTime.now();
     }
 
+    public void update(ArticleRequestDto articleRequestDto) {
+        this.title = articleRequestDto.getTitle();
+        this.content = articleRequestDto.getContent();
+        this.updatedAt = LocalDateTime.now();
+    }
+
     public boolean compareUser(User user) {
         return compareUser(user.getId());
     }
@@ -56,4 +69,8 @@ public class Article {
     public boolean compareUser(Long id) {
         return this.user.getId().equals(id);
     }
+
+    public boolean doesUserHasThis(User user) {
+        return this.compareUser(user);
+    }
 }

src/main/java/com/example/vue/domain/article/ArticleController.java

@@ -31,6 +31,16 @@ public class ArticleController {
         return articleService.findById(articleId, user);
     }
 
+    @ResponseStatus(HttpStatus.OK)
+    @PutMapping(value = "/{articleId}")
+    @Transactional
+    public ArticleResponseDto updateArticle(@PathVariable Long articleId,
+                                            @RequestBody @Valid ArticleRequestDto articleRequestDto,
+                                            @AuthenticationPrincipal User user) {
+
+        return articleService.update(articleId, articleRequestDto, user);
+    }
+
     @ResponseStatus(HttpStatus.CREATED)
     @PostMapping
     @Transactional

src/main/java/com/example/vue/domain/article/ArticleService.java

@@ -21,6 +21,17 @@ public class ArticleService {
         return new ArticleResponseDto(article, user);
     }
 
+    public ArticleResponseDto update(Long articleId, ArticleRequestDto articleRequestDto, User user) {
+        Article article = articleRepository.findById(articleId).orElseThrow(ArticleException.passNoExistException(articleId));
+        if (!article.doesUserHasThis(user)) {
+            throw new ArticleException.AccessNotOwned(articleId);
+        }
+
+        article.update(articleRequestDto);
+
+        return new ArticleResponseDto(articleRepository.save(article), user);
+    }
+
     public List<ArticleResponseDto> findAll(Pageable pageable, User user) {
         return articleRepository.findAll(pageable)
             .stream()
@@ -36,4 +47,11 @@ public class ArticleService {
     public void delete(Long id, User user) {
         articleRepository.deleteById(id, user);
     }
+
+    private void doesUserHasThisArticle(Long articleId, User user) {
+        Article article = articleRepository.findById(articleId).orElseThrow(ArticleException.passNoExistException(articleId));
+        if (!article.compareUser(user)) {
+            throw new ArticleException.AccessNotOwned(articleId);
+        }
+    }
 }