게시글 가져오기 성공!

src/front/src/api/articleApi.js

@@ -1,8 +1,13 @@
 import axios from 'axios';
 
-function getArticles(page, size, q) {
+function getArticles({page = 0, size = 10, q = ''}) {
+  const accessToken = this.$cookie.get('accessToken');
+
   return axios({
     url: '/api/articles',
+    headers: {
+      'Authorization': 'Bearer ' + accessToken,
+    },
     params: {
       page,
       size,

src/front/src/main.js

@@ -1,15 +1,13 @@
 import Vue from 'vue';
 import VueCookie from 'vue-cookie';
-
-Vue.use(VueCookie);
-
 import App from './App.vue';
 import {router} from "./routes";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
+Vue.use(VueCookie);
 
 new Vue({
   render: h => h(App),
   router
-}).$mount('#app')
+}).$mount('#app');

src/front/src/pages/Welcome.vue

@@ -8,9 +8,9 @@
 </template>
 
 <script>
-  export default {
-    name: "Welcome"
-  }
+    export default {
+        name: "Welcome"
+    }
 </script>
 
 <style scoped>

src/front/src/pages/articles/index.vue

@@ -18,9 +18,8 @@
         },
         async beforeCreate() {
           try {
-            const result = await articleApi.getArticles();
-            const { articles } = result.data;
-            this.articles = articles;
+            const result = await articleApi.getArticles.bind(this)({});
+            this.articles = result.data;
           } catch (err) {
             alert('문제가 발생하였습니다.');
             console.log(err.response);

src/front/src/routes/index.js

@@ -1,12 +1,11 @@
-import Vue from 'vue'
+import Vue from 'vue';
 import VueRouter from "vue-router";
 
-import Home from "../pages/Welcome";
+import Welcome from "../pages/Welcome";
 import Login from "../pages/auth/Login";
 import Register from "../pages/auth/Register";
 import Articles from "../pages/articles";
 
-
 Vue.use(VueRouter);
 
 export const router = new VueRouter({
@@ -14,7 +13,7 @@ export const router = new VueRouter({
   routes: [
     {
       path: '/',
-      component: Home
+      component: Welcome
     },
     {
       path: '/auth/login',

src/main/java/com/example/vue/config/SecurityConfiguration.java

@@ -44,6 +44,7 @@ public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
             .antMatchers("/auth/login").permitAll()
             .antMatchers("/auth/register").permitAll()
             .antMatchers("/users").authenticated()
+            .antMatchers("/articles").authenticated()
             .and()
             .formLogin().disable()
             .addFilter(jwtAuthenticationFilter())

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

@@ -1,13 +1,30 @@
 package com.example.vue.domain.article;
 
-import javax.persistence.Entity;
-import javax.persistence.GeneratedValue;
-import javax.persistence.Id;
+import lombok.Getter;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.annotation.LastModifiedDate;
+
+import javax.persistence.*;
+import java.time.LocalDateTime;
 
 @Entity
+@Getter
+@NamedQuery(name = "findAll", query = "select a from Article a order by a.createdAt desc")
 public class Article {
 
     @Id @GeneratedValue
     Long id;
 
+    @Column(name = "title")
+    private String title;
+
+    @Column(name = "content")
+    private String content;
+
+    @CreatedDate
+    private LocalDateTime createdAt;
+
+    @LastModifiedDate
+    private LocalDateTime updatedAt;
+
 }

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

@@ -1,11 +1,11 @@
 package com.example.vue.domain.article;
 
 import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Pageable;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.awt.print.Pageable;
 import java.util.List;
 
 @RestController
@@ -16,8 +16,8 @@ public class ArticleController {
     private final ArticleService articleService;
 
     @GetMapping
-    public List<Article> getArticles(Pageable pageable) {
-
-        return null;
+    public List<ArticleResponseDto> getArticles(Pageable pageable) {
+        List<ArticleResponseDto> articles = articleService.findAll(pageable);
+        return articles;
     }
 }

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

@@ -1,9 +1,12 @@
 package com.example.vue.domain.article;
 
 import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Repository;
 
 import javax.persistence.EntityManager;
+import java.util.List;
 
 @Repository
 @RequiredArgsConstructor
@@ -11,4 +14,14 @@ public class ArticleRepository {
 
     private final EntityManager em;
 
+    public List<Article> findAll(Pageable pageable) {
+        int page = pageable.getPageNumber();
+        int size = pageable.getPageSize();
+
+        return em.createNamedQuery("findAll", Article.class)
+            .setFirstResult(page * size)
+            .setMaxResults(page * size + size)
+            .getResultList();
+    }
+
 }

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

@@ -0,0 +1,24 @@
+package com.example.vue.domain.article;
+
+import lombok.Data;
+
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+
+@Data
+public class ArticleResponseDto {
+
+    private Long id;
+    private String title;
+    private String content;
+    private LocalDateTime createdAt;
+    private LocalDateTime updatedAt;
+
+    public ArticleResponseDto(Article article) {
+        this.id = article.getId();
+        this.title = article.getTitle();
+        this.content = article.getContent();
+        this.createdAt = article.getCreatedAt();
+        this.updatedAt = article.getUpdatedAt();
+    }
+}

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

@@ -1,7 +1,23 @@
 package com.example.vue.domain.article;
 
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+import java.util.stream.Collectors;
+
 @Service
+@RequiredArgsConstructor
 public class ArticleService {
+
+    private final ArticleRepository articleRepository;
+
+    public List<ArticleResponseDto> findAll(Pageable pageable) {
+        return articleRepository.findAll(pageable)
+            .stream()
+            .map(ArticleResponseDto::new)
+            .collect(Collectors.toList());
+    }
 }