update

src/front/src/api/articleApi.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+function getArticles(page, size, q) {
+  return axios({
+    url: '/api/articles',
+    params: {
+      page,
+      size,
+      q
+    }
+  });
+}
+
+export default {
+  getArticles
+}

src/front/src/pages/Welcome.vue

@@ -3,12 +3,13 @@
        home
        <router-link to="/auth/login">로그인</router-link>
        <router-link to="/auth/register">회원가입</router-link>
+       <router-link to="/articles">게시글</router-link>
    </div>
 </template>
 
 <script>
   export default {
-    name: "Home"
+    name: "Welcome"
   }
 </script>
 

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

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div v-for="article in articles" v-bind:key="article.id">
+            {{ article.title }}
+        </div>
+    </div>
+</template>
+
+<script>
+    import articleApi from "../../api/articleApi";
+    export default {
+        name: "index",
+        data() {
+          return {
+            articles: [],
+            pending: false
+          }
+        },
+        async beforeCreate() {
+          try {
+            const result = await articleApi.getArticles();
+            const { articles } = result.data;
+            this.articles = articles;
+          } catch (err) {
+            alert('문제가 발생하였습니다.');
+            console.log(err.response);
+          }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/front/src/routes/index.js

@@ -1,9 +1,10 @@
 import Vue from 'vue'
 import VueRouter from "vue-router";
 
-import Home from "../pages/Home";
+import Home from "../pages/Welcome";
 import Login from "../pages/auth/Login";
 import Register from "../pages/auth/Register";
+import Articles from "../pages/articles";
 
 
 Vue.use(VueRouter);
@@ -22,6 +23,10 @@ export const router = new VueRouter({
     {
       path: '/auth/register',
       component: Register
+    },
+    {
+      path: '/articles',
+      component: Articles
     }
   ]
 });

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

@@ -0,0 +1,23 @@
+package com.example.vue.domain.article;
+
+import lombok.RequiredArgsConstructor;
+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
+@RequestMapping(value = "/articles")
+@RequiredArgsConstructor
+public class ArticleController {
+
+    private final ArticleService articleService;
+
+    @GetMapping
+    public List<Article> getArticles(Pageable pageable) {
+
+        return null;
+    }
+}