73

Author: kossiecoder

db.json

@@ -44,6 +44,18 @@
       "subject": "12",
       "completed": true,
       "id": 15
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "adsf",
+      "id": 16
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 17
     }
   ]
 }

src/axios.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+    baseURL: 'http://localhost:3000/'
+});

src/components/TodoForm.vue

@@ -62,7 +62,7 @@
 
 <script>
 import { useRoute, useRouter } from 'vue-router';
-import axios from 'axios';
+import axios from '@/axios';
 import { ref, computed } from 'vue';
 import _ from 'lodash';
 import Toast from '@/components/Toast.vue';
@@ -104,9 +104,7 @@ export default {
         const getTodo = async () => {
             loading.value = true;
           try {
-            const res = await axios.get(`
-              http://localhost:3000/todos/${todoId}
-            `);
+            const res = await axios.get(`todos/${todoId}`);
 
             todo.value = { ...res.data };
             originalTodo.value = { ...res.data };
@@ -152,14 +150,10 @@ export default {
               body: todo.value.body,
             };
             if (props.editing) {
-              res = await axios.put(`
-                http://localhost:3000/todos/${todoId}
-              `, data);
+              res = await axios.put(`todos/${todoId}`, data);
               originalTodo.value = {...res.data};
             } else {
-              res = await axios.post(`
-                http://localhost:3000/todos
-              `, data);
+              res = await axios.post('todos', data);
               todo.value.subject = '';
               todo.value.body = '';
             }

src/pages/todos/index.vue

@@ -59,7 +59,7 @@
 <script>
 import { ref, computed, watch } from 'vue';
 import TodoList from '@/components/TodoList.vue';
-import axios from 'axios';
+import axios from '@/axios';
 import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
 import {useRouter} from 'vue-router';
@@ -92,7 +92,7 @@ export default {
       currentPage.value = page;
       try {
         const res = await axios.get(
-          `http://localhost:3000/todos?_sort=id&_order=desc&subject_like=${searchText.value}&_page=${page}&_limit=${limit}`
+          `todos?_sort=id&_order=desc&subject_like=${searchText.value}&_page=${page}&_limit=${limit}`
         );
         numberOfTodos.value = res.headers['x-total-count'];
         todos.value = res.data;
@@ -109,7 +109,7 @@ export default {
       // 데이터베이스 투두를 저장
       error.value = '';
       try {
-        await axios.post('http://localhost:3000/todos', {
+        await axios.post('todos', {
           subject: todo.subject,
           completed: todo.completed,
         });
@@ -126,7 +126,7 @@ export default {
       error.value = '';
     
       try {
-        await axios.delete('http://localhost:3000/todos/' + id);
+        await axios.delete('todos/' + id);
         
         getTodos(1);
       } catch (err) {
@@ -140,7 +140,7 @@ export default {
       error.value = '';
       const id = todos.value[index].id;
       try {
-        await axios.patch('http://localhost:3000/todos/' + id, {
+        await axios.patch('todos/' + id, {
           completed: checked
         });